jqGrid 翻页行保持选中

最新推荐文章于 2023-02-13 16:30:33 发布

magic_wings

最新推荐文章于 2023-02-13 16:30:33 发布

阅读量4.6k

点赞数

分类专栏： web前端文章标签： jqgrid

本文链接：https://blog.csdn.net/magic_wings/article/details/56698113

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>