easyui：datagrid中的checkbox的实现

最新推荐文章于 2025-01-17 11:43:30 发布

原创最新推荐文章于 2025-01-17 11:43:30 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

easyui

1 篇文章

订阅专栏

本文介绍了如何在EasyUI的datagrid中实现checkbox的状态控制，通过后台传来的1/0数据来决定checkbox是否选中。通过添加formatter函数和使用三元运算符，可以轻松创建对应状态的checkbox。然而，这导致了全选功能失效。为解决这个问题，文章提出了一种方案：在表头添加一个自定义的checkbox，并绑定函数，当该checkbox被选中时，调用预设的getAll函数来实现所有行的全选操作。

        $("#tb_sysAttr").datagrid({
            columns:[[
                {field:'read',title:'可读'，width:150,align:'center',
                    formatter: function(value){
                        return (value==1)? '': '';
                    }
                },
                {field:'write',title:'可写',width:250,align:'center',
                    formatter: function(value){
                        return (value==1)? '': '';
                    }}
            ]]
        })

上面是完整js代码，我后台传来的数据是 1/0，为1时，checkbox勾选，为0时，不勾选。

要达到我们设想的效果，只需要加一个formatter即可，再用一个?: ，生成指定状态的checkbox即可。

不过此时，你会发现，全选并不好用：

解决方案如此：（来自于M同学）

利用title属性，在表头加上一个我们自己的checkbox。

当它勾选上时，触发我们预设的getAll函数函数，把其所在列全部勾选。

{field:'read',title:'可读:',checkbox:false,width:150,align:'center',

    formatter: function(value){
        return (value==1)? '': '';
    }
},

/*权限设置中 全选的实现*/
function getall(This) {
    var rows = $("#tb_sysAttr").datagrid('getRows');
    var id=document.getElementById(This.id);
    console.log(id.checked);
    if(id.checked) {
        for (var a = 0; rows[a]!=null; a++)
            if(This.id=="read_a")
                rows[a].read = 1; //获取指定列
            else
                rows[a].write=1;
    }
    else {
        for (var a = 0; rows[a]!=null; a++)
            if(This.id=="read_a")
                rows[a].read = 0; //获取指定列
            else
                rows[a].write=0;
    }
    $("#tb_sysAttr").datagrid('loadData',rows);
    console.log(rows);
}