jqGrid之重新加载数据

时间:2022-11-30 15:37:07

近来工作市场用到jqgrid这个插件,主要用于呈现表格的功能,有些心得做一小结。
首先要引入 jquery.jqGrid.min.js 文件
HTML结构部分很简单:

<table id="jqGrid_ds_left"></table>
<div id="jqGridPager"></div>

其次就是必须的配置信息了:

//这里给出一个模板数据
dgDataLeft =[
{dataType:"小于50%",count:10}, //第一条数据
{dataType:"小于10%",count:20}, //第二条数据
]

$.jgrid.gridUnload("jqGrid_ds_left");
$("#jqGrid_ds_left").jqGrid({
datatype : "local",
data : dgDataLeft,
styleUI : 'Bootstrap',

colModel : [ {
label : '丢包率', //label 对应表头的列
name : 'dataType'
}, {
label : '个数',
name : 'count',
formatter : function(cellvalue, options, rowObject){
// cellvalue 对应的是 count 的值
// rowObject 对应 第 N 条数据
}
} ],
viewrecords : true,
autowidth : true,
height : 150,
rowNum : 20,
shrinkToFit : true,
autoScroll : false,
cellEdit : true,
pager: "#jqGridPager",
onCellSelect : function(rowid, index, contents, event) {
//点击tr的点击事件 rowid 对应第几行 (从1开始计数)
}
});

这样就能生成一个jqgrid表格。 有时候我们需要动态的重新加载数据,其实这很简单,在此基础上只需要增加以下代码即可:

$("#jqGrid_ds").jqGrid('clearGridData');  //清空表格
$("#jqGrid_ds").jqGrid('setGridParam',{ // 重新加载数据
datatype:'local',
data : newdata, // newdata 是符合格式要求的需要重新加载的数据
page:1
}).trigger("reloadGrid");