• 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

  • 相关阅读:
    如何用Matplotlib绘制三元函数
    总结一下在新工作中都学到了什么?
    Debian MySQL 卸载和安装 PHP安装
    Sphinx的配置和使用
    Python的多继承
    任务分配准则
    Python解析XMl
    什么是序列化,Python中json的load,loads,dump,dumps和pickle的load,loads,dump,dumps的区别
    程序文件路径和目录的操作之BASEDIR目录获取
    模块和包
  • 原文地址:https://www.cnblogs.com/xvpindex/p/10945401.html
Copyright © 2020-2023  润新知