需求:数据表格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. Javascript的参数详解

    函数可以有参数也可以没有参数,如果定义了参数,在调用函数的时候没有传值,默认设置为undefined 在调用函数时如果传递参数超过了定义时参数,jS会忽略掉多余参数 jS中不能直接写默认值,可以通过a ...

  2. 时间操作(Java版)—获取给定日期N天后的日期

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/34896777         获取给定 ...

  3. jquery DataTables表格插件的使用(网页数据表格化及分页显示)

    DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用Data ...

  4. STM32 ~ STM32 TIM重映射

    复用功能 没有重映射 部分重映射 完全重映射 TIM3_CH1 PA6 PB4 PC6 CH2 PA7 PB5 PC7 CH3 PB0 PB0 PC8 CH4 PB1 PB1 PC9 /**重映射 t ...

  5. linux LVM:物理卷逻辑卷

    逻辑卷管理器,当分区不够用的时候,可以新建一个更大的分区再复制进去,但是浪费时间.Lvm可以弹性调整分区大小,可以动态组合分区.分区大小固定了就无法调整, apt-get update & a ...

  6. 关于Javascript中声明变量、函数的笔记

    一.概念 1.变量声明 在JavaScript中,变量一般通过var关键字(隐式声明,let关键字声明除外)进行声明,如下通过var关键字声明a,b,c三个变量(并给其中的a赋值): var a=1, ...

  7. html5--5-4 绘制矩形

    html5--5-4 绘制矩形 学习要点 掌握绘制矩形的方法:strkeRect()/fillRect() 掌握绘制路径的 beginPath()和closePath() 矩形的绘制方法 rect(x ...

  8. Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction definition.

  9. 洛谷 1082 同余方程——exgcd(水题)

    题目:https://www.luogu.org/problemnew/show/P1082 大水题. #include<iostream> #include<cstdio> ...

  10. bzoj 3527 [Zjoi2014] 力 —— FFT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3527 看了看TJ才推出来式子,还是不够熟练啊: TJ:https://blog.csdn.n ...