JqGrid多行选中,翻页保持选中

最新推荐文章于 2023-03-28 09:47:22 发布

捉住那只猫

最新推荐文章于 2023-03-28 09:47:22 发布

阅读量1.9k

点赞数 1

分类专栏：项目问题记录

本文链接：https://blog.csdn.net/yijian941215/article/details/89333629

版权

项目问题记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

（一）定义全局变量保存选中id

//保存选中id
var checkBox=[];
//定义页码值
   var cPage=0;

（二）使用翻页事件

onPaging:function (pgButton) {
                                cPage++; //翻页事件
                            },

（三）每次数据加载完成后使当前页选中行继续选中

loadComplete:function (data) {
                                if (cPage == 0) {
                                    checkBox = [];//每次加载清空选中状态
                                }
                                cPage = 0;
                                //此处需要注意页面值是动态加载数据还是一次性加载全部数据，写法不一样
                                var rowArr = data.rows;
                    
                                if (checkBox.length > 0) {
                                    for (var i = 0; i < rowArr.length; i++) {
                                        for (var j = 0; j < checkBox.length; j++) {
                                            if (rowArr[i].id == checkBox[j].id) {
                                                $("#jqGrid").jqGrid('setSelection', rowArr[i].id);
                                                break;
                                            }
                                        }
                                    }
                                }
                            }

（四）定义选中事件

onSelectRow:function(rowId,status){
                                if(status){
                                    if (checkBox.indexOf(rowId) == -1){
                                    //根据id获取整行数据
                                    var values = $("#jqGrid").jqGrid("getRowData", rowId);
                                    //向数组插入数据
                                        checkBox.push(values );
                                    }
                                }else{
                                //自定义方法，撤销选中
                                    deleteCheckBox(rowId);
                                }
                            }

（五）撤销选中的方法

function deleteCheckBox(rowId){
                        for(var i = 0; i < checkBox.length; i++){
                            if (checkBox[i].id == rowId){
                                //根据索引值删除checkBox中的数据
                                checkBox.splice(i,1);
                            }
                        }
                    }

（六）全部页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8"/>
    <link rel="shortcut icon" type="image/png" href="${ctx}/static/images/bool.png">
    <title>企业商户选择</title>
    <style>
        .modal .modal-dialog {
            width: 1000px;
            margin-left: 15%;
            margin-top: 10px;
        }
    </style>
</head>
<body class="nav-md">
<div class="container body">
    <div class="right_col" role="main">
        <div class="x_panel">
            <div class="x_title">
                <h2>企业商户选择</h2>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div>
                    <table id="jqGrid"></table>
                    <div id="jqGridPager"></div>
                </div>
                <script type="text/javascript">
                    var checkBox=[];
                    var cPage=0;
                    $(document).ready(function () {
                        $("#jqGrid").jqGrid({
                            url: '${ctx}/marketingMerchant/selectMerchantByType',
                            styleUI: 'Bootstrap',
                            editurl: 'clientArray',
                            datatype: "json",
                            rownumbers: true,
                            colNames: [
                                'ID', '商户名称', '上级商户id', '上级商户'],
                            colModel: [
                                {name: 'id', index: 'id', width: '80px', hidden: true},
                                {name: 'companyName', index: 'companyName', width: '80px'},
                                {name: 'parentId', index: 'parentId', width: '80px', hidden: true},
                                {name: 'parentName', index: 'parentName', width: '80px'},
                            ],
                            gridComplete: function () {


                            },
                            rowNum: 15,
                            rowList: [20, 15, 30],
                            height: $(window).height,
                            autowidth:true,
                            pager:"#jqGridPager",
                            altRows:true,
                            hidegrid:false,
                            viewrecords:true,
                            recordpos:'left',
                            loadonce:false,
                            multiselect: true,
                            onPaging:function (pgButton) {
                                cPage++; //翻页事件
                            },
                            loadComplete:function (data) {
                                if (cPage == 0) {
                                    checkBox = [];//每次加载清空选中状态
                                }
                                cPage = 0;
                                //此处需要注意页面值是动态加载数据还是一次性加载全部数据，写法不一样，这里是动态加载页面数据
                                var rowArr = data.rows;
                                
                                if (checkBox.length > 0) {
                                    for (var i = 0; i < rowArr.length; i++) {
                                        for (var j = 0; j < checkBox.length; j++) {
                                            if (rowArr[i].id == checkBox[j].id) {
                                                $("#jqGrid").jqGrid('setSelection', rowArr[i].id);
                                                break;
                                            }
                                        }
                                    }
                                }
                            },onSelectRow:function(rowId,status){
                                if(status){
                                    if (checkBox.indexOf(rowId) == -1){
                                   //根据id获取整行数据
                                    var values = $("#jqGrid").jqGrid("getRowData", rowId);
                                    //向数组插入数据
                                    checkBox.push(values );
                                    }
                                }else{
                                    deleteCheckBox(rowId);
                                }
                            },
                            jsonReader: {
                                root: "rows",
                                page:"page",
                                total:"total",
                                records:"records",
                                repeatitems:false,
                                cell:"cell",
                                id:"id"
                            }


                        });
                        $('#jqGrid').jqGrid('navGrid', '#jqGridPager', {
                            refresh: false,
                            edit: false,
                            add: false,
                            del: false,
                            search: false,
                            position: "right"
                        });
                    });
                    function deleteCheckBox(rowId){
                        for(var i = 0; i < checkBox.length; i++){
                            if (checkBox[i].id == rowId){
                                //根据索引值删除checkBox中的数据
                                checkBox.splice(i,1);
                            }
                        }
                    }
                </script>
            </div>
        </div>
    </div>
</div>
</body>
</html>