jqGrid 翻页行保持选中

来源：互联网发布：矿山建设工程预算软件编辑：程序博客网时间：2024/04/26 05:45

jgGrid表格插件按照正常情况下，设置multiselect:true,，就可以实现多选。但是当数据分页显示时，翻页后，之前已经选择的就会失效。

这里通过设置一个全局变量，缓存已经选中的数据项，来实现翻页后保持选中。

jqGrid 页面代码

先是一个使用 jgGrid 的页面代码，里面的js、css文件可到相应的官网下载，jgGrid 加载的是本地数据。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">    <link rel="stylesheet" type="text/css" href="Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid-bootstrap.css">    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/jquery-1.11.0.min.js"></script>    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/i18n/grid.locale-cn.js"></script>    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/jquery.jqGrid.min.js"></script></head><body>    <div>        <table id="grid"></table>        <div id="pager"></div>    </div><script type="text/javascript">    $.jgrid.defaults.width = 780;    $.jgrid.defaults.styleUI = 'Bootstrap';    var data = [        {"id":1,"name":"test1","desc":"desc1"},        {"id":2,"name":"test2","desc":"desc2"},        {"id":3,"name":"test3","desc":"desc3"},        {"id":4,"name":"test4","desc":"desc4"},        {"id":5,"name":"test5","desc":"desc5"},        {"id":6,"name":"test6","desc":"desc6"},        {"id":7,"name":"test7","desc":"desc7"},        {"id":8,"name":"test8","desc":"desc8"},        {"id":9,"name":"test9","desc":"desc9"},        {"id":10,"name":"test10","desc":"desc10"},        {"id":11,"name":"test11","desc":"desc11"},        {"id":12,"name":"test12","desc":"desc12"},        {"id":13,"name":"test13","desc":"desc13"},        {"id":14,"name":"test14","desc":"desc14"},        {"id":15,"name":"test15","desc":"desc15"},        {"id":16,"name":"test16","desc":"desc16"},        {"id":17,"name":"test17","desc":"desc17"},        {"id":18,"name":"test18","desc":"desc18"},        {"id":19,"name":"test19","desc":"desc19"},        {"id":20,"name":"test20","desc":"desc20"},        {"id":21,"name":"test21","desc":"desc21"},        {"id":22,"name":"test22","desc":"desc22"},        {"id":23,"name":"test23","desc":"desc23"},        {"id":24,"name":"test24","desc":"desc24"},        {"id":25,"name":"test25","desc":"desc25"},        {"id":26,"name":"test26","desc":"desc26"},    ]    $("#grid").jqGrid({        data:data,        multiselect:true,        shrinkToFit:true,        datatype: "local",        autowidth:true,        colModel:[            {name:'id',key:true,},            {name:'name'},            {name:'desc'},          ],        height: 450,        viewrecords: true,        rowNum:10,        rowList:[10,20,30],        pager: '#pager',    })    jQuery("#grid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});</script></body></html>

jqGrid 显示采用 bootstrap 样式。此时已经加载了一张jgGrid 的表格。

设置行保持选中

表格中影响行选中状态的时刻有这么几处：

    1、表格加载时需要选中原来已经选的项    2、点击某一行时会（取消）选中该行    3、点击全选时会（取消）选中本页所有行

所以就需要对这几个情况进行处理。

　表格加载时选中

此时可以用 jqGrid 插件中的gridComplete 函数。表格数据加载完成、排序和翻页都会触发此事件。

在这之前，会先用一个全局变量保存已经选中的行

var item_selected = ["1","3","6"];

然后gridComplete 函数中就可以这样写

gridComplete:function() {    var _this = this;    if(item_selected.length>0){        for (var i = 0; i < item_selected.length; i++) {            $(_this).jqGrid('setSelection',item_selected[i]);        }                   }},

此时当我们刷新、翻页、排序时，表格都会把刷新前已选中的行继续选中。

点击一行或点击全选

由于会涉及到 Array 的操作，这里使用 lodash.js 来处理。
1、点击单行
这里用beforeSelectRow 这个函数来处理，主要实现：

    当点击选中行时，将选中行id添加到全局变量中    当点击取消选中行时，将行id从全局变量中移除

beforeSelectRow:function(rowid, e) {    var _this = this;    var index = _.indexOf(item_selected, rowid);    if(index==-1){        item_selected.push(rowid);    }    else{        item_selected = _.pull(item_selected, rowid);    }},

2、点击全选
点击全选和点击一行类似，只不过现在选的行id变成了行id数组。

onSelectAll:function(aRowids,status) {    var _this = this;    if(status){        item_selected = _.union(item_selected, aRowids);    }else{        item_selected = _.difference(item_selected, aRowids);    }           },

此时，表格已经能实现保持行选中了。
对于点击单行时，不用onSelectRow ，主要是因为在

$(_this).jqGrid('setSelection',item_selected[i]);

其中设置选中行也会调用onSelectRow，容易混淆。

最后是整个代码。。。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">    <link rel="stylesheet" type="text/css" href="Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid-bootstrap.css">    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/jquery-1.11.0.min.js"></script>    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/i18n/grid.locale-cn.js"></script>    <script type="text/javascript" src="Guriddo_jqGrid_JS_5.2.0/js/jquery.jqGrid.min.js"></script></head><body>    <div>        <table id="grid"></table>        <div id="pager"></div>    </div>    <script type="text/javascript" src="lodash.min.js"></script><script type="text/javascript">    $.jgrid.defaults.width = 780;    $.jgrid.defaults.styleUI = 'Bootstrap';    var data = [        {"id":1,"name":"test1","desc":"desc1"},        {"id":2,"name":"test2","desc":"desc2"},        {"id":3,"name":"test3","desc":"desc3"},        {"id":4,"name":"test4","desc":"desc4"},        {"id":5,"name":"test5","desc":"desc5"},        {"id":6,"name":"test6","desc":"desc6"},        {"id":7,"name":"test7","desc":"desc7"},        {"id":8,"name":"test8","desc":"desc8"},        {"id":9,"name":"test9","desc":"desc9"},        {"id":10,"name":"test10","desc":"desc10"},        {"id":11,"name":"test11","desc":"desc11"},        {"id":12,"name":"test12","desc":"desc12"},        {"id":13,"name":"test13","desc":"desc13"},        {"id":14,"name":"test14","desc":"desc14"},        {"id":15,"name":"test15","desc":"desc15"},        {"id":16,"name":"test16","desc":"desc16"},        {"id":17,"name":"test17","desc":"desc17"},        {"id":18,"name":"test18","desc":"desc18"},        {"id":19,"name":"test19","desc":"desc19"},        {"id":20,"name":"test20","desc":"desc20"},        {"id":21,"name":"test21","desc":"desc21"},        {"id":22,"name":"test22","desc":"desc22"},        {"id":23,"name":"test23","desc":"desc23"},        {"id":24,"name":"test24","desc":"desc24"},        {"id":25,"name":"test25","desc":"desc25"},        {"id":26,"name":"test26","desc":"desc26"},    ]    var item_selected = ["1","3","6"];    $("#grid").jqGrid({        data:data,        multiselect:true,        shrinkToFit:true,        datatype: "local",        autowidth:true,        colModel:[            {name:'id',key:true,},            {name:'name'},            {name:'desc'},          ],        height: 450,        viewrecords: true,        rowNum:10,        rowList:[10,20,30],        pager: '#pager',        gridComplete:function() {            var _this = this;            if(item_selected.length>0){                for (var i = 0; i < item_selected.length; i++) {                    $(_this).jqGrid('setSelection',item_selected[i]);                }                           }        },        onSelectAll:function(aRowids,status) {            var _this = this;            if(status){                item_selected = _.union(item_selected, aRowids);            }else{                item_selected = _.difference(item_selected, aRowids);            }                   },        beforeSelectRow:function(rowid, e) {            var _this = this;            var index = _.indexOf(item_selected, rowid);            if(index==-1){                item_selected.push(rowid);            }            else{                item_selected = _.pull(item_selected, rowid);            }        },    })    jQuery("#grid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});</script></body></html>

0 0