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

上一篇:CCF CSP认证mine历年解题记录


下一篇:Unity Shader : Ghost(残影) v1