需求:数据表格datagrid实现删除当前行和多选删除的功能。
html
<a href="javascript:void(0)" data-toggle="topjui-menubutton" data-options=" btnCls:'topjui-btn-red', onClick:delRow, iconCls:'fa fa-close'">删除</a>
js
var dg = '#productDg' ;//TODO 表格的id选择器 function delRow() { var rows = $(dg).iDatagrid('getChecked'); //getChecked 在复选框被选中的时候返回所有行。 if(rows.length == 0){ return $.iMessager.alert('操作提示', '未勾选需要删除的数据行!', 'messager-error'); // 未勾选的话弹出消息窗口 } $.iMessager.confirm('确认','您确认想要删除这'+rows.length+'条记录吗?',function(r){ if (r){ var index = undefined; $.each(rows,function (i) { index = $(dg).iDatagrid('getRowIndex',rows[i]); //getRowIndex 返回指定行的索引号,该行的参数可以是一行记录或一个ID字段值。 if (editIndex == undefined){ $(dg).iDatagrid('deleteRow', index) //deleteRow 删除行。 }else if(editIndex == index ){ $(dg).iDatagrid('cancelEdit', editIndex).iDatagrid('deleteRow', editIndex); editIndex = undefined; }else{ $(dg).iDatagrid('deleteRow', index) } }); } }); if (editIndex == undefined){return} }
具体的实现代码用了topjui已经封装好了的方法,直接调用就行了,使用非常方便。
EasyUI中文网:http://www.jeasyui.cn
TopJUI前端框架:http://www.topjui.com
TopJUI交流社区:http://ask.topjui.com