jqGrid之重新加载数据

近来工作市场用到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");
  • 10
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值