EasyUi datagrid 单选框选中事件
Easyui datagrid中的单选框默认是这样定义的
columns: [[
{ field: 'CK', title: '', checkbox: true, width: 30 }]]。
平常使用没什么问题,但今天下等我要获取单框选中事件时,出了点问题。
因为这个checkbox是独立于行的,所以单击这个checkbox时,不会触发Easyui datagrid的onClickRow事件。
用户在单选框上打了勾,最后却被告知没有行选中,这不是Bug吗?
这是我们码农绝对不能忍受的,于是乎,对EasyUi datagrid的改造开始了。
首先,我重新定义checkbox,代码如下:
columns: [[
{ field: 'checked', title: 'Choice', width: 30,
formatter: function(value, row, index) {
return '<input type="checkbox" name="DataGridCheckbox">';
}}]]
这下子,checkbox与行成为一体了,单击checkbox时,行会选中,但新问题来了,单选行时,checkbox并不会选中。
于是,继续改造。
在onClickRow事件中我定义,行选中,对应的CheckBox也要被选中。
代码如下:
onClickRow: function(index, data) {
var row = $('#UserList').datagrid('getSelected');
$('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", true);
}
这样,行被选中了,但单击其它行中,原来的行的CheckBox继续保持被选中,并没有被取消,这与期望不符呀。
于是,我继续改造,这次改造的目标,就是单击哪行,哪行及它的CheckBox被选中,其他的不被选中。
代码如下:
onClickRow: function(index, data) {
//将所有checkbox修改为未选中
$('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox'] ").attr("checked", false);
//将这次的checkbox标记为选中
$('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", true);
}
到这个时候,还有其它问题,比如说:第一次单击的时候是选中,第二次,我希望能取消选中。
于是代码继续改造。改造完成之后的代码如下:
var selectIndex = "";
function UserListLoad() {
var customerNo = $('#txtCustomerNo').val();
var customerName = $('#txtCustomerName').val();
var country = $('#txtCountry').val(); $('#UserList').datagrid({
url: '/ForLog/OrderReport/GetSapUserList',
queryParams: { customerNo: customerNo, customerName: customerName, country: country },
pagination: true,
pageSize: 15,
singleSelect: true,
showPageList: false,
pageList: [5, 15, 15],
rownumbers: true,
nowrap: false,
loadMsg: 'Load……',
columns: [[
{ field: 'checked', title: 'Choice', width: 30,
formatter: function(value, row, index) {
return '<input type="checkbox" name="DataGridCheckbox">';
}
},
{ field: 'NO', title: 'Customer Order No.', width: 150 },
{ field: 'NAME', title: 'Customer', width: 200 },
{ field: 'COUNTRY', title: 'Country', width: 200 }
]],
onClickRow: function(index, data) {
var row = $('#UserList').datagrid('getSelected');
if (index == selectIndex) {
//第一次单击选中,第二次单击取消选中
$('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", false);
$('#UserList').datagrid('clearSelections');
} var isCheck = $('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked"); if (isCheck) {
//将所有checkbox修改为未选中
$('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox'] ").attr("checked", false);
//将这次的checkbox标记为选中
$('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", true);
}
else {
if (index == selectIndex) {
$('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", false);
}
else {
//将所有checkbox修改为未选中
$('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox'] ").attr("checked", false);
//将这次的checkbox标记为选中
$('#UserList').datagrid("getPanel").find(".datagrid-view2 .datagrid-body table input[type='checkbox']:eq(" + index + ") ").attr("checked", true);
}
}
selectIndex = index;
}
});
到此,目标基本达成,效果如下图所示。
聪明的你,是否发现,这里其实还有一个问题的,就是当对某一行单击三次及三次以上,选中和非选中的切换是有问题的。
不过,我并不打算在这里解决了,有兴趣可以自己试试,必竟自己解决问题的那种喜悦和成就感是其他事情无法替代的。
EasyUi datagrid 单选框选中事件的更多相关文章
- layui 单选框选中事件
<div class="layui-form-item" pane=""> <label class="layui-form-lab ...
- easyui datagrid 单选框 效果
columns: [[{ field: 'oid', title: '选择', width: 20, forma ...
- easyUI datagrid中checkbox选中事件以及行点击事件,翻页之后还可以选中
DataGrid其中与选择,勾选相关 DataGrid属性:singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行选 ...
- Jquery监控audio单选框选中事件(实际通过click)
$('input:radio[name="pathType"]').click(function(){ var checkValue = $('input:radio[name=& ...
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- jquery 根据后台传过来的值动态设置下拉框、单选框选中
更多内容推荐微信公众号,欢迎关注: jquery 根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...
- 判断单选框选中不成功,$("#xx").attr("checked")undefined
判断单选框选中状态,各种都不行,受到https://www.cnblogs.com/yxwkf/p/4853014.html 的启发,相关引用: 原来.在jquery1.6版本号便对此做出了改动: [ ...
- EasyUI DataGrid单选如何取消选中
EasyUI DataGrid在多选时,选中某行,可以取消:而在单选时,并不能取消选中某一行. 可以通过修改源码来完成. 在其源码中找到 opts.singleSelect==true 将代码做如下修 ...
- easyui datagrid editor checkbox 单击事件
Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', ...
随机推荐
- python 获取文件大小,创建时间和访问时间
# -*- coding: UTF8 -*- import timeimport datetime import os 1. '''把时间戳转化为时间: 1479264792 to 2016-11-1 ...
- 1996: [Hnoi2010]chorus 合唱队 - BZOJ
Description Input Output Sample Input41701 1702 1703 1704Sample Output8HINT 水题,区间dp,f[l,r,k]表示区间[l,r ...
- 16进制串hex与ASCII字符串相互转换
提供两个函数,方便十六进制串与ASCII 字符串之间的相互转换,使用函数需要注意的是返回的串是在堆上通过 calloc 分配的,所以,记得使用完返回值释放该块,并且将指向该块的指针 =NULL . c ...
- 关于struts2如何去掉默认的后缀(.action)
struts2是可以配置默认的后缀名的,如http://localhost:8080/test.action,这个是默认的,但是也可以通过配置去修改这个.action为别的. 这里是通过一个常量配置改 ...
- codeforces 397B
#include <cstdio> #include <cstdlib> #include <cmath> #include <map> #includ ...
- NGUI UIGrid 动态刷新布局 && BUG FIX
/// <summary> /// "1" => 对应的一个UISpirte,"1234" => 对应四个预设 /// </sum ...
- servlet中获取request中文乱码问题分析
request.setCharacterEncoding("utf-8");//第一种情况 log.info("服务商名称:" + request.getPar ...
- java reflect 例子
public static void main(String[] args) { Student stu1 = new Student(); stu1.setId(1); stu1.setName(& ...
- java基础知识回顾之java Thread类--java线程实现常见的两种方式实现Runnable接口(二)
创建线程的第二中方式: /** * 步骤: 1定义类实现Runnable接口 2.实现Runnable接口中的run方法. 3.通过Thread类建立线程对象,并将Run ...
- 【转载】SSH整合使用步骤
SSH整合使用步骤 由于刚开始学习SSH,其中的配置比较多,为了下次能够快速的进行配置,将SSH整合的过程记录下来,以便下次查阅. 软件环境:MyEclipse 9.0.Struts2.2.Sprin ...