最近在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原声二维码条形码扫描实现

    本文讲述如何用系统自带的东东实现二维码扫描的功能:点击当前页面的某个按钮,创建扫描VIEW.细心的小伙伴可以发现 title被改变了,返回按钮被隐藏了.这个代码自己写就行了,与本文关系不大...绿色的 ...

  2. LeetCode(40)-Merge Sorted Array

    听到初爱有感 开头啰嗦两句,刚在做算法题目的时候,听到了杨宗纬的<初爱>,突然有了一种本科时候的感觉,想想自己现在研二了,青春喂了狗,我果断喝了一罐啤酒,循环这首歌到吐-.. 题目: Gi ...

  3. sql语句——根据身份证号判断男女

    根据身份证判断男女的规则:二代身份证为18位,判断倒数第二位,第二位若为奇数,性别为男:偶数则为女 一代身份证为15为,判断倒数第一位,规则同上. update 表名 set 表名.字段名= case ...

  4. SpringBoot2.0之二 新建RESTfull风格项目

    1.新建一个Maven项目(具体方法可以参照 SpringBoot之一) 2.先建一个User类 package com.somta.springboot.pojo; public class Use ...

  5. VS2010断点调试技巧

    设置断点:在如下图中的红色圆点处设置断点,红色圆点表示已经在这行设置断点.快捷键F9.   启动调试:按F5或者点击左边红框中的按钮.右边框是开始执行(不调试)Ctrl+F5. 调试工具栏:下面是工具 ...

  6. div学习之div中dl-dt-dd的详解

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  7. Python中urllib.urlencode中文字符的一个问题

    Django项目在访问Restful service时调用urllib.urlencode编码中文字符串时碰到下面这个错误. v = quote_plus(str(v)) UnicodeEncodeE ...

  8. FPGA图像处理之行缓存(linebuffer)的设计一

    FPGA图像处理之行缓存(linebuffer)的设计一 作者:OpenS_Lee 1 背景知识 在FPGA数字图像处理中,行缓存的使用非常频繁,例如我们需要图像矩阵操作的时候就需要进行缓存,例如图像 ...

  9. python flask中的代码约定

    在Python社区中有许多关于代码风格的约定.如果你写过一段时间Python了,那么也许对此已经有些了解. 我会简单介绍一下,同时给你一些URL链接,从中你可以找到关于这个话题的详细信息. 让我们提出 ...

  10. Hi,这有一份风控体系建设干货

    互联网.移动互联网.云计算.大数据.人工智能.物联网.区块链等技术已经在人类经济生活中扮演越来越重要的角色,技术给人类带来各种便利的同时,很多企业也饱受"硬币"另一面的伤害,并且形 ...