easyui datagrid没有ID情况下,easyui datagrid 删除行信息方法

在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:

 1 $(function() {
 2                 $(‘#dg‘).datagrid().datagrid(‘enableCellEditing‘);//首行复选框
 3
 4                 $(‘#dg‘).datagrid({
 5                     rownumbers: true,
 6                     multipleSelect:true,
 7                     collapsible: false,
 8                     pagination: true,
 9                     url: ‘datagrid/dg.json‘,
10                     method: ‘get‘,
11                     columns: [
12                         [{
13                             field: ‘ck‘,
14                             checkbox: true
15                         }, {
16                             field: ‘name‘,
17                             title: ‘姓名‘
18                         }, {
19                             field: ‘tel‘,
20                             title: ‘手机号码‘
21                         }, {
22                             field: ‘operate‘,
23                             title: ‘操作‘,
24                             formatter: function(val, row, index) {return ‘<button href="#" onclick="deleteRow(this)"></button>‘;
25                             }
26                         }]
27                     ]
28                 })
29             });
30
31
32
33 function getRowIndex(target) {
34           var tr = $(target).closest(‘tr.datagrid-row‘);35
36           return parseInt(tr.attr(‘datagrid-row-index‘));
37             }
38
39  function deleteRow(target) {
40            alert(getRowIndex(target));
41                           $(‘#membershipCardData1‘).datagrid(‘deleteRow‘, getRowIndex(target));
42             }

转载地址:https://www.cnblogs.com/MinhongShen/p/7551717.html

原文地址:https://www.cnblogs.com/Dumb-dog/p/11539830.html

时间: 2024-10-10 22:31:56

easyui datagrid没有ID情况下,easyui datagrid 删除行信息方法的相关文章

easyui日期在未加载easyui-lang-zh_CN.js出现英文的情况下加载中文的方法

我们有时候在操作easyui的时候本来是加载了easyui-lang-zh_CN.js中文文件包,但是还是出现了英文.使得我们不得埋怨这框架咋这么不好用,其实我们仔细看看这个中文包就会发现里面很多都是重新修改了定义语言的参数.假如我们用jquery初始化加载方法$(function(){//这里是我们自定义的操作方法});这个方法里面的东西执行后发现更本没加载我们的中文下面是我写的datetimebox日期控件js代码: $(function () { function adddaytimes(

数据库有百万数据量的情况下,分页查询的方法及其优化方式

当需要从数据库查询的表有上万条记录的时候,一次性查询所有结果会变得很慢,特别是随着数据量的增加特别明显,这时需要使用分页查询.对于数据库分页查询,也有很多种方法和优化的点. 下面简单说一下我知道的一些方法. 准备工作 为了对下面列举的一些优化进行测试,下面针对已有的一张表进行说明. 表名:order_history 描述:某个业务的订单历史表 主要字段:unsigned int id,tinyint(4) int type 字段情况:该表一共37个字段,不包含text等大型数据,最大为varch

不使用jquery情况下循环添加绑定事件方法

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .page{border: 1px red solid;} 8 .up{width:300px;height:50px;} 9 .a{width:90px;height:5

条件查询N多的情况下,回显解决方法。

条件查询每个web程序员一定都写过,关于条件回显值页面的思路很简单,将页面的值传到后台,放置request作用域,然后回显至页面. 如果几个条件还好些,如果是下面这种情况呢? 如果条件像以上情况N多情况,你还会采用页面->后台->页面这种方式回显吗?很显然这样做很费事. 那么问题就来了,应该怎样去做? 个人给出的建议是条件查询的div和列表的div分开, 然后将带有数据信息的列表在带有条件的 页面 通过jquery的load()方法load进来.

不同情况下元素局中的方法

一.居中元素定宽定高情况 .fu{ width: 500px; height: 500px; border:1px solid #000; } .kuangao{ width: 100px; height: 50px; background-color: red; } <div class="fu"> <div class="kuangao"></div> </div> 1.水平局中: 方法一: 利用自动外边距 .ku

共享内存的情况下,出现的高并发异常

package thread; public class TestShareMemory { static String shareM = ""; static void alter(String tmp){ shareM = tmp; } static class GThread extends Thread { public void run() { for (int i = 1; i < 2222122; i++){ alter("GThread");

SYSAUX表空间占用过大情况下的处理(AWR信息过多)

真题1.  SYSTEM和SYSAUX表空间存储的内容有哪些区别?若SYSAUX表空间占用过大则应该如何处理? 答案:在一般情况下,企业产生的业务数据应该存放在单独的数据表空间,而不应该使用系统已存在的表空间,尤其不能将业务数据保存到SYSTEM和SYSAUX表空间中,所以,DBA需要着重关注SYSTEM和SYSAUX表空间的占用情况. Oracle服务器使用SYSTEM表空间管理整个数据库.这个表空间包含系统的数据字典和关于数据库的管理信息,这些信息均包含在SYS方案中,只有SYS用户或者拥有

.net MVC模式下easyui datagrid控件分页

此参照一位仁兄代码,稍作修改 视图代码: <div id="tab" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:800px;height:400px"> <div title="****" style="padding:0px;"> <div class="

第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的使用方法,这个组件 依赖于 Combo(自定义下拉框)和 DataGrid(数据表格)组件. 一.加载方式 class 加载方式 <select id="box" class="easyui-combogrid" name="dept" sty