jQuery EasyUI 数据网格 – 添加复选框

下面直接给你最常用、最好用的两种方法，复制粘贴就能在你的jQuery EasyUI datagrid里加上复选框（选中一行、批量删除、批量操作全都有），马上就能用

方法1：最简单 3秒搞定（推荐你现在就用这个）

<table id="dg" class="easyui-datagrid"  
    data-options="  
        url: '你的接口地址.json',  
        fitColumns:true,  
        singleSelect:false,  
        rownumbers:true,  
        toolbar:'#tb',  
        columns:[[  
            {field:'ck', checkbox:true},          // 这一行就是复选框！  
            {field:'id',title:'编号',width:60},  
            {field:'name',title:'姓名',width:100},  
            {field:'age',title:'年龄',width:60}  
        ]]  
    "></table>  

<div id="tb">  
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="delSelected()">批量删除</a>  
</div>  

<script>  
function delSelected(){  
    var rows = $('#dg').datagrid('getChecked');  // 直接得到所有勾选的行  
    if(rows.length==0){  
        $.messager.alert('提示','请先勾选要删除的行！');  
        return;  
    }  

    var ids = [];  
    $.each(rows,function(i,row){  
        ids.push(row.id);  
    });  

    $.messager.confirm('确认','确定删除这 '+rows.length+' 条记录吗？',function(r){  
        if(r){  
            // 发请求删除  
            $.post('delete.php',{ids:ids.join(',')},function(result){  
                if(result.success){  
                    $('#dg').datagrid('reload');  
                    $.messager.show({title:'成功',msg:'已删除'+rows.length+'条'});  
                }  
            },'json');  
        }  
    });  
}  
</script>

方法2：想让复选框默认全选、表头也能点（领导最喜欢这种）

$('#dg').datagrid({  
    columns:[[  
        {field:'ck', checkbox:true, width:30, halign:'center', align:'center'},  
        {field:'id',title:'编号'},  
        // 其他列...  
    ]],  
    onLoadSuccess:function(){  
        // 表格加载完自动全选  
        $(this).datagrid('checkAll');  
    },  
    onHeaderContextMenu:function(e,field){  
        // 右键表头可以全选/全不选（加这个更专业）  
        e.preventDefault();  
        var cm = $('<div/>').appendTo('body');  
        $('<div iconCls="icon-ok">全选</div>').appendTo(cm).click(function(){$('#dg').datagrid('checkAll')});  
        $('<div>全不选</div>').appendTo(cm).click(function(){$('#dg').datagrid('uncheckAll')});  
        cm.menu('show',{left:e.pageX,top:e.pageY});  
        cm.menu('destroy');  
    }  
});

你现在直接复制上面第一种方法到你的页面，3秒就能看到复选框出来了
再把批量删除按钮加进去，领导明天就要验收的页面就完美了

想要我直接给你完整的html文件（包含增删改查+复选框）？
或者你告诉我你现在用的datagrid是远程加载还是本地数据？我2分钟发你对应的完整代码（复制粘贴就能跑）

快告诉我你现在卡在哪一步，我手把手带你加上去，5分钟内一定看到复选框！