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

    sysctl -a kernel.panic = 0kernel.panic_on_io_nmi = 0kernel.panic_on_oops = 1kernel.panic_on_stackove ...

  2. Delphi的RTTI(许多参考链接)

    RTTI(RunTime Type Information): 运行时类型信息, 就是在程序运行后也能得到类型(譬如 TButton 类)的信息. 这在早期主要用于 IDE 设计时, 譬如把一个 Bu ...

  3. 设置VIM查找时不区分大小写

    :set ic 永久生效 vi ~/.vimrc set ic

  4. 函数----Function对象

    函数---Function对象 一 .  函数的书写 函数 : 就是将一些语句进行封装,然后通过调用的形式,执行这些语句. 函数的作用 : ● 将大量重复的语句写在函数里,以后需要这些语句的时候,可以 ...

  5. Sqoop hive导出到mysql[转]

    通过Sqoop将Hive表数据导入到MySQL通常有两种情况. 第一种是将hive上某张表的全部数据导入到mysql对应的表中. 第二种是将hive上某张表中的部分数据导入到mysql对应的表中. 两 ...

  6. jquery特效(1)—点击展示与隐藏全文

    下班了~~~我把今天整理的一个jquery小特效发一下,个人觉得比较简单,嗖嗖的就写出来了~~~ 下面先来看最终的动态效果: 一.来看一下主体框架程序: <!DOCTYPE html> & ...

  7. python cassandra 创建space table并写入和查询数据

    from cassandra.cluster import Cluster cluster = Cluster(["10.178.209.161"]) session = clus ...

  8. 关于Spring MVC分页

    使用Pageable接口,首先要实例化. 在servlet-context.xml中配置 <annotation-driven> <!-- 分页参数 --> <argum ...

  9. netty学习2

    一.Netty分层设计 Netty 采用了比较典型的三层网络架构进行设计,逻辑架构图如下所示: #第一层,Reactor 通信调度层,它由一系列辅助类完成,包括 Reactor 线程 NioEvent ...

  10. hibernate 中的拦截器EmptyInterceptor接口功能

    Interceptor接口提供了从会话(session)回调(callback)应用程序(application)的机制, 这种回调机制可以允许应用程序在持久化对象被保存.更新.删除或是加载之前,检查 ...