关闭

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

标签: datagrideasyuijavascript
1812人阅读 评论(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) 执行两次。

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

easyui datagrid 控件全选

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

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

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

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

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

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

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

easyui全选、取消所有页

关键代码:全部代码: <
  • duqian42707
  • duqian42707
  • 2016-01-14 08:40
  • 1385

DataGrid中的全选和单选的功能

在WPF中DataGrid和CheckBox的联合使用是非常常见的,但是在DataGrid中怎 么实现全选和部分选择的功能并没有现成的控件去使用。要想实现该功能,必须人工通 过代码来完成。关于实现...
  • u010375663
  • u010375663
  • 2015-11-28 10:20
  • 1983

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
  • 5433

Easyui datagrid 取消选择行

Easyui datagrid 取消选择行: //取消选择行 $('#dg_id').datagrid('clearSelections');
  • heyangyi_19940703
  • heyangyi_19940703
  • 2016-09-07 11:35
  • 9930

WPF-DataGrid中CheckBox实现全选与非全选

  • 2014-10-27 15:36
  • 2KB
  • 下载

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

原文 [javascript] view plain copy //全选   function allselectRow(tableName) {  ...
  • u010217750
  • u010217750
  • 2016-12-24 15:47
  • 625
    个人资料
    • 访问:195359次
    • 积分:2030
    • 等级:
    • 排名:千里之外
    • 原创:65篇
    • 转载:23篇
    • 译文:1篇
    • 评论:121条
    文章分类
    最新评论