当前位置：首页 > news >正文

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

news 2026/7/12 11:28:14

下面直接给你最常用、最好用的两种方法，复制粘贴就能在你的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');}});