需求:数据表格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