1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <link rel="stylesheet" type="text/css" href="./lib/guriddo_jqGrid/css/ui.jqgrid.css" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css"type="text/css" /> <!-- jqgroud ui themes --> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/ui-darkness/jquery-ui.css" rel="stylesheet"> </head> <body> // 그리드를 그릴 테이블 <table id="list2"></table> //그리드 페이징을 위한설정 <div id="pager" class="scroll"></div> </body> <!-- jqgrid 설정 --> <script type="text/javascript" src="./lib/guriddo_jqGrid/js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="./lib/guriddo_jqGrid/js/i18n/grid.locale-kr.js"></script> <script type="text/javascript" src="./lib/jquery-ui-1.12.1.custom/jquery-ui.js"></script> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | function gridView() { $.jgrid.gridUnload("list2"); //그리드의 값변경(리로드)을 위해선 미리 선언 $("#list2").jqGrid({ url : '/library/gridView.do', // 데이터가있는 url 매핑 datatype : 'json', //datatype jsonReader : { // controller에서 리턴한 값 total:"total", records:"records", page:"page", repeatitems : false }, mtype : 'POST', // 데이터 전송방식 colNames : [ '사원ID', '이름', '사원번호', '부서', '직급', '사원상태', '입사일', '비고' ], // 컬럼명 colModel : [ { // JSON 데이터의 키값과 colModel의 name값이 일치해야만 매핑이 된다 name : 'ename', index : 'ename', align : 'center', width : 60, editable : true, edittype : "text" }, { name : 'name', index : 'name', align : 'center', width : 60, editable : true, edittype : "text" }, { name : 'dcode', index : 'dcode', align : 'center', width : 60, editable : true, edittype : "text" }, { name : 'department', index : 'department', align : 'center', width : 60, editable : true, edittype : "text" }, { name : 'position', index : 'position', align : 'center', width : 60, editable : true, edittype : "text" }, { name : 'present', index : 'present', align : 'center', width : 60, editable : true, edittype : "text" }, { name : 'bireday', index : 'bireday', align : 'center', width : 60, editable : true, edittype : "text", formatter : "date", formatoptions : { newformat : " Y/m/d" } }, { name : 'note', index : 'note', align : 'center', width : 60, editable : true, edittype : "text" } ], rowNum :10, // 그리드 한 화면에 보여줄 데이터 갯수 -1로 해놓으면 가져온 데이터를 모두 뿌려준다 rowList : [10, 20, 30 ], // 페이지에서 보여줄 레코드 갯수 viewrecords : true, // 페이징 바에서 총 레코드 수를 표시할지 여부 sortname : 'ename', // 처음 그리드를 불러올 때에 정렬 기준 컬럼 sortorder : "asc", sortable : true, // 정렬을 하기위해 설정 caption : "사용자조회", //width : 850, height : '450px', showpage : true, // 페이징 true multiselect : true, pager : $('#pager'), autowidth: true, emptyrecords : "데이터가 없습니다." ,// 레코드가 없을때 보여줄 문구 loadonce : false, // true를 하면은 페이징은 되지만 수정을했을때 리로드가 안됨 아니 그냥 리로드가 안됨 ondblClickRow: function(rowid){ // 그리드 더블클릭시 실행하는 함수 }, loadComplete : function() { // 그리드로드 완료 후 실행될 함수 } }); } | cs |
http://www.trirand.net/demo/javascript/jqgrid/sorting/custom/index.html
여기들어가서 맨끝에 탭세 theme 들어가면 ui 어떤 ui인지 알수있다.
'개발 > jqgrid' 카테고리의 다른 글
| 그리드 여러 옵션들 정리 - 수정필요 (0) | 2017.05.22 |
|---|---|
| cellEdit 사용 (0) | 2017.05.22 |
| ★jqgrid 페이징 분리 (0) | 2016.12.14 |
| ★jqgrid 페이징 구현(쿼리) --> count추가 2016.12.21 (0) | 2016.12.12 |
| jqgrid loadComplete , gridComplete (0) | 2016.12.08 |
댓글