【转】jquery-easyui中datagrid的单击删除此行
最近在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的单击删除此行的更多相关文章
- JQuery EasyUI中datagrid的使用
在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...
- 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
- 给Jquery easyui 的datagrid 每行增加操作链接(转)
http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyU ...
- JQuery EasyUI的datagrid的使用方式总结
JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...
- Jquery EasyUI中treegrid
Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲 最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...
- EasyUI中datagrid的基本用法
EasyUI中datagrid是最常用的一个控件了,现在整理一下datagrid的基本语法,先展示下页面效果吧,如下图
- EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性
EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...
- jquery easyUI中combobox的使用总结
jquery easyUI中combobox的使用总结 一.如何让jquery-easyui的combobox像select那样不可编辑?为combobox添加editable属性 设置为false ...
- 求助关于jquery easyUI中的treegrid组件,请各位帮忙给个思路,谢谢啦
现在项目中用到jquery easyUI中的treegrid组件,已经可以正常显示了.但是在保存的时候遇到问题,页面上参照官网的例子可以在页面更新,但是怎么获取编辑后的数据进而保存到数据库呢?
随机推荐
- html5中的网页结构
一.html5中的大纲 在html5中,使用各种结构元素所描述出来的整个网页的层次结构,就是该网页的大纲.因此在组织这份大纲的时候,不能使用div元素,因为div元素只能当做容器,用在需要对网页中某个 ...
- Odoo 学习 【二】Environment 概览
Environment 参考链接: http://odoo-new-api-guide-line.readthedocs.io/en/latest/environment.html#environme ...
- AngularJs 学习笔记(四)服务
模型是指$scope上保存的包含瞬时状态数据的JavaScript对象. 服务是一个单例对象,只会被$injector实例化一次,并且是在需要的时候才会被创建,服务提供了把与特定功能相关联的方法集中在 ...
- FFPLAY的原理(六)
显示视频 这就是我们的视频线程.现在我们看过了几乎所有的线程除了一个--记得我们调用schedule_refresh()函数吗?让我们看一下实际中是如何做的: static void schedule ...
- Mac 下实现 pyenv/virtualenv 与 Anaconda 的兼容
http://blog.csdn.net/vencent7/article/details/76849849 自己一直用的 pyenv 和 pyenv-virtualenv 管理不同的 python ...
- 从JavaWeb危险字符过滤浅谈ESAPI使用
事先声明:只是浅谈,我也之用了这个组件的一点点. 又到某重要XX时期(但愿此文给面临此需求的同仁有所帮助),某Web应用第一次面临安全加固要求,AppScan的安全测试报告还是很清爽的,内容全面,提示 ...
- MognoDB3.4.2用户访问配置管理
说在前面,官方文档似乎略有瑕疵. 说一下大规则:把绑定IP换成127.0.0.1IP之后,把security的authorization关闭掉做用户添加操作. 添加用户的方法必须是createUser ...
- windows + maven + eclipse
一处教程:http://www.yiibai.com/maven/maven_overview.html Maven中央仓库信息速查:http://maven.outofmemory.cn/ ...
- c# 事件和EventManager
事件 基本用法 关键字event,声明格式为: public event <委托类型> <事件对象> 事件的处理方法:适用于该委托的方法 数据的触发: 绑定同类事件,绑定时,可 ...
- 洛谷 P1057 解题报告
P1057 传球游戏 题目描述 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:n个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹 ...