转自:http://my.oschina.net/fants/blog/77189
项目中又用到easyui 的datagrid做数据展示。功能很强大,很实用,但bug也很多。今天这个就够让人头疼。

如图,现在有个删除功能,选中一行,点击就可以删除。

easyui datagrid 提供了deleteRow方法。可以实现删除。

但还是出问题了。

第一次删除后,就会出现,点击一行,但是界面上选择的却是他上面那一行。百思不得其解。

google,baidu,各种搜索,得到的答案都是删除后,然后reload。重新加载数据。

我不想这样做也不可能用户一删除就要重新加载。并且第二次删除的话,行号也跟着乱的一塌糊涂。

这明显又是easyui的bug,于是开始一步步跟踪调试easyui所谓的开源代码(被混淆过)。

一下午的调试发现,easyui是根据datagrid-row-index和datagrid-row-r1-x-x来定位行的。

但在deleteRow方法中,删掉当前行后,作者只把当前行后面的行的datagrid-row-index更新了。也就是往前提1,弥补被删除行的空缺,但对datagrid-row-r1-x-x却没做任何改动。

这样就会造成下次执行 opts.finder.getTr的时候,获得的row错误,不是自己点击的row。造成上面所提的错误。

于是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
deleteRow: function(target, index) {
    var opts = $.data(target, "datagrid").options;
    var data = $.data(target, "datagrid").data;
    opts.finder.getTr(target, index).remove();
    var gd = $.data(target, "datagrid");
    for (var i = index + 1; i < data.rows.length; i++) {
        opts.finder.getTr(target, i, "body", 2).attr("datagrid-row-index", i - 1)
        .attr("id",gd.rowIdPrefix+"-2-"+(i-1));
        var tr1 = opts.finder.getTr(target, i, "body", 1).attr("datagrid-row-index", i - 1)
        .attr("id",gd.rowIdPrefix+"-1-"+(i-1));
        if (opts.rownumbers) {
            tr1.find("div.datagrid-cell-rownumber").html(i);
        }
    }
    data.total -= 1;
    data.rows.splice(index, 1);
},

这是改进后的代码,第5行是我加的。

1
.attr("id",gd.rowIdPrefix+"-2-"+(i-1));
1
.attr("id",gd.rowIdPrefix+"-1-"+(i-1));

这个两行同时去设置他对应的datagrid-row-rx-x-x

这样两个标识就同步了。

哈哈,看上去多整齐,再看看没修改前:

好,到此这个bug就完美解决了。

easyui datagrid deleteRow(删除行)的BUG!的更多相关文章

  1. easyui datagrid deleteRow(删除行)的BUG

    有时候想临时保存一些数据,等确定好后在批量一次提交,但EasyUI  datagrid 用的时候添加可以正常,如果从中间删除那行号就全乱了.导致删除的时候有可能删除上一行数据. function ad ...

  2. easyui datagrid 遇到的坑 cannot read property ·· pageNum bug and so on

    1 本人刚刚接到一个bug,就是初始化时若设置了datagrid到指定页数,点击下一页显示不对,4 --> ‘4’+1=41的字符串形式,再点击超出页码范围直接到最后一页: 原因:因为 page ...

  3. 学习日记6、easyui datagrid 新增一行,编辑行,结束编辑和删除行操作记录

    1.新增一行并进入编辑状态 var index=$('#Numbers').datagrid('appendRow', { CardInformation: '开户行', CardNumber: '银 ...

  4. jquery easyui DataGrid

    Easyui Demo网站: http://www.jeasyui.com/  英文 http://www.phptogether.com/juidoc/  中文 datagrip的基本属性方法:ht ...

  5. easyui DatagrId 的实例讲解

    下面是代码实现 @{    ViewBag.Title = "人员查找";    ViewBag.LeftWidth = "200px";    ViewBag ...

  6. 关于EasyUI DataGrid行编辑时嵌入时间控件

    本人做一个名为“安徽中控”项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必为每个表写具体的增删 ...

  7. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  8. EasyUI datagrid 行编辑

    一.HTML: <div class="info"> <div class="info_tt"> <span class=&quo ...

  9. easyui datagrid中datetime字段的显示和增删改查问题

    datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...

随机推荐

  1. 5个可用提高Godaddy主机速度的第三方CDN加速服务商

    毕竟Godaddy主机数据中心位于美国.新加坡.欧洲三个数据中心,一般我们都会选择美国数据中心,相比较其他2个机房的速度是快和稳定的,很多人要说为什么新加坡数据中心速度不好呢?因为目前的新加坡机房不是 ...

  2. js-学习方法之3

    熟悉JavaScript每一个方法的作用 这一要求听起来似乎有点不太实际,我想这个要求对于像C#.JAVA这些大型语言来说确实是,因为这些语言类库实在太庞大了,相信没有人可以全面记住它,而且也是没有必 ...

  3. 苹果4S

    港版.4S.白.非翻新机.16G.联通3G移动2G电信2G 1000 美版.4S.白.翻新.16G.联通3G移动2G电信3G 980

  4. notepad 是doc 调出记事本文件

    notepad 是doc 调出记事本文件notepad 是doc 调出记事本文件notepad 是doc 调出记事本文件

  5. 为什么需要异步?why?来看一段代码。

    为什么需要异步?why?来看一段代码. 问题1: for(var i=0;i<100000;i++){ } alert('hello world!!!'); 这段代码的意思是执行100...次后 ...

  6. ggplot2 geom设置—散点图

    散点图也是目前R中的常用的图形之一 geom_point(mapping = NULL, data = NULL, stat = "identity", position = &q ...

  7. 花括号中的json数据--->转为数组array

    //正式服务器 更换航班 public function changef(){ $str = '{"airportTax":50,"arriModifyTime" ...

  8. 如何在网页标题栏title加入logo图标?

    打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的logo图标呢? 方法一(被动式): 制作一个ico格式 ...

  9. Ambari删除服务

    ambari-cassandra-service上面推荐的方法: curl -u admin:$PASSWORD -i -H 'X-Requested-By: ambari' -X PUT -d '{ ...

  10. HDU 1264 Counting Squares(模拟)

    题目链接 Problem Description Your input is a series of rectangles, one per line. Each rectangle is speci ...