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

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

二:页面效果图代码:

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' onclick=\"delAppInfoReady('1','"+row.id+"')\">删除</a>&nbsp;&nbsp;<a href='javascript:void(0);' class='editcls' onclick=\"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"));//点击搜索后需要刷新,如果不刷新分页控件就会变成默认的分页控件
    });
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值