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 单选框选中事件的更多相关文章

  1. layui 单选框选中事件

    <div class="layui-form-item" pane=""> <label class="layui-form-lab ...

  2. easyui datagrid 单选框 效果

    columns: [[{            field: 'oid',            title: '选择',            width: 20,            forma ...

  3. easyUI datagrid中checkbox选中事件以及行点击事件,翻页之后还可以选中

    DataGrid其中与选择,勾选相关 DataGrid属性:singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行选 ...

  4. Jquery监控audio单选框选中事件(实际通过click)

    $('input:radio[name="pathType"]').click(function(){ var checkValue = $('input:radio[name=& ...

  5. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  6. jquery 根据后台传过来的值动态设置下拉框、单选框选中

    更多内容推荐微信公众号,欢迎关注: jquery  根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...

  7. 判断单选框选中不成功,$("#xx").attr("checked")undefined

    判断单选框选中状态,各种都不行,受到https://www.cnblogs.com/yxwkf/p/4853014.html 的启发,相关引用: 原来.在jquery1.6版本号便对此做出了改动: [ ...

  8. EasyUI DataGrid单选如何取消选中

    EasyUI DataGrid在多选时,选中某行,可以取消:而在单选时,并不能取消选中某一行. 可以通过修改源码来完成. 在其源码中找到 opts.singleSelect==true 将代码做如下修 ...

  9. easyui datagrid editor checkbox 单击事件

    Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', ...

随机推荐

  1. python 获取文件大小,创建时间和访问时间

    # -*- coding: UTF8 -*- import timeimport datetime import os 1. '''把时间戳转化为时间: 1479264792 to 2016-11-1 ...

  2. 1996: [Hnoi2010]chorus 合唱队 - BZOJ

    Description Input Output Sample Input41701 1702 1703 1704Sample Output8HINT 水题,区间dp,f[l,r,k]表示区间[l,r ...

  3. 16进制串hex与ASCII字符串相互转换

    提供两个函数,方便十六进制串与ASCII 字符串之间的相互转换,使用函数需要注意的是返回的串是在堆上通过 calloc 分配的,所以,记得使用完返回值释放该块,并且将指向该块的指针 =NULL . c ...

  4. 关于struts2如何去掉默认的后缀(.action)

    struts2是可以配置默认的后缀名的,如http://localhost:8080/test.action,这个是默认的,但是也可以通过配置去修改这个.action为别的. 这里是通过一个常量配置改 ...

  5. codeforces 397B

    #include <cstdio> #include <cstdlib> #include <cmath> #include <map> #includ ...

  6. NGUI UIGrid 动态刷新布局 && BUG FIX

    /// <summary> /// "1" => 对应的一个UISpirte,"1234" => 对应四个预设 /// </sum ...

  7. servlet中获取request中文乱码问题分析

    request.setCharacterEncoding("utf-8");//第一种情况 log.info("服务商名称:" + request.getPar ...

  8. java reflect 例子

    public static void main(String[] args) { Student stu1 = new Student(); stu1.setId(1); stu1.setName(& ...

  9. java基础知识回顾之java Thread类--java线程实现常见的两种方式实现Runnable接口(二)

    创建线程的第二中方式: /** *      步骤: 1定义类实现Runnable接口      2.实现Runnable接口中的run方法.      3.通过Thread类建立线程对象,并将Run ...

  10. 【转载】SSH整合使用步骤

    SSH整合使用步骤 由于刚开始学习SSH,其中的配置比较多,为了下次能够快速的进行配置,将SSH整合的过程记录下来,以便下次查阅. 软件环境:MyEclipse 9.0.Struts2.2.Sprin ...