這篇文章是因為，我們在做的后台項目，里面有大量的表格統計，這個不可能自己手寫，所以其中的表格使用的是jqgrid。
這個插件其實使用起來還是不錯的，里面有很多的功能很贊。這篇博客就是自己的的一個記錄，也是對以后項目的一個參考。因為有一些代碼總是記不住。
首先就是引入這個插件所需要的js和css了，這個相信大家都不陌生，這個插件是基於jq的所以之前要引入jq，這個不詳細的贅述了。然后就是他的基本結構，很簡單，就是一個兩個標簽，一個是表格的內容，一個是翻頁功能。
1 <div class="jqGrid_wrapper"> 2 <table id="table_list_1"></table> 3 <div id="pager_list_1"></div> 4 </div>
table_list_1為這個表格的主要顯示內容，而pager_list_1是顯示翻頁的地方，當然了， 如果你沒有翻頁的話，這個是可以不要的。
然后是比較重要的一部分了，我這里直接粘貼代碼過來，然后在做解釋。
1 $("#table_list_1").jqGrid({ 2 url:'__URL__/data_search', 3 postData:{}, 4 datatype: "json", 5 mtype: 'POST', 6 height: 450, 7 autowidth: true, 8 shrinkToFit: true, 9 rowNum: 14, 10 rowList: [10, 20, 30], 11 colNames: ['日期', '比賽id', '比賽名稱', '比賽報名人數', '比賽參與人數','比賽名次列表'], 12 colModel: [ 13 { 14 name: 'datetime', 15 index: 'datetime', 16 width: 60, 17 sorttype: "int", 18 sortable: false, 19 align:'center' 20 }, 21 { 22 name: 'match_id', 23 index: 'match_id', 24 width: 60, 25 sorttype: "int", 26 sortable: false, 27 align:'center' 28 }, 29 { 30 name: 'match_name', 31 index: 'match_name', 32 width: 60, 33 sorttype: "int", 34 sortable: false, 35 align:'center' 36 }, 37 { 38 name: 'signup_user_num', 39 index: 'signup_user_num', 40 width: 60, 41 sorttype: "int", 42 sortable: false, 43 align:'center' 44 }, 45 { 46 name: 'vaild_user_num', 47 index: 'vaild_user_num', 48 width: 60, 49 sorttype: "int", 50 sortable: false, 51 align:'center', 52 formatter:function(data){ 53 if(data){ 54 return data; 55 }else{ 56 return "/"; 57 } 58 } 59 }, 60 { 61 name: 'isfinish', 62 index: 'isfinish', 63 width: 60, 64 formatter: function() { 65 return '<input class="btn btn-w-m btn-info" type="button" value="詳情" onclick="getdata(this)"/>'; 66 }, 67 align:'center' 68 } 69 ], 70 pager: "#pager_list_1", 71 loadonce: true, 72 viewrecords: true, 73 caption: "比賽情況", 74 hidegrid: false 75 });
這里的url是我們這個表格里面的數據的接口，當然了也可以用ajax請求回來數據之后，在添加進去。下面會說到這種辦法。
1.loadonce
首先說下一，我被坑的最多的一個地方，就是上面的71行代碼中的一個，叫做loadonce 的屬性，我先把官方說明放在下面： “如果為ture則數據只從服務器端抓取一次，之后所有操作都是在客戶端執行，翻頁功能會被禁用”。其實這句話表述的前半句是正確的，只從服務器加載一次數據，然后所有的操作都是在客戶端執行，但是，翻頁功能不是被禁用了。如果一次請求回來了，1000條數據，但是每頁只顯示100條的話，還是會有分頁的，只是這個時候，分頁功能是前端完成的，不會再次請求服務器了。這也是我們通常說的假分頁。
如果你們的數據量真的很大的話，一下子全部把數據給前端這種方法肯定是不可以的，肯定是需要真正的分頁功能，讓后台服務器，每次只返回對應的頁數的數據，然后前端加載，這樣的話，loadonce可以設置為false。這里還有一點需要注意的是，如果是真分頁的話，jqgrid回檢查一個參數，這個參數是全部的數據量，只有得到了這個參數，jqgrid才能正確的顯示總頁數，還有就是每次請求的page頁。這個就需要一個jsonReader 屬性來標識服務器返回的字段和jqgrid默認的字段來一一對應。（最好讓你們的服務器返回的就按照jqgrid這樣直接返回，這樣就不需要一一對應了。）
jsonReader : { root: "rows", page: "page", total: "total", records: "records", repeatitems: true, cell: "cell", id: "id", userdata: "userdata", subgrid: { root:"rows", repeatitems: true, cell:"cell" }
放一個我們現在后台返回的數據格式，直接看圖片吧，相信大家一看就能明白，total是總頁數，records是總數據量。
這個截圖就是后台返回的數據格式，我們不用整理。如果后台不是這樣的格式，那么按照上面的自己整理。
添加了一個東西，就是當你們的后台已經寫好了需要傳輸的參數的時候，我們需要按照后台的標准傳參，這個時候就需要用到下面的東西，就是更改我們給后台默認的傳參，主要就是下面的兩個參數：
1 prmNames:{ 2 rows:"rowss", // 第幾頁 3 page:"indexpage" //一頁多少條數據 4 },
2.數據格式化和自定義--formatter
因為是列表，會遇到很種數據格式，但是后台返回的不一定是能直接顯示在頁面上的，有的可能需要前端自己處理一下數據。比如后台給返回了一個時間戳，但是我們需要把他顯示成正確的時間格式，或者，后台返回的是0和1，但是0代表的是未通過，而1表示是通過，這個時候就需要前端格式化數據。我們用到的就是formatter
1 { 2 name:"order_id", 3 width:160, 4 formatter: function(cellvalue,options,rowObject){ 5 return act_formatter(rowObject); 6 console.log(rowObject); 7 } 8},
這里面我們是直接寫的一個函數，其中會有三個參數，我們一般常用的就是cellvalue，和rowObject這兩個。其中，只有你的name和返回的數據中的json的鍵名對應起來的話，這里cellvalue就是返回的這個鍵值。這個時候我們就能直接寫if判斷，然后return返回就可以了。如果你想着得到其他的數據，可以寫一個name是在返回的數據中沒有對應的鍵名的，這樣，rowObject就能得到這一行的所有的數據了，這里我們可以嘗試着打印一遍數據就可以了。
其中我比較常用的是return整個行，也就是數據全部在act_formatter這個函數中，下面我把這個函數寫在下面。
function act_formatter(rowObject){ //操作中需要的格式化按鈕 var ags = ''; for(a in rowObject){ ags += a+'="'+''+rowObject[a]+'" '; } var str = ""; str += '<input onclick="change(this)" '+ags+' type="button" value="刪除" data-toggle="modal" data-target="#delModal2" class="btn btn-danger" /> '; str += '<input onclick="change(this)" '+ags+' type="button" value="注銷" data-toggle="modal" data-target="#delModal" class="btn btn-danger" /> '; str += '<input onclick="free(this)" '+ags+' type="button" value="續費" data-toggle="modal" data-target="#" class="btn btn-success" /> '; str += '<input onclick="free_img(this)" '+ags+' type="button" value="圖片服務" data-toggle="modal" data-target="#" class="btn btn-success" /> '; str+="</br>" //str += '<input onclick="watch_free(this)" '+ags+' type="button" value="支付鏈接" data-toggle="modal" data-target="#newModal8" class="btn btn-success" /> '; //console.log(is_break); //if(is_break==1){ //是否斷開微信 str += '<input onclick="change_gid_type(this)" '+ags+' class="btn btn-info" type="button" data-toggle="modal" data-target="#newModal5" value="修改" />'; //}else if(is_break==0){ str += '<input onclick="get_check(this)" '+ags+' class="btn btn-info" type="button" data-toggle="modal" data-target="#" value="綁定微信" />'; //}else if(is_break==2){ //} str += '<input onclick="settime(this)" '+ags+' type="button" value="設置" data-toggle="modal" data-target="#newModal9" class="btn btn-info" /> '; return str; }
這段代碼是在一行表的最后，會有一列是操作按鈕，這個時候，會需要表格中比較多的數據，當然了，我們可以只添加上需要的這一條數據，也可以把這個表的所有的數據都添加上。這樣比較方便我們操作。然后里面的函數，比如change（this），然后里面寫入
1 { 2 name:'accounted_data', 3 align : 'center', 4 formatter:"number", 5 formatoptions:{ 6 decimalPlaces:2 7 }, 8 }
“number”就是會把這一列當做數字處理，然后下面的formatoptions是這個數字的選項。decimalPlaces是保留的小數位數，我寫的2就是保留兩位小數(這里需要注意的是，直接寫上2就行了，不要加引號)，當然了，這里面還有其他的用法，附上一個鏈接，大家自己去看去實踐。
3.重新加載數據
重新加載數據，其實用的比較多，通常就是因為表格中的數據量比較大，不能直觀的看需需要的數據，所以就需要篩選一下數據，增加篩選條件，然后重新加載一遍數據。如果是加載本地的數據的話， 其實就跟jqgrid沒有什么太大的關系了，只需要清除一遍數據，然后重新加載就好了。不過大部分的情況不是這樣的，把搜索條件放在postData中，然后把所需要的數據傳給jqgrid，然后加載數據的，這個也很簡單，跟jq的ajax基本上沒有什么區別，直接給出相應的代碼。
1 $("#table_list_1").jqGrid("clearGridData"); 2 3 $("#table_list_1").setGridParam({ 4 postData:{ 5 start_date:data1, 6 end_date:data2 7 } 8 }).trigger("reloadGrid");
第一行的代碼是清除原來的數據，這個不管是加載本地的數據，還是直接調用jqgrid的方法，都是需要的。然后第4行是傳輸的參數，比如例子中就是靠開始時間和結束時間篩選的。這樣的話，就可以正常的加載數據了。
但是需要注意的一點是，我上次遇到了一次情況，發現程序不會重新加載數據，就是因為我們那次的數據量比較小，都是使用的loadonce：true這個屬性，然后我改變篩選條件以后，jqgrid不會重新的請求數據了，，，，，這個讓我很詫異，結果百度以后得知，當我們設置jqgrid的loadonce:true的時候，其實他會把一個屬性，datatype重新設置成local，所以這個時候jqgrid就不會重新的加載一遍數據了，所以我們還需要再次加載全部數據的時候設置一下，datatype：json，這樣就能再次獲取到全部的數據。（以上的這種情況適用於數據量不是很大，數據都是一次加載，但是還有條件篩選的功能的程序。）
未完待續……