JQuery Easyui/TopJUI表格基本的删除功能（删除当前行和多选删除）

JQuery Easyui/TopJUI表格基本的删除功能（删除当前行和多选删除）

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

posted @ 2019-05-29 18:09 小策一喋 阅读( ...) 评论( ...) 编辑 收藏