EasyUI入门2 datagrid复选框全选效果(通过约束条件实现部分项参与的全选效果)

标签: datagrid easyui javascript
2842人阅读 评论(1) 收藏 举报
分类:

需求

datagrid如果有一些项因为约束条件(比如这一项需要显示出来,但是复选框是disable的),那么在点击全选或全否复选框的时候,这些状态是disable的行是不应该被选中的。

无废话直接上代码

<table id="dgMRList" class="easyui-datagrid" style="width:100%;height:auto" data-options="rownumbers: true, 
    singleSelect: false, 
    checkOnSelect:true,
    method: 'get',
    onClickRow : onClickMRRow,
    onDblClickRow : onDblClickMRRow,
    onCheckAll : onCheckAllMR,
    onUncheckAll : onUncheckAllMR">
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"><input type="checkbox" id="ckAll" name="DataGridCheckbox" /></th>
            <th data-options="field:'RSGUID'" hidden="hidden">RSGUID</th>
            <th data-options="field:'项目ID'" hidden="hidden">项目ID</th>
            <th data-options="field:'KSGUID'" hidden="hidden">KSGUID</th>
            <th data-options="field:'请购单号'">请购单号</th>
            <th data-options="field:'请购单名称'">请购单名称</th>
            <th data-options="field:'请购单状态代码'" hidden="hidden">请购单状态代码</th>
            <th data-options="field:'请购单状态描述'">请购单状态描述</th>
            <th data-options="field:'询价状态'">询价状态</th>
        </tr>
    </thead>
</table>
<script type="text/javascript">
    function onClickMRRow(rowIndex, rowData) {
        //根据询价状态值 单击单选行不可用
        if (rowData.询价状态 == "已询价") {
            $('#dgMRList').datagrid('unselectRow', rowIndex);
        } 
    }
    function onDblClickMRRow(rowIndex, rowData) {
        //根据询价状态值 双击单选行不可用
        if (rowData.询价状态 == "已询价") {
            $('#dgMRList').datagrid('unselectRow', rowIndex);
        } 
    }

    //我草这么个破效果还得自己手工写 2017.6.23
    function onCheckAllMR(rows) {
        $("input[name='DataGridCheckbox']").each(function (index, el) {
            if (el.checked == true) {
                el.checked = false;
                $.each(rows, function (i, n) {
                    $("#dgMRList").datagrid('uncheckRow', i);  //此处参考其他人的代码,原代码为unselectRow
                });
            }
            else {
                el.checked = true;
                $.each(rows, function (i, n) {
                    if (n.询价状态 == "已询价") {
                        $("#dgMRList").datagrid('uncheckRow', i);  
                    }
                    else {
                        $("#dgMRList").datagrid('checkRow', i);  
                    }
                });
            }
        });
    }

    function onUncheckAllMR(rows) {
        $("input[name='DataGridCheckbox']").each(function (index, el) {
            if (el.checked == true) {
                el.checked = false;
                $.each(rows, function (i, n) {
                    $("#dgMRList").datagrid('uncheckRow', i);  
                });
            }
        });
    }
</script>

说明

1.以下四个方法都是必须的,不然效果不能完整实现

function onClickMRRow(rowIndex, rowData)
function onDblClickMRRow(rowIndex, rowData)
function onCheckAllMR(rows)
function onUncheckAllMR(rows)

2.解释一下为什么onCheckAllMR需要下面这段if

if (el.checked == true) {
    el.checked = false;
    $.each(rows, function (i, n) {
        $("#dgMRList").datagrid('uncheckRow', i);  //此处参考其他人的代码,原代码为unselectRow
    });
}

因为如果没有这个if的话在选项无disable的时候无bug,但是当有选项为disable的时候,就会出现“取消勾选的时候点第一下全部取消,点第二下的时候没有全部选中,要点第三下才会全部选中”的bug。

3.为什么反选不用$(“#dgMRList”).datagrid(‘uncheckAll’),而要用each遍历一行行地取消

因为uncheckAll方法会触发function onUncheckAllMR(rows) 函数,导致function onUncheckAllMR(rows) 执行两次。

查看评论

easyui datagrid 控件全选

easyui datagrid 控件全选 在datagrid控件中全选功能都是easyUI给做好的,只需要将负责全选的复选框设置下面的这个属性为false属性即可全部选中 singleSelect...
  • wy01272454
  • wy01272454
  • 2017-06-28 09:23:21
  • 1931

EasyUI-DataGrid之批量删除

简单介绍一下,涉及到的几个知识点:      1.checkbox,多选      2.前台到后台传值,我用的是字符串拼接,到了后台在拆分的方式      3.批量删除的底层实现 效果图      ...
  • caozhangyingfei0109
  • caozhangyingfei0109
  • 2015-01-12 12:26:56
  • 14697

easyui datagrid 去掉 全选checkbox

在加载 表格的时候添加事件:onLoadSuccess 在事件中写入下面句,用空代替原有HTML 达到取消效果。 $(".datagrid-header-check").html("")...
  • guo449211721
  • guo449211721
  • 2015-12-02 15:28:51
  • 4202

EasyUI多选,easyui datagrid 分页并保持checkbox选中状态

最近在使用EasyUI制作一个多选的功能,查找了很多资料,有几个说的不是很全,所以就尝试去写,今天终于弄出来了,就把完整的代码 贴出来,部门也是参照前人所说: 第一步:JSP页面 ①在data-opt...
  • u011809238
  • u011809238
  • 2017-04-11 15:38:10
  • 2165

jquery easy ui datagrid 全选、反选、清除

原文 [javascript] view plain copy //全选   function allselectRow(tableName) {  ...
  • u010217750
  • u010217750
  • 2016-12-24 15:47:53
  • 1138

easyui datagrid checkbox初始化某几行disabled时,点击全选还是可以选择 解决办法

$("#body_feetotal").datagrid({ method: "get", pagination: true, ...
  • QQ38397892
  • QQ38397892
  • 2015-05-15 17:22:25
  • 10755

easyui全选、取消所有页

关键代码:全部代码:
  • duqian42707
  • duqian42707
  • 2016-01-14 08:40:56
  • 1629

easyui表格复选框的全选键是否选中

可以根据他的样式,判断他是否选中:var checked=$(".datagrid-header-check").find("input").is(":checked")  值是true和false,...
  • gllstc
  • gllstc
  • 2016-04-27 11:12:24
  • 2737

easyui中checkbox全选全不选的时不处理最后一行的实现

有这样一个需求, easyui加载datagrid后, 最后一行为统计行, 在进行全选全不选的时候会将统计行也一并选择, 这跟业务不相符, 琢磨了半天后终于找到了解决方案 1.首先记录下统计功能的实...
  • m0_37609579
  • m0_37609579
  • 2017-04-01 09:57:12
  • 983

EasyUI DataGrid 复选框

来源:http://www.glphp.com/index.php?m=content&c=index&a=show&catid=36&id=331 如何放置checkbox列。使用checkb...
  • u013214705
  • u013214705
  • 2015-08-17 17:55:56
  • 6415
    个人资料
    持之以恒
    等级:
    访问量: 21万+
    积分: 2196
    排名: 2万+
    最新评论