글

라벨이 jQuery인 게시물 표시

선택된 Row의 특정컬럼값 수정

$ ( "#my-jqgrid-table" ). jqGrid ( 'setCell' , rowId , '컬럼명' , '수정데이터' );
댓글 쓰기
자세한 내용 보기

jqgrid get selected row 선택된 줄의 정보 가져오기

jqgrid를 사용하다보면 선택된 줄의 정보를 사용해서 처리해야 하는 경우가 많이 생긴다     선택된 줄에 설정된 아이디 값을 가져오거나 선택된 줄의 rowdata 에서 특정 값을가져오기 위해서는     getGridRowData, getGridParam 등을 사용하면된다.     $( "{gridtableid}" ).getGridParam( "selrow" );     $( "{gridtableid}" ).jqGrid('getGridParam', "selrow" );       위의 스크립트를 실행하면 현재 선택되어있는 줄의 아이디 값을 반환한다     만약 선택된줄이 없다면 null을 반환하며     jqGrid를 만들때 multiselect옵션을 true로 주엇다면 선택된줄들중 마지막에 선택된 줄의 id 값을 반환한다     만약  multiselect옵션이 true  이고 여러 줄을 선택해 이줄들의 아이디 값을 배열로 받고 싶다면     $( "{gridtableid}" ).jqGrid('getGridParam', 'selarrrow');     $( "{gridtableid}" ).getGridParam('selarrrow');    위 스크립트를 사용하면 된다     선택된항목의 rowdata를 가져오고 싶다면 아래 스트립트를 사용하면 된다     $( "{gridtableid}" ).jqGrid('getRowData', rowid)...
댓글 쓰기
자세한 내용 보기

jQgrid의 지정한 칼럼, 지정한 열을 다른색으로 지정하기

사용자에게 해당칼럼이나 열의 정보를 강조하기 위해서 테이블의 배경색을 바꾸고 싶을 때는 다음처럼 처리한다. // 배경색상 css 선언 var   cssGreen = { 'background-color' : '#6DFF6D' };       // 그리드 데이터의 ID 가져오기 var   ids = $( '#requestList' ).jqGrid( 'getDataIDs' );       // 그리드 데이터 가져오기 var   gridData = $( "#requestList" ).jqGrid( 'getRowData' );   // 데이터 확인후 색상 변경 for   ( var   i = 0; i < gridData.length; i++) {            // 데이터의 is_test 확인      if   (gridData[i].is_test ==  'Y' ) {                    // 열의 색상을 변경하고 싶을 때(css는 미리 선언)          $( '#requestList tr[id='   + ids[i] +  ']' ).addClass( 'grid-test' );                    // 칼럼의 색생을 변경하고 싶을 때 ...
댓글 쓰기
자세한 내용 보기

jQuery 사용 핵심 정리

셀렉터의 종류 셀렉터 표현 방법 All Selector $("*") ID Selector $("#id") Element Selector $("elementName") Class Selector $(".className") Multiple Selector $("selector1, selector2, selector3, selectorN") 형식(셀렉터) 설명 $(Selector[attr]) attr 속성(attribute)값을 가지는 Selector 요소와 일치 $(Selector[attr=”value”]) attr 속성의 값이 value와 동일한 값인 Selector 요소와 일치 $(Selector[attr!=”value”]) attr 속성의 값이 value와 같지 않은 값인 Selector 요소와 일치 $(Selector[attr^=”value”]) attr 속성의 값이 value 값으로 시작하는 Selector 요소와 일치 $(Selector[attr$=”value”]) attr 속성의 값이 value 값으로 끝나는 Selector 요소와 일치 $(Selector[attr*=”value”]) attr 속성의 값이 value 값을 포함하는 Selector 요소와 일치 $(Selector[attr~=”value”]) attr 속성의 값이 공백과 함께 value 값을 포함하는 Selector 요소와 일치 형식(셀렉터) 셀렉터 표현식 Child Selector $(“parent > child”) Descendant Select...
댓글 쓰기
자세한 내용 보기

jQuery 사용시 주의해야 할점 요약

셀렉터의 구체화 사용 “class” 또는 “attribute”를 통한 셀렉트시에는 최대한 자세히  명시를 해 주는 것이 성능에 큰 도움이 됨, 셀렉터의 “class”를 이용할 경우에는 단순히 $(“.myClass”) 보다는 $(“div > ul > li.class”)처럼 많은 정보를 주면 jQuery가 HTML문서에서 탐색하는 범위가 줄어들어 성능향상의 효과가 있음 셀렉터의 사용 자제 기존에 사용한 셀렉터를 재사용을 하거나, .end() 메서드를 통해 반복 사용하지 않을 것 순수 자바스크립트 사용 할것 jQuery의 함수를 실행할 경우 내부에서 구현된 복잡한 로직을 통해 javascript를 실행하고 있기 때문에 해당 로직을 피하게 되면 그만큼의 성능이 올라간다 .css() .css() 메서드를 사용하여, 선택한 개체에 특정 스타일을 적용할 경우 내부에서 많은 처리를 함
댓글 쓰기
자세한 내용 보기

jQuery 예제 - hide, show, toggle

<!-- 클릭시 show - hide, toggle 효과 테스트 --> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd "> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"  src="../jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){  $("#hideBtn").bind("click", function(){   $("#description"). hide ();  });  $("#showBtn").bind("click", function(){   $("#description"). show ();  });  $("#chk").bind("click", function(){   $("#description"). toggle ();  }); }); </script> </head> <body> <div id="description"> </div> <input type="button" id="hideBtn" valu...
댓글 쓰기
자세한 내용 보기

실무에 꼭 쓸 jQuery 플러그인 모음

  liteAccordion - a horizontal accordion plugin for jQuery : 아코디언 효과 / 메인화면에 주요 상품이나 이벤트를 여러개 보여 줄때 유용하다. Google Wave-like : 댓글 다는 모양 깔끔하고 움직임을 추가 하였다. Google Powered Site Search with jQuery : 구글 검색기를 재구성하였다. 멋지다. Slideshow Basic : 기본적인 좌우 슬라이드쇼 깔끔하고 단순해서 좋다. Feature List : 주요 제품 특징이라든지, 주요 공지-이벤트를 보여 줄때 좋을듯 하다. s3Slider jQuery plugin : 메인 플래시 대신 꾸미기에 적당하다. 다양한 차트 구현 플러그인 : 다양하게 차트를 다이나믹하게 구현
댓글 쓰기
자세한 내용 보기