jqGrid使用记录总结

最新推荐文章于 2021-06-16 23:35:04 发布

召唤师峡谷

最新推荐文章于 2021-06-16 23:35:04 发布

阅读量3.2k

点赞数 1

分类专栏： web前端文章标签： bootstrap jqgrid 解决方案 html

本文链接：https://blog.csdn.net/giser_whu/article/details/51170732

版权

web前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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()中的所有参数，这里我只需要更新标题和表格数据，其他的也都可以重新设置，最后重载表格即可