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

JQuery Easyui/TopJUI表格基本的删除功能(删除当前行和多选删除)的更多相关文章

  1. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  2. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  3. jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作

    jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作 html <table data-toggle="topjui-datagrid" data-opti ...

  4. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  5. JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...

  6. jQuery EasyUI/TopJUI输入框事件监听

    jQuery EasyUI/TopJUI输入框事件监听 代码如下: <div data-toggle="topjui-panel" title="" da ...

  7. jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!) validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改 ...

  8. jQuery EasyUI/TopJUI创建日期时间输入框

    jQuery EasyUI/TopJUI创建日期时间输入框 日期时间输入框组件 HTML 和日期输入框类似,日期时间输入框允许用户选择日期和指定的时间并按照指定的输出格式显示.相比日期输入框,它在下拉 ...

  9. jQuery EasyUI/TopJUI创建日期输入框

    jQuery EasyUI/TopJUI创建日期输入框 日期时间输入框组件 HTML required:必填字段,默认为false:prompt:显示在输入框的提示性文字:pattern:日期格式 Y ...

随机推荐

  1. Part of defining a topology is specifying for each bolt which streams it should receive as input

    http://storm.apache.org/ [doing for realtime processing what Hadoop did for batch processing ] Apach ...

  2. 在ubuntu16.04上编译android源码【转】

    本文转载自:http://blog.csdn.net/fuchaosz/article/details/51487585 1 前言 经过3天奋战,终于在Ubuntu 16.04上把Android 6. ...

  3. charles抓取线上接口数据替换为本地json格式数据

    最近要做下拉刷新,无奈测试服务器的测试数据太少,没有足够的数据做下拉刷新,所以用charles抓取了测试服务器的接口,然后在伪造了很多数据返回到我的电脑上,下面来说说使用方法: 第一步: 安装FQ软件 ...

  4. TestNG测试用例编写和执行

    编写TestNG用例测试基本上包括以下步骤: 编写业务逻辑 针对业务逻辑中涉及的方法编写测试类,在代码中插入TestNG的注解 直接执行测试类或者添加一个testng.xml文件 运行 TestNG. ...

  5. Android工程的目录结构

    1.最大限度的将不需要出现在Java代码中的文件和代码本身分离开来 2.使用XML标记语言定义UI和数据结构 3.对于工程中的文件存储在工程目录中的那个位置有着严格的规定,在编译过程中Android会 ...

  6. YII好的博客

    http://blog.csdn.net/wzllai/article/details/7659008

  7. MySQL丨分页查询

    直奔主题 一.sql语句:select * from table limit startPageNum,everyPageNum 1)语句解析: table:你要查询的表 startPageNum:从 ...

  8. codeforces 665A A. Buses Between Cities(水题)

    题目链接: A. Buses Between Cities time limit per test 1 second memory limit per test 256 megabytes input ...

  9. 【UVA12779占位】Largest Circle

    几何题,希望有时间回来解决掉.

  10. 在WinDBG中查看调用栈的命令

    命令 ========== k k命令显示的是一定数量的栈帧, 其中帧的数量是由.kframes命令来控制的, 默认值是256. kp 5 显示调用栈中前5个函数以及他们的参数. kb 5 显示调用栈 ...