easy-ui中表格中动态添加checkbox，和全选事件和判断选中事件

最新推荐文章于 2024-06-25 17:25:51 发布

原创最新推荐文章于 2024-06-25 17:25:51 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox #框架 #datagrid

web前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍了在EasyUI框架中如何正确使用datagrid和editgrid组件内的Checkbox功能，并提供了实现全选功能及获取选中项的具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格有两个一个是datagrid和editgrid，
1.datagrid中的columns可以写成

{   
    title: '选择',    
    field: 'XUANZE',    
    width: '40',
    align: 'center',
    checkbox：true
}

2.editgrid中checkbox：true不起作用，需这样写

{
    title: '选择',    
    field: 'XUANZE',    
    width: '40',
    align: 'center',
    formatter :function(value,row,index){
        return  '<input type="checkbox" name="JSFkd' + row.JLBH + '" >';
        //使用动态name生成，必须将表格再重新进行一次loadData（加载），否则，生成的checkbox的name值都为“JSFkdundefined” ；遇到不能够重新loadData的，可以将上面的name改为=“JSFkd”+index;,这样每一行的checkbox都对应的name值不一样，可以单独操作管理了。
    }
}

返回一个checkbox选择框，name是根据这一行数据的编号重新生成的。
在页面中添加一个全选事件

function QXButton(){
    var Qrow = $("#FKJSDTableId").datagrid('getRows');
    for(var i=0;i<Qrow.length;i++){
        if(Qrow[i].JLBH && Qrow[i].JLBH!="合计"){

            //jquery对象改成dom对象，所有【0】。使用dom对象的属性checked赋值为true，在这里多说一点，jquery对象转换成dom对象一般情况下jquery为数组对象，【0】就为dom对象，也可以get（index），则get（0）跟【0】一样作用。
            //当然dom对象转成jquery对象，也非常容易加上$()就是jquery对象了
            //传过来的是数组，全选  ，全不选，为false
            $("input[name=JSFkd"+Qrow[i].JLBH+"]")[0].checked=true;   
        }
    }
}

在页面中判断选中的记录

//所有记录
var selected_rows= $("#FKJSDTableId").datagrid('getRows');
//选中记录  判断dom对象的checked属性是不是ture
if($("input[name=JSFkd"+selected_rows[i].JLBH+"]")[0].checked){    
//选中操作
}