jqGrid使用记录总结

Posted 2022-12-02 召唤师峡谷

jqGrid使用记录总结

表格应该也是最常用的控件之一了，尽管BootStrap提供了表格，但是只能用于静态数据；要实现查询检索等操作还是要借助其他表格插件的，这里我采用的是jqGrid

1、需求

功能设计需要两个表一个折线图（EChart）：其中一个表为总表（显示当前所有信息），选择一个站点，可以显示该站历时信息，同时绘制变化曲线。

---

2、解决方案

2.1 html代码

<div class="container-fluid jqgrid-wrapper">
    <div class="row">
        <div class="col-md-12">
            <div class="container-fluid ">
                <table id="jqGrid-stationInfo-all"></table>
                <div id="jqGridPager-stationInfo-all"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="container-fluid">
                <table id="jqGrid-stationInfo-single"></table>
                <div id="jqGridPager-stationInfo-single"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="container-fluid">
                <div id="aqi-dom" style="height:400px"></div>
            </div>
        </div>
    </div>
</div>

2.2 JS代码

 $("#jqGrid-stationInfo-all").jqGrid(
        url : 'XXXXXXXX',
        mtype : "GET",
        styleUI : 'Bootstrap',
        datatype : "json",
        autowidth : true,
        shrinkToFit : true,
        rowList : [10, 20, 30],
        colNames : ['XX', 'XX', 'XX', 'XX', 'XX', 'XX', 'XX', 'XX'],
        colModel : [
            
                name : 'OID',
                index : 'OID', align : "center",
                width : 100
            ,
            
                name : 'NAME',
                index : 'NAME', align : "center",
                width : 80
            ,
            
                name : 'ADDRESS', align : "center",
                index : 'ADDRESS',
                width : 130
            ,
            
                name : 'RVNM',
                index : 'RVNM', align : "center",
                width : 70
            , 
                name : 'L',
                index : 'L', align : "center",
                width : 70
            ,
            
                name : 'Q',
                index : 'Q', align : "center",
                width : 120
            ,
            
                name : 'TM',
                index : 'TM', align : "center",
                width : 120
            , 
                name : 'WL', align : "center",
                index : 'WL',
                width : 120
            
        ],
        viewrecords : true,
        loadonce : true,
        hidegrid : false,
        height : 300,
        caption : "XXXXX",
        pager : "#jqGridPager-stationInfo-all",
        onSelectRow : selectRowFunction
    );
     // 搜索
    $("#jqGrid-stationInfo-all").jqGrid('navGrid', '#jqGridPager-stationInfo-all', 
        edit : false,
        add : false,
        del : false,
        search : true
    , 
        height : 200,
        reloadAfterSubmit : true
    );

---

3、总结

3.1 行选中事件(onSelectRow)

onSelectRow：当选择此行时触发事件；rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用。用法如下：

onSelectRow:function(rowid,status)
    somefunction

或者

onSelectRow:rowSelectedFunction，
function rowSelectedFunction(rowid,status)
    somefunction

这里推荐使用后面一种用法。其他常用的双击、更新、删除等用法都是一样的。

3.2 重新加载数据 (重要)

需求：每次点击总表时要对应显示单站点数据，因此单站点表每次都要重新加载。
解决方法：使用setGridParam和trigger(“reloadGrid”)方法。方法说明：

方法	参数	说明
setGridParam	object	设置grid的参数。有些参数的修改必须要重新加载grid才可以生效，这个方法可以覆盖事件
trigger(“reloadGrid”)	none	重新加载当前表格，也会向服务器发起新的请求

示例：

$("#jqGrid-stationInfo-single").setCaption("yourTitle(这里写要更新的表格标题)").setGridParam(
            data : stationData
        ).trigger("reloadGrid");

或者

$("#jqGrid-stationInfo-single").setGridParam(
            caption：yourTitle, //此处更新表格标题
            data : yourData, //此处更新表格数据
            otherParam:youtParam,

        ).trigger("reloadGrid");

需要注意的是：setGridParam方法中的object包含上述2.2节中jqGrid()中的所有参数，这里我只需要更新标题和表格数据，其他的也都可以重新设置，最后重载表格即可

---

4、后续总结

总结后续使用方法事件等

---

5、参考文章

[1] http://www.cnblogs.com/onflying/archive/2013/05/14/3077505.html
[2] http://blog.csdn.net/rosanu_blog/article/details/8334070
[3] http://xiaocao000.iteye.com/blog/1961735