下面直接给你最常用、最好用的两种方法,复制粘贴就能在你的jQuery EasyUI datagrid里加上复选框(选中一行、批量删除、批量操作全都有),马上就能用
方法1:最简单 3秒搞定(推荐你现在就用这个)
<tableid="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><divid="tb"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-remove"plain="true"onclick="delSelected()">批量删除</a></div><script>functiondelSelected(){varrows=$('#dg').datagrid('getChecked');// 直接得到所有勾选的行if(rows.length==0){$.messager.alert('提示','请先勾选要删除的行!');return;}varids=[];$.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();varcm=$('<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分钟内一定看到复选框!