jqGrid入門簡單使用
阿新 • • 發佈：2019-05-01
不執行 lec doctype idp 是否 必須 高度 index auto
這裏沒有請求後臺，是直接讀取本地.json文件
就兩個文件，一個html、一個json文件，jquery是jqgrid在線引用的
目錄結構
效果
代碼
test2.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <!--jqueryui--> 6 <link href="//cdn.bootcss.com/jqueryui/1.12.0-rc.2/jquery-ui.min.css"rel="stylesheet"> 7 <!--jqgrid的css--> 8 <link href="//cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet"> 9 10 11 <!--jquery--> 12 <script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script> 13 <!--locale--> 14 <script src="//cdn.bootcss.com/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script> 15 <!--jqgrid的js--> 16 <script src="//cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script> 17 <!--<script src="../js/layer/layer.js"></script>--> 18 19 <meta charset="utf-8" /> 20 <title>jqGrid Loading Data</title> 21 22 </head> 23 <body> 24 <table id="jqGrid"></table> 25 <div id="jqGridPager"></div> 26 <script language="JavaScript"> 27 $(function(){ 28 $("#jqGrid").jqGrid({ 29 url: "../json/test2.json", 30 datatype:‘json‘, 31 colModel:[ 32 {label: "ID", name:"id",index:"id", width: 20}, 33 {label: "名稱", name:"name",index:"name", width: 40}, 34 {label: "年齡", name:"age",index:"age", width: 40} 35 ], 36 viewrecords:true,//是否顯示所有記錄的總數 37 height: $(window).height() - 240,//定高度 38 // height: "auto",//自動高度，隨行數變 39 rowNum:50,//當前顯示行數 40 rowList:[2,4,5,6,8,10,12,15,25,30],//可選的行數 41 rownumbers: true,//顯示行序列 42 rownumWidth: 25,//如果rownumbers為true，則可以設置column的寬度 43 // width: 500,//定寬度 44 autowidth: true,//自動寬度 45 pager:"#jqGridPager",//定義翻頁用的導航欄，必須是有效的html元素，例如id為jqGridPager 46 jsonReader: {//來跟服務器端返回的數據做對應 47 root: "records",//包含實際數據的數組 48 page: "current",//當前頁 49 total: "pages",//總頁數 50 records: "total"//查詢出的記錄數 51 }, 52 prmNames: {//發送數據到服務器，當參數為null時不會被發到服務器端 53 page: "page", 54 rows: "rows", 55 order: "order" 56 }, 57 beforeRequest: function() {//請求前觸發的事件 58 // layer.msg("beforeRequest"); 59 console.log("1——beforeRequest"); 60 }, 61 onPaging: function(pgButton) {//點擊翻頁按鈕或點擊換行數時觸發此事件，也就是重新請求，參數pgButton為翻頁，長度為總頁數。初次加載時不執行，事件最後執行 62 console.log("onPaging"); 63 }, 64 gridComplete: function () {//跟onPaging的事件一樣，只是這個觸發時最後執行。初次加載時也執行，兩者事件不沖突 65 console.log("2——gridComplete"); 66 }, 67 loadComplete: function (xhr) {//當從服務器返回響應時執行，xhr：XMLHttpRequest 對象 68 console.log("3——loadComplete"); 69 }, 70 onCellSelect: function (rowid,iCol,cellcontent,e) {//當點擊單元格時觸發。rowid：當前行id；iCol：當前單元格索引；cellContent：當前單元格內容；e：event對象 71 console.log("onCellSelect——rowid:" + rowid); 72 console.log("onCellSelect——iCol:" + iCol); 73 console.log("onCellSelect——cellcontent:" + cellcontent); 74 console.log("onCellSelect——e:" + e); 75 }, 76 ondblClickRow: function (rowid,iRow,iCol,e) {//雙擊行時觸發。rowid：當前行id；iRow：當前行索引位置；iCol：當前單元格位置索引；e:event對象 77 console.log("ondblClickRow——rowid:" + rowid); 78 console.log("ondblClickRow——iRow:" + iRow); 79 console.log("ondblClickRow——iCol:" + iCol); 80 console.log("ondblClickRow——e:" + e); 81 }//和鼠標右鍵事件onRightClickRow一樣參數 82 }); 83 }); 84 </script> 85 86 </body> 87 </html>
json文件test2.json
1 { 2 "current": 1, 3 "total": 31, 4 "pages": 4, 5 "records": [ 6 { 7 "id": 1, 8 "name": "test1", 9 "age": 21 10 }, 11 { 12 "id": 2, 13 "name": "test2", 14 "age": 22 15 }, 16 { 17 "id": 3, 18 "name": "test3", 19 "age": 23 20 }, 21 { 22 "id": 4, 23 "name": "test4", 24 "age": 24 25 }, 26 { 27 "id": 5, 28 "name": "test5", 29 "age": 25 30 }, 31 { 32 "id": 6, 33 "name": "test6", 34 "age": 26 35 }, 36 { 37 "id": 7, 38 "name": "test7", 39 "age": 27 40 }, 41 { 42 "id": 8, 43 "name": "test8", 44 "age": 28 45 }, 46 { 47 "id": 9, 48 "name": "test9", 49 "age": 29 50 }, 51 { 52 "id": 10, 53 "name": "test10", 54 "age": 30 55 }, 56 { 57 "id": 11, 58 "name": "test11", 59 "age": 31 60 }, 61 { 62 "id": 12, 63 "name": "test12", 64 "age": 32 65 }, 66 { 67 "id": 13, 68 "name": "test13", 69 "age": 33 70 }, 71 { 72 "id": 14, 73 "name": "test14", 74 "age": 34 75 }, 76 { 77 "id": 15, 78 "name": "test15", 79 "age": 35 80 }, 81 { 82 "id": 16, 83 "name": "test16", 84 "age": 36 85 }, 86 { 87 "id": 17, 88 "name": "test17", 89 "age": 37 90 }, 91 { 92 "id": 18, 93 "name": "test18", 94 "age": 38 95 }, 96 { 97 "id": 19, 98 "name": "test19", 99 "age": 39 100 }, 101 { 102 "id": 20, 103 "name": "test20", 104 "age": 40 105 }, 106 { 107 "id": 21, 108 "name": "test21", 109 "age": 41 110 }, 111 { 112 "id": 22, 113 "name": "test22", 114 "age": 42 115 }, 116 { 117 "id": 23, 118 "name": "test23", 119 "age": 43 120 }, 121 { 122 "id": 24, 123 "name": "test24", 124 "age": 44 125 }, 126 { 127 "id": 25, 128 "name": "test25", 129 "age": 45 130 }, 131 { 132 "id": 26, 133 "name": "test26", 134 "age": 46 135 }, 136 { 137 "id": 27, 138 "name": "test27", 139 "age": 47 140 }, 141 { 142 "id": 28, 143 "name": "test28", 144 "age": 48 145 }, 146 { 147 "id": 29, 148 "name": "test29", 149 "age": 49 150 }, 151 { 152 "id": 30, 153 "name": "test30", 154 "age": 50 155 }, 156 { 157 "id": 31, 158 "name": "test31", 159 "age": 51 160 } 161 ] 162 }
jqGrid入門簡單使用