最近在easyui的项目开发,easyui封装了许多方法,用起来很方便,但同时也遇到了不少的问题。

如果在datagrid中直接将index传给easyui自带的deletRow方法来删除当前点击行,一开始并没有问题,但是当连续删除的时候就或出问题了。

原因是datagrid行是根据datagrid-row-index和datagrid-row-r1-x-x来定位行的,如果一开始就将该行的index作为参数传给deleteRow方法,每行的index是固定了的,其他行的index并不会随着删除某一行而改变掉。所以在连续删除中,可能会出现,当删除了一行以后,点击了第二行的删除按钮,删除的确实第三行这种情况。

这两天也能看了一些解决办法,但都觉得稍有复杂,偶然间看到的一个解决办法,现贴出来一起分享:

HTML:

<table id="dg" class="easyui-datagrid" title=""></table>

JS:

$(function() {
$('#dg').datagrid().datagrid('enableCellEditing'); $('#dg').datagrid({
rownumbers: true,
multipleSelect:true,
collapsible: false,
pagination: true,
url: 'datagrid/dg.json',
method: 'get',
columns: [
[{
field: 'ck',
checkbox: true
}, {
field: 'name',
title: '姓名'
}, {
field: 'tel',
title: '手机号码'
}, {
field: 'operate',
title: '操作',
formatter: function(val, row, index) {return '<a href="javascript:void(0);" onclick="deleteRow(this)"><i class="fa fa-trash-o" aria-hidden="true" style="color:#b8203d;font-size:2rem;"></i></a>';
}
}]
]
})
});

function getRowIndex(target) {
  var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}


function deleteRow(target) {
  alert(getRowIndex(target));
  $('#membershipCardData1').datagrid('deleteRow', getRowIndex(target));
}

 

【转】jquery-easyui中datagrid的单击删除此行的更多相关文章

  1. JQuery EasyUI中datagrid的使用

    在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...

  2. 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  3. 给Jquery easyui 的datagrid 每行增加操作链接(转)

    http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyU ...

  4. JQuery EasyUI的datagrid的使用方式总结

    JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...

  5. Jquery EasyUI中treegrid

    Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲   最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...

  6. EasyUI中datagrid的基本用法

    EasyUI中datagrid是最常用的一个控件了,现在整理一下datagrid的基本语法,先展示下页面效果吧,如下图

  7. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  8. jquery easyUI中combobox的使用总结

    jquery easyUI中combobox的使用总结 一.如何让jquery-easyui的combobox像select那样不可编辑?为combobox添加editable属性 设置为false ...

  9. 求助关于jquery easyUI中的treegrid组件,请各位帮忙给个思路,谢谢啦

    现在项目中用到jquery easyUI中的treegrid组件,已经可以正常显示了.但是在保存的时候遇到问题,页面上参照官网的例子可以在页面更新,但是怎么获取编辑后的数据进而保存到数据库呢?

随机推荐

  1. ios的位置和方向(来自苹果官方文档,仅供简单参考)

    取得用户的当前位置 Core Location框架使您可以定位设备的当前位置,并将这个信息应用到程序中.该框架利用设备内置的硬件,在已有信号的基础上通过三角测量得到固定位置,然后将它报告给您的代码.在 ...

  2. gcc或clang中消除特定警告的方法

    一般在编译代码时会有相当多的警告信息,尤其当我们使用了-Wall选项的时候.-Wall绝不是像其字面意思一样打开所有警告.不过它打开的警告也相当多了.对于一些我们已知"无害"但仍然 ...

  3. c语言 基本运算

    计算机的基本能力就是计算,所以一门程序设计语言的计算能力是非常重要的.C语言之所以无所不能,是因为它不仅有丰富的数据类型,还有强大的计算能力.C语言一共有34种运算符,包括了常见的加减乘除运算.这讲就 ...

  4. 深入了解Map

    联系 Java中的Map类似于OC的Dictionary,都是一个个键值对组成,一键对应一值.我在之前的文章中讲解过Set,其实在JAVA底层Set依赖的也是Map,那我们都知道,Set是单列的(只有 ...

  5. rsync+innotify做到同步式更新

    innotify主要功能: 他是内核用于通知用户控件程序文件系统变化的机制. 也就是说,当服务器发生了任何的改动,内核都会知道并通知用户. rssync(做同步的)+innotify做到的就是实时的同 ...

  6. 与班尼特·胡迪一起拿奖学金(HZNU-2273)

    与班尼特·胡迪一起拿奖学金 AC Time Limit:  2 s      Memory Limit:   256 MB Description 班尼特·胡迪这学期的体测终于上80分了,当期末考试的 ...

  7. Angular5 宏观把控

    1.首先,Angular5相对于Angular4有了一些新的特性: (1)i18n国际化管道: (2)一个组件可以以多个名称导出: (3)使用httpClient: 相比于http,httpClien ...

  8. LeeCode数组第15题三数之和

    题目:三数之和 内容: 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中 ...

  9. Java多线程:生命周期,实现与调度

    Java线程生命周期 Java线程实现方法 继承Thread类,重写run()方法 实现Runnable接口,便于继承其他类 Callable类替换Runnable类,实现返回值 Future接口对任 ...

  10. Spring系列(三):Spring IoC中各个注解的理解和使用

    原文链接:1. http://www.cnblogs.com/xdp-gacl/p/3495887.html       2. http://www.cnblogs.com/xiaoxi/p/5935 ...