最近在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. git使用中checkout生成临时br的问题(吓出一身冷汗啊)

    git中几天前漫不经心的使用了git checkout ver_hash的命令,结果push到远程库都提示everything is up-to-date,实际神马都没提交上去啊!但看本地log中的确 ...

  2. mybatis中#{}与${}的区别

    今天学习了下mybatis的查询,了解到了#{}与${}的区别, 配置文件如下: <?xml version="1.0" encoding="UTF-8" ...

  3. JVM学习--(四)垃圾回收算法

    我们都知道java语言与C语言最大的区别就是内存自动回收,那么JVM是怎么控制内存回收的,这篇文章将介绍JVM垃圾回收的几种算法,从而了解内存回收的基本原理. stop the world 在介绍垃圾 ...

  4. 使用jdk8 stream 统计单词数

    在我的SpringBoot2.0不容错过的新特性 WebFlux响应式编程里面,有同学问如何使用stream统计单词数.这是个好例子,也很典型,在这里补上. 下面的例子实现了从一个文本文件读取(英文) ...

  5. Testng基本问题

    Testng testng.xml suite属性说明: suite verbose="4" 命令行信息打印等级 1~5 parallel 是否多线程并发运行测试:可选值(fals ...

  6. linux下redis单机版搭建

    1.1.什么是redis Redis是用C语言开发的一个开源的高性能键值对(key-value)数据库.它通过提供多种键值数据类型来适应不同场景下的存储需求,目前为止Redis支持的键值数据类型如下: ...

  7. pyspider的一个诡异问题

    其Start_url两次抓取处理失败以后,其之后的所有抓取行为就不正常,似乎根本没有HTTP访问,我把该爬虫的taskdb清空,该爬虫爬取行为恢复正常.这个问题已提交pyspider官方,静待回答.

  8. 用ASP.NET Core 2.0 建立规范的 REST API

    什么是REST REST 是 Representational State Transfer 的缩写. 它是一种架构的风格, 这种风格基于一套预定义的规则, 这些规则描述了网络资源是如何定义和寻址的. ...

  9. 代码生成平台Xxl-Code-Generator

    <代码生成平台Xxl-Code-Generator> 一.简介 1.1 概述 Xxl-Code-Generator 是一个 "controller/service/dao/myb ...

  10. oozie: GC overhead limit exceeded 解决方法

    1.异常表现形式 1)  提示信息      Error java.lang.OutOfMemoryError: GC overhead limit exceeded 2)提示出错      Erro ...