• 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

  • 相关阅读:
    7月18日实习日志
    第二周总结
    7月15日实习日志
    7月14日实习日志
    7月13日实习日志
    7月12日实习日志
    7月11日实习日志
    第一周总结
    7月8日实习日志
    小飞机工作笔记(一)方案简述
  • 原文地址:https://www.cnblogs.com/xvpindex/p/10945401.html
Copyright © 2020-2023  润新知