jqGrid之重新加载数据

HTML结构：

 

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

//这里给出一个模板数据
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");