easyui datagrid组件单击全选让指定的几行不选中，没指定的依然选中

最新推荐文章于 2022-11-03 09:13:16 发布

忆水思寒

最新推荐文章于 2022-11-03 09:13:16 发布

阅读量992

点赞数

分类专栏：前端

原文链接：https://blog.csdn.net/qq_35572020/article/details/54645001

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

一：效果图：
这里写图片描述

二：页面效果图代码：

var IsCheckFlag = true; //标示是否是勾选复选框选中行的，true - 是 , false - 否
    var jishu=0;
    //绚染列表
    $('#tt').datagrid({
        title:"菜单列表", 
        iconCls:"icon-save",//图标 
        url:'queryList.action',
        width:"100%",
        height:"auto",
        nowrap: false, //默认true,设置为 true，则把数据显示在一行里。
        striped: true, //设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
        border: true, //边框
        collapsible:false,//是否可折叠的 
        fitColumns:true,//设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
        fixed:true,//设置为 true，则当 'fitColumns' 设置为 true 时放置调整宽度。
        singleSelect:false,//是否单选 
        pagination:true,//分页控件 
        rownumbers:true,//显示行号
        queryParams: form2Json("searchform"),//多条件查询关键之处,queryParams是需要发送远程请求带参数的数据放入这里面
        remoteSort:false,//默认true,定义是否从服务器排序数据。

        frozenColumns:[[ {field:'ck',checkbox:true}]],//多选框,位置固定在最左边
        columns:[
                 [
                    {field: "mc", title: "菜单名称", width:"33%", align: "center"},//field后台返回数据的name名称, title标题名称 ,width宽度，align字体位置
                    {field: "faid_name", title: "所属一级菜单",width:"33%",align: "center"},
                    {field: "id",title:"操作",width:fixWidth(0.333),align:"center",  
                         formatter:function(value,row,index){ //value：字段的值。 row：当前行的所有数据row点出具体的数据，比如要faId就是row.faId就可以用。index：行的索引，就是当前行的行号。 
                            if(null==row.faId || ""==row.faId){                                                                                                                                                        
                                var btn = "<a href='javascript:void(0);' class='editcls' οnclick=\"delAppInfoReady('1','"+row.id+"')\">删除</a>&nbsp;&nbsp;<a href='javascript:void(0);' class='editcls' οnclick=\"dialogAdd_Edit('修改界面','确认修改','"+row.id+"')\">修改</a><br>";
                                return btn;  
                            }

                         }
                     }
              ]
        ],//显示数据库查询出来的数据

        /*
        *以下方法就是解决“点击行内元素还是相当于选中了该行，只是复选框的勾不会勾上而已”的问题
        */
        // 当用户单击一个单元格时触发。
        onClickCell: function (rowIndex, field, value) {
         IsCheckFlag = false;
        },

        //当用户选中一行时触发，参数包括：rowIndex：选中行的索引，从 0 开始,rowData：选中行对应的记录
        onSelect: function (rowIndex, rowData) {
             if (!IsCheckFlag) {
                 IsCheckFlag = true;
                 $(this).datagrid("unselectRow", rowIndex);
             }
         }, 

        //当用户取消选中一行时触发
        onUnselect: function (rowIndex, rowData) {
             if (!IsCheckFlag) {
                 IsCheckFlag = true;
                 $(this).datagrid("selectRow", rowIndex);
             }
         },

         /*
          *以下方法就是解决点击全选“多选框中有一小部分是不可选的”而不会选中不可选部分的的问题，不过因为有一部指定行数没有选中，所以点击全选，全选功能依然有，但全选选项框的勾没有，因为指定的行没有备选上，所以全选框就不算全选，还有一点点的缺陷。
         */
        //加载完毕后触发获取所有的checkbox遍历判断哪些单选框不可选取
        onLoadSuccess: function(data){
            $('#tt').datagrid('clearSelections'); //一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
            if (data.rows.length > 0) {
                //循环判断操作为新增的不能选择
                for (var i = 0; i < data.rows.length; i++) {
                    //根据operate让某些行不可选
                    if (null==data.rows[i].faId || ""==data.rows[i].faId) {
                        $("input[type='checkbox']")[i + 1].disabled = true;
                    }
                }
            }
        },
        //当用户点击一行时触发，参数包括： rowIndex：被点击行的索引，从 0 开始 ,rowData：被点击行对应的记录
        onClickRow: function(rowIndex, rowData){
            //加载完毕后获取所有的checkbox遍历,单击单选行不可用  
            $("input[type='checkbox']").each(function(index, el){
                //如果当前的复选框不可选，则不让其选中
                if (el.disabled == true) {
                    $("#tt").datagrid('uncheckRow', index - 1);
                }
            });
        },
        //当用户双击一行时触发，参数包括： rowIndex：被点击行的索引，从 0 开始 ,rowData：被点击行对应的记录
        onDblClickRow : function(rowIndex, rowData) {  
            //加载完毕后获取所有的checkbox遍历双击单选行不可用  
            $("input[type='checkbox']").each(function(index, el){
                //如果当前的复选框不可选，则不让其选中
                if (el.disabled == true) {
                    $("#tt").datagrid('uncheckRow', index - 1);
                }
            });

        },
        //当用户勾选全部行时触发
        onCheckAll : function(rows) {  
            var panduan=0;
            $("input[type='checkbox']").each(function(index, el) {
                if(el.disabled== true){
                    $("#tt").datagrid('uncheckRow', index - 1);//此处参考其他人的代码，原代码为unselectRow  
                    panduan++;
                }
            });
            if(panduan>0){
              $("input[type='checkbox']").each(function(index, el) { 
                      if(jishu%2==0){
                          if (el.disabled== true)  $("#tt").datagrid('uncheckRow', index - 1);//此处参考其他人的代码，原代码为unselectRow  
                      } else $("#tt").datagrid('uncheckRow', index - 1);//此处参考其他人的代码，原代码为unselectRow  
                  }); 
              jishu++;  
            } 
        },
        toolbar: [{
            text: '添加', 
            iconCls: 'icon-add', 
            handler: function() { 
                openDialog("add"); 
            } 
        }, '-', { 
            text: '修改', 
            iconCls: 'icon-edit', 
            handler: function() { 
                openDialog("edit"); 
            } 
        }, '-',{ 
            text: '删除', 
            iconCls: 'icon-remove', 
            handler: function(){ 
                openDialog("delete");
            } 
        }], //添加按钮
    });

    //设置分页控件
    var p = $('#tt').datagrid('getPager'); 
    $(p).pagination({
        height:"auto",
           pageSize: 10,//每页显示的记录条数，默认为10 
           pageList: [10,15,25],//可以设置每页记录条数的列表 
           beforePageText: '第',//页数文本框前显示的汉字 
           afterPageText: '页    共 {pages} 页', 
           displayMsg: '当前显示 {from} - {to} 条记ee录   共 {total} 条记录',  
    }); 

    //绑定搜索按钮的按键
    $("#submit_search").click(function () {
            $('#tt').datagrid('reload',form2Json("searchform"));//点击搜索后需要刷新，如果不刷新分页控件就会变成默认的分页控件
    });
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-e0530931f4.css" rel="stylesheet">
                            </div>
        </article>

转自：https://blog.csdn.net/qq_35572020/article/details/54645001