jqGrid 基礎使用

飢寒交迫的狼發表於2018-05-21

jqGrid文件

目錄

b)       實現多級表頭.

c)       凍結行或凍結列.

d)       合併行和和並列.

e)       編輯行.

f)        資料格式化.

1.jQgrid的引入。

Html程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

// JqGrid元件基礎樣式表--必要

<link href="static/public/css/plugins/jqgrid/ui.jqgridffe4.css"rel="stylesheet">

//這個是所有jquery外掛的基礎，首先第一個引入

<scripttype="text/javascript"src="js/jquery-1.7.1.js"></script>

<script src="static/public/js/plugins/jqgrid/i18n/grid.locale-cnffe4.js"></script>

<script c="static/public/js/plugins/jqgrid/jquery.jqGrid.minffe4.js"></script>

</head>
<body>
<table id="list2"></table> 
<div id="pager2"></div>
</body>
</html>
Js程式碼：
//建立jqGrid元件
jQuery("#list2").jqGrid(
      {
         url : 'data/JSONData.json',             //元件建立完成之後請求資料的url
         datatype : "json",                            //請求資料返回的型別。可選json,xml,txt
         colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],                         
                                     //jqGrid的列顯示名字
         colModel : [      //jqGrid每一列的配置資訊。包括名字，索引，寬度,對齊方式.....
                      {name : 'id',index : 'id',width : 55}, 
                      {name : 'invdate',index : 'invdate',width : 90}, 
                      {name : 'name',index : 'name asc, invdate',width : 100}, 
                      {name : 'amount',index : 'amount',width : 80,align : "right"}, 
                      {name : 'tax',index : 'tax',width : 80,align : "right"}, 
                      {name : 'total',index : 'total',width : 80,align : "right"}, 
                      {name : 'note',index : 'note',width : 150,sortable : false} 
                    ],
         rowNum : 10,                                    //一頁顯示多少條
         rowList : [ 10, 20, 30 ],                     //可供使用者選擇一頁顯示多少條
         pager : '#pager2',                              //表格頁尾的佔位符(一般是div)的id
         sortname : 'id',                                  //初始化的時候排序的欄位
         sortorder : "desc",                           //排序方式,可選desc,asc
         mtype : "post",                                                         //向後臺請求資料的ajax的型別。可選post,get
         viewrecords : true,
         caption : "JSON Example"             //表格的標題名字
      });
            效果展示：

         案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid

 

2.實現多級表頭。

      *二級表頭

           html程式碼：同上，

           js程式碼：

//建立jqGrid元件，此處省略同上

jQuery("#test2").jqGrid('setGroupHeaders',{

useColSpanStyle: true,      //合併後的單元格隱藏
groupHeaders:[
{startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
    {startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
    ]  
});
效果圖：
案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid/ice_line_title.html
      *三級表頭
      ……
3.凍結列。
       html程式碼：同上，
      javascript程式碼：下方標紅的為凍結列屬性核心
jQuery("#gfrc1").jqGrid({
  url:ctx+'/JSONNameData',
  datatype: "json",  
  colNames: ['InvNo', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
  colModel: [
           {name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date', frozen : true},
           {name: 'name', index: 'name', width: 100, frozen : true },
           ……
      ],
       ……
    
  });
jQuery("#gfrc1").jqGrid('setFrozenColumns');
效果圖：
 
案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid/ice_line.html
 
4.合併行和列。
       html程式碼：同上，
      javascript程式碼：下方標紅的為凍結列屬性核心
1）在colmodel中為要合併的列新增id標識
cellattr: function(rowId, tv, rawObject, cm, rdata) {
    /合併單元格 
    return 'id=\'corpName' + rowId + "\'";
    //if (Number(rowId) < 5) { return ' colspan=2' } 
},
2)設定引數
gridComplete: function() {
    //②在gridComplete呼叫合併方法 
    var gridName = "table_list_1";
    Merger(gridName, 'corpName');
}
3）merger函式；合併單元格函式
function Merger(gridName,CellName){
    //得到顯示到介面的id集合
    var mya = $("#" + gridName + "").getDataIDs();
    //當前顯示多少條
    var length = mya.length,a;
    for (var i = 0; i < length; i++) {
        //從上到下獲取一條資訊
        var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
        //定義合併行數
        var rowSpanTaxCount = 1;
        for (j = i + 1; j <= length; j++) {
            //和上邊的資訊對比 如果值一樣就合併行數+1 然後設定rowspan 讓當前單元格隱藏
            var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
            if (before[CellName] == end[CellName]) {
                rowSpanTaxCount++;
                $("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
            } else {
                rowSpanTaxCount = 1;
                break;
            }
            $("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
        }
    }
}
4）合併列只需要適當修改merger函式，不在例舉。
效果圖：
 
案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid/merge_line.html
由於資料量過大，jqGrid合併單元格時資料迭代過多，出現頁面卡死，頁面無響應！解決方案：對合並單元格邏輯程式碼merger函式進行優化：
functionMergerRow(gridName, CellName) {
    //得到顯示到介面的id集合
    var mya = $("#table_list_1").getDataIDs();
    //當前顯示多少條
    var length = mya.length;
    var s = 0;//標記合併行開始的行數
    //...省略
    //定義合併行數
    var rowSpanTaxCount = 1;
    //...省略
    for (vari = 0; i < length; i++) {
        //從上到下獲取一條資訊
        var before = $("#table_list_1").jqGrid('getRowData', mya[i]);
        var end = $("#table_list_1").jqGrid('getRowData', mya[i+1]);
        (before[CellName] == end[CellName])?(rowSpanTaxCount++,$("#table_list_1").setCell(mya[i+1], CellName, '', { display: 'none' })):(rowSpanTaxCount = 1,s = i+1)
        $("#" + CellName + "" + mya[s] + "").attr("rowspan", rowSpanTaxCount);
        //...省略
    }
}
優化後的程式碼可以對大量的資料進行合併行操作，不會出現頁面卡死的問題！
5.編輯單元格。
      html程式碼：同上，
為了是單元格可以編輯，你需要設定cellEdit引數為true，並且適當的方式取調整colModel引數。
      javascript程式碼：下方標紅的為凍結列屬性核心。
jQuery("#list2").jqGrid({
    url:'data/JSONData.json',
    datatype: "json",
    colNames: ['InvNo', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
    colModel: [
        {name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date'},
        {name: 'amount', index: 'amount', width: 95, align: 'right', editable:true },
        {name: 'tax', index: 'tax', width: 95, formatter: 'number', sorttype: 'number',align: 'right',editable:true},
        ……省略
    ],       
……省略
    cellEdit: true, //啟用或者禁用單元格編輯功能
    cellsubmit: 'clientArray', //定義了單元格內容儲存位置
       cellurl:’../ctx/jsonData’ //單元格提交的url
效果圖：只有client，amount，tax可以編輯！！！
案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid/edit_line.html
 
6.資料格式化。
html程式碼：同上，
jqGrid中整合的有格式化資料
      number型別的格式;
在colmodel中設定formatter: 'number'；預設的保留兩位小數.
    Select型別的格式;
            在colmodel中設定
                 edittype:'select', 
                 formatter:’select’,
editoptions:{value:"1:One;2:Two"}}結果是，表格的資料值為1或者2但是現實的是One或者Two。
在colmodel中設定formatter: 'number'；預設的保留兩位小數.
同樣支援自定義格式化資料
      在colmodel中設定formatter為格式化函式
      Formatter：function（cellcalue，options，rowObject）{…省略}
 
效果圖：
 
案例：http://yblw6bf8.hk10.gqzyp.com/jqgrid/formatter.html

 




相關文章