需求:数据表格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. Java类加载器(死磕5)

    Java类加载器(  CLassLoader )  死磕5:  自定义一个文件系统classLoader 本小节目录 5.1. 自定义类加载器的基本流程 5.2. 入门案例:自定义文件系统类加载器 5 ...

  2. The JSP specification requires that an attribute name is preceded by whitespace--异常

    异常信息:org.apache.jasper.JasperException: /pages/selectedCourse.jsp (line: 4, column: 39) The JSP spec ...

  3. java之插入排序

    //插入排序(Insertion Sorting)的基本思想是:把n个待排序的元素看成为一个有序表和一个无序表,开始有序表只包含一个元素,无序表中包含有n-1个元素,排序过程中每次从无序表中取出第一个 ...

  4. [Java SE] 字符串连接

    Java 支持多种字符串连接方式,总结如下: package cn.spads.tool.string; import java.text.MessageFormat; /** * <b> ...

  5. Jquery Plugin模版

    1. [代码][JavaScript]代码 01// remember to change every instance of "pluginName" to the name o ...

  6. JavaScript Objects in Detail

    JavaScript’s core—most often used and most fundamental—data type is the Object data type. JavaScript ...

  7. css 鼠标移入边框填充效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. codevs 1147 排座椅

    传送门 题目描述 上课的时候总会有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只有有限的D对同学上课时会交头接 ...

  9. MongoDB 复制集节点增加移除及节点属性配置

    复制集(replica Set)或者副本集是MongoDB的核心高可用特性之一,它基于主节点的oplog日志持续传送到辅助节点,并重放得以实现主从节点一致.再结合心跳机制,当感知到主节点不可访问或宕机 ...

  10. yolo原理学习

    1.[yolov1]    第一步:将图像划分为S*S的栅格(grid cell),这里分成了7*7的grid cell.栅格的任务是:检测中心落在该栅格中的物体(注意,栅格中心未必与物体的中心重合, ...