jqGrid学习笔记

最新推荐文章于 2023-11-21 10:13:15 发布

不加糖的药

最新推荐文章于 2023-11-21 10:13:15 发布

阅读量407

点赞数

分类专栏：插件文章标签： jqgrid

插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、jqGrid的加载。

1.引用相关头文件

引入CSS：

<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
<link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />

引入JS：

<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

因为jqGrid3.6及以后的版本集成了jQuery UI，所以，此处需要导入UI相关js和css。另外grid.locale-en.js这个语言文件必须在jquery.jqGrid.min.js之前加载，否则会出问题。

2.将jqgrid加入页面中

根据jqGrid的文档，要想生成一个jqGrid，最直接的方法就是：

$("#list").jqGrid(options);

其中list是页面上的一个table：<table id="list"></table>
下面是一个简单的例子：

<script type="text/javascript">
  $(document).ready(function () {
    jQuery("#list").jqGrid({
      url: 'Handler.ashx',
      datatype: "json",
      mtype: 'GET',
      colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'],
      colModel: [{
        name: 'SalesReasonID',
        index: 'SalesReasonID', 
        width: 40, 
        align: "left", 
        editable: true 
      }, { 
        name: 'Name', 
        index: 'Name', 
        width: 100, 
        align: "center" 
      }, { 
        name: 'ReasonType', 
        index: 'ReasonType', 
        width: 100, 
        align: "center" 
      }, { 
        name: 'ModifiedDate', 
        index: 'ModifiedDate', 
        width: 150, 
        align: "center", 
        search: false 
      }],
      rowList: [10, 20, 30],
      sortname: 'SalesReasonID',
      viewrecords: true,
      sortorder: "desc",
      jsonReader: {
        root: "griddata",
        total: "totalpages",
        page: "currpage",
        records: "totalrecords",
        repeatitems: false
      },
      pager: jQuery('#pager'),
      rowNum: 5,
      altclass: 'altRowsColour',
      //width: 'auto',
      width: '500',
      height: 'auto',
      caption: "DemoGrid"
    }).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false }); ;
  })
</script>

二、jqgrid的重要选项

具体的options参考，可以访问jqGrid文档关于option的章节（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有几个是比较常用的，重点介绍一下：
url ：jqGrid控件通过这个参数得到需要显示的数据，具体的返回值可以使XML也可以是Json。
datatype ：这个参数用于设定将要得到的数据类型。类型包括：json 、xml、xmlstring、local、javascript、function。
mtype : 定义使用哪种方法发起请求，GET或者POST。
height ：Grid的高度，可以接受数字、%值、auto，默认值为150。
width ：Grid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置。
shrinkToFit ：此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。
autowidth ：默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段；如果当父容器尺寸变化了，同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidth方法来完成。
pager ：定义页码控制条Page Bar，在上面的例子中是用一个p(

)来放置的。
sortname ：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到Server端。
viewrecords ：设置是否在Pager Bar显示所有记录的总数。
caption ：设置Grid表格的标题，如果未设置，则标题区域不显示。
rowNum ：用于设置Grid中一次显示的行数，默认值为20。正是这个选项将参数rows（prmNames中设置的）通过url选项设置的链接传递到Server。注意如果Server返回的数据行数超过了rowNum的设定，则Grid也只显示rowNum设定的行数。
rowList ：一个数组，用于设置Grid可以接受的rowNum值。例如[10,20,30]。
colNames ：字符串数组，用于指定各列的题头文本，与列的顺序是对应的。
colModel ：最重要的数组之一，用于设定各列的参数。（稍后详述）
prmNames ：这是一个数组，用于设置jqGrid将要向Server传递的参数名称。（稍后详述）
jsonReader ：这又是一个数组，用来设定如何解析从Server端发回来的json数据。（稍后详述）

2.1 prmNames选项

prmNames是jqGrid的一个重要选项，用于设置jqGrid将要向Server传递的参数名称。其默认值为：

prmNames : {
    page:"page", // 表示请求页码的参数名称
    rows:"rows", // 表示请求行数的参数名称
    sort: "sidx", // 表示用于排序的列名的参数名称
    order: "sord", // 表示采用的排序方式的参数名称
    search:"_search", // 表示是否是搜索请求的参数名称
    nd:"nd", // 表示已经发送请求的次数的参数名称
    id:"id", // 表示当在编辑数据模块中发送数据时，使用的id的名称
    oper:"oper", // operation参数名称
    editoper:"edit", // 当在edit模式中提交数据时，操作的名称
    addoper:"add", // 当在add模式中提交数据时，操作的名称
    deloper:"del", // 当在delete模式中提交数据时，操作的名称
    subgridid:"id", // 当点击以载入数据到子表时，传递的数据名称
    npage: null,
    totalrows:"totalrows" // 表示需从Server得到总共多少行数据的参数名称，参见    jqGrid选项中的rowTotal
}

2.2 jsonReader选项

jsonReader是jqGrid的一个重要选项，用于设置如何解析从Server端发回来的json数据，如果Server返回的是xml数据，则对应的使用xmlReader来解析。jsonReader的默认值为：

jsonReader : {
    root: "rows", // json中代表实际模型数据的入口
    page: "page", // json中代表当前页码的数据
    total: "total", // json中代表页码总数的数据
    records: "records", // json中代表数据行总数的数据
    repeatitems: true, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。
    cell: "cell",
    id: "id",
    userdata: "userdata",
    subgrid: {
        root:"rows",
        repeatitems: true,
        cell:"cell"
    }
}

假如有下面一个json字符串：

{
"totalpages":"3",
"currpage":"1",
"totalrecords":"11",
"griddata":[{
    "SalesReasonID":"1",
    "Name":"Price",
    "ReasonType":"Other",
    "ModifiedDate":"1998年6月1日"
},{
    "SalesReasonID":"2",
    "Name":"On Promotion",
    "ReasonType":"Promotion",
    "ModifiedDate":"1998年6月1日"
},{
    "SalesReasonID":"3",
    "Name":"Magazine Advertisement",
    "ReasonType":"Marketing",
    "ModifiedDate":"1998年6月1日"
},{
    "SalesReasonID":"4",
    "Name":"Television Advertisement",
    "ReasonType":"Marketing",
    "ModifiedDate":"1998年6月1日"
},{
    "SalesReasonID":"5",
    "Name":"Manufacturer",
    "ReasonType":"Other",
    "ModifiedDate":"1998年6月1日"
}]
}

其对应的jsonReader为：

jsonReader: {
    root: "griddata",
    total: "totalpages",
    page: "currpage",
    records: "totalrecords",
    repeatitems: false
}

注：cell、id在repeatitems为true时可以用到，即每一个记录是由一对id和cell组合而成，即可以适用另一种json结构。援引文档中的例子：
repeatitems为true时：

jQuery("#gridid").jqGrid({ 
     ... 
     jsonReader : { 
         root:"invdata", 
         page: "currpage", 
         total: "totalpages", 
         records: "totalrecords"
     }, 
     ... 
});

json结构为：

{  
"totalpages": "xxx",  
"currpage": "yyy", 
"totalrecords": "zzz", 
"invdata" : [{
    "id" :"1", 
    "cell" :[
        "cell11", 
        "cell12", 
        "cell13"
    ]},   // cell中不需要各列的name，只要值就OK了，但是需要保持对应
    {
    "id" :"2", 
    "cell" :[
        "cell21", 
        "cell22", 
        "cell23"
    ]},
... 
]
}

repeatitems为false时：

jQuery("#gridid").jqGrid({ 
     ...
     jsonReader : { 
         root:"invdata", 
         page: "currpage", 
         total: "totalpages", 
         records: "totalrecords", 
         repeatitems: false, 
         id: "0"
     }, 
     ... 
});

json结构为：

{  
"totalpages" : "xxx",  
"currpage" : "yyy", 
"totalrecords" : "zzz", 
"invdata" : [{
    "invid" : "1",
    "invdate":"cell11", 
    "amount" :"cell12", 
    "tax" :"cell13", 
    "total" :"1234", 
    "note" :"somenote"
}, // 数据中需要各列的name，但是可以不按列的顺序
    {
    "invid" : "2",
    "invdate":"cell21", 
    "amount" :"cell22", 
    "tax" :"cell23", 
    "total" :"2345", 
    "note" :"some note"
    }, 
... 
] 
}

2.3 colModel的重要选项

colModel也有许多非常重要的选项，在使用搜索、排序等方面都会用到。这里先只说说最基本的。
name ：为Grid中的每个列设置唯一的名称，这是一个必需选项，其中保留字包括subgrid、cb、rn。
index ：设置排序时所使用的索引名称，这个index名称会作为sidx参数（prmNames中设置的）传递到Server。
label ：当jqGrid的colNames选项数组为空时，为各列指定题头。如果colNames和此项都为空时，则name选项值会成为题头。
width ：设置列的宽度，目前只能接受以px为单位的数值，默认为150。
sortable ：设置该列是否可以排序，默认为true。
search ：设置该列是否可以被列为搜索条件，默认为true。
resizable ：设置列是否可以变更尺寸，默认为true。
hidden ：设置此列初始化时是否为隐藏状态，默认为false。
formatter ：预设类型或用来格式化该列的自定义函数名。常用预设格式有：integer、date、currency、number等（具体参见文档）。

三、注意事项

动态改变Add Form或者Edit Form中的select的内容，如：改变下图中的Comparator下拉中的内容。

$("#list_d").navGrid('#pager_d',{
    add:true,
    edit:true,
    del:true,
    search:false,
    refresh:false
},{
    checkOnSubmit:false, 
    closeAfterEdit: true,
    recreateForm:true,
    beforeInitData:function(formid){
        initComparator();
    },
    beforeShowForm: function(formid){
        $("#list_d").jqGrid('setColProp', 'Name', { 
            editrules:{required:false},
        });
    $('#tr_Name', formid).hide();
    }
}，//edit
{},//add
{}//del
）

beforeInitData, beforeShowForm在每次点击编辑的时候都会执行。initComparator的作用是通过ajax获取数据，然后利用

$("#list_d").jqGrid('setColProp', 'Comparator', { 
    editoptions: { 
        value: valueString
    } 
});

来设置Comparator下拉中的内容。其中valueString的格式如下’equal to: equal to; not equal to: not equal to’。键值之间用冒号隔开，2项之间用分号隔开。注意：把recreateForm设为true，否则’setColProp’只在第一次调用时有效。
2. var rowNum = parseInt($(this).getGridParam("records"), 10); 得到数据条数。
3. jQuery("#list_d").clearGridData();清空数据。
4. jQuery("#list").getCell(ids,"Key");获取第ids行的key列。
5. $("#list").jqGrid('setSelection', "1");选中第一行。放在loadComplete：中在gird加载完成的时候自动选中第一行。

loadComplete:function(data){
    $("#list").jqGrid('setSelection', "1");
}

对于像1中的可编辑的字段，可以设定rule，参见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules
修改Option，以URL为例

jQuery("#list_d").jqGrid('setGridParam',{
    url:"xxx.aspx",
    page:1
}).trigger('reloadGrid');

摘自 Hurry的专栏

不加糖的药

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqGrid学习笔记

一、jqGrid的加载。1.引用相关头文件引入CSS：<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" /><link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />引入JS：<script src="Sc
复制链接

扫一扫