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 | <html lang="en"> <head> <!-- 기본 JqWidjet Import 부분 --> <title id='Description'>In this sample is demonstrated how to display aggregates in jqxGrid.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script> $(function () { /* JqWidget Pattern * source 생성 -> dataAdapter = new $.jqx.dataAdapter(source) -> 실제 그리드가 들어갈 태그에 해당 생성 함수 실행 */ // 데이터(Source) 생성 // generatedata()는 Json 배열을 무작위로 생성해주는 예제용 함수입니다. localdata의 타입은 Json 배열형식으로 넣어주시면 되요. var source = { localdata : generatedata(200), datatype : 'array', datafields : [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' } ], updaterow : function ( rowid, rowdata ) { console.log(rowid + " : " + rowdata); } }; // data Adapter 생성 var dataAdapter = new $.jqx.dataAdapter(source, { //loadComplete : function (data) { alert("데이터 로드가 완료되었습니다.") }, //loadError : function (xhr, status, error) { alert("데이터를 로드할 수 없습니다."); } }); var renderer = function (row, culumfield, value, defaulthtml, columnproperties) { if(value > 3) return $($.parseHTML(defaulthtml)).css('color', 'red').prop('outerHTML'); return defaulthtml; }; // Grid 생성 $("#target").jqxGrid({ pageable: true, autoheight: true, width : 820, source : dataAdapter, columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 }, { text: 'Product', datafield: 'productname', width: 170 }, { text: 'Available', datafield: 'available', width: 100 }, { text: 'Quantity', datafield: 'quantity', width: 90 }, { text: 'Price', datafield: 'price', width: 100, cellsformat : 'c1', cellsrenderer : renderer} ] /* * columns, 인자 Options * text : 'String Table Header' | 해당 열의 타이틀(제목)지정 * columntype : ' * cellsalign : 'left, center, right' | 해당 열의 Cell들의 정렬 방식을 정의할 수 있다. * cellsformat: 'String Format Options' | http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsformatting.htm * cellsrenderer: function (row, columfield, value, defaulthtml, columnproperties) | 간단히 말해서 셀을 커스텀으로 렌더링하고 싶을 때 쓰이는 옵션 * pageable , autoheight : true, false(Defualt) | Grid Paging 기능 구현 옵션 */ }); // Localiztion 방법 (예를 들어서 }); </script> </head> <body> <div id="target"></div> </body> </html> |
카테고리 없음