easyui,取消点击行选中行事件，和点击列模拟单选事件
1，取消点击列行取消行选中事件，
onLoadSuccess: function (data) {
& && && && && & var s = $(&#auditTable&).datagrid('getPanel');
& && && && && & var rows1 = s.find('tr.datagrid-row td[field!=radio]');
& && && && && & rows1.unbind('click').bind('click', function (e) {
& && && && && && &&&
& && && && && & });
& && && && &}
2.模拟radio单选事件:
var selectI//记录是否操作的同一行
& && &&&var isSelRow=//记录是否已经选择了本行
----------------------------------
singleSelect: true,//点击单选行，
columns: [[
& && && && && & {
& && && && && && &&&field: 'radio',
& && && && && && &&&title: '选择',
& && && && && && &&&width: 50,
& && && && && && &&&align: 'center',
& && && && && && &&&formatter: function (value, row, index) {
& && && && && && && && &return '&input type=&checkbox& name=&DataGridCheckbox& value=&'+index+'& class=&checkbox0224&&';
& && && && && && &&&}
& && && && && & }]],
& && && && &onClickCell: function (index, field, value) {
& && && && && & var isCheck= $('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').eq(index).prop('checked');//判断是否已经选中
& && && && && & if(index ==selectIndex){//是否同一行
& && && && && && &&&$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').prop('checked',false);//吧所有的checkbo'x置为未选中
& && && && && && &&&if(isCheck){//已经选中
& && && && && && && && &selectIndex=
& && && && && && && && &isSelRow=
& && && && && && && && &$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').eq(index).prop('checked',true);//置为已选择
& && && && && && &&&}else{
& && && && && && && && &isSelRow=//未选择
& && && && && && && && &$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').eq(index).prop('checked',false);
& && && && && && &&&}
& && && && && & }else{
& && && && && && &&&$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').prop('checked',false);
& && && && && && &&&if(isCheck){
& && && && && && && && &$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').eq(index).prop('checked',true);
& && && && && && &&&}else{
& && && && && && && && &selectIndex=
& && && && && && && && &$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').eq(index).prop('checked',false);
& && && && && && &&&}
& && && && && & }
& && && && &},
& && && && &onSelect:function (index,row) {
& && && && && & if(selectIndex==index){//是否为同一，切是否已经选过，已选择取消选择的样式
& && && && && && &&&if(!isSelRow){
& && && && && && && && &$('#auditTable').datagrid('unselectRow',selectIndex);
& && && && && && &&&}
& && && && && & }
3------------------上传整体代码
var selectI
& && &&&var isSelRow=
& && &&&$('#auditTable').datagrid({
& && && && &url: rootPath + 'review/selectAllList',
& && && && &method: 'post',
& && && && &queryParams: param,
& && && && &pagination: true,
& && && && &singleSelect: true,
& && && && &autoRowHeight: true,
& && && && &rownumbers: true,
& && && && &loadMsg: '正在加载信息...',
& && && && &pagesize: 10,
& && && && &pageList: [10, 15, 20],
& && && && &fitColumns: true,
& && && && &columns: [[
& && && && && & {
& && && && && && &&&field: 'radio',
& && && && && && &&&title: '选择',
& && && && && && &&&width: 50,
& && && && && && &&&align: 'center',
& && && && && && &&&formatter: function (value, row, index) {
& && && && && && && && &return '&input type=&checkbox& name=&DataGridCheckbox& value=&'+index+'& class=&checkbox0224&&';
& && && && && && &&&}
& && && && && & },
& && && && && & {field: &appName&, title: &应用名称&, width: 240, align: 'center'},
& && && && && & {field: &appTypeName&, title: &应用类型&, width: 200, align: 'center'},
& && && && && & {field: &appVersion&, title: &版本&, width: 150, align: &center&},
& && && && && &
& && && && && & {field: &developer&, title: &开发者&, width: 300, align: 'center'},
& && && && && & {
& && && && && && &&&field: &appState&, title: &应用状态&, width: 150, align: 'center', formatter: function (value) {
& && && && && && &&&var str = '';
& && && && && && &&&if (value == 1) {
& && && && && && && && &str = '&span style=&color: green&&上架&/span&'
& && && && && && &&&} else if (value == 2) {
& && && && && && && && &str = '&span style=&color: red&&下架&/span&'
& && && && && && &&&}
& && && && && && &&&return str == '' ? appStatus[value] :
& && && && && & }
& && && && && & },
& && && && && & {
& && && && && && &&&field: &reviewStatus&, title: &审核状态&, width: 200, align: 'center', formatter: function (value) {
& && && && && && &&&if (value == 4) {
& && && && && && && && &return '&a href=&javascript:void(0);& data-target=&.bs-example-modal-update& data-toggle=&modal& onclick=&Index.toUpdate(\'' + rows.appName + '\',' + rows.appId + ',' + rows.appDetailId + ')&&审核未通过&/a&';
& && && && && && &&&} else {
& && && && && && && && &return reviewStatus[value];
& && && && && && &&&}
& && && && && & }
& && && && && & },
& && && && && & {
& && && && && && &&&field: &modifyDate&, title: &更新时间&, width: 230, align: &center&,
& && && && && && &&&formatter: function (time) {
& && && && && && && && &if (time) {
& && && && && && && && && & var date = new Date(time);
& && && && && && && && && & Y = date.getFullYear() + '-';
& && && && && && && && && & M = (date.getMonth() + 1 & 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
& && && && && && && && && & D = date.getDate() + ' ';
& && && && && && && && && & h = date.getHours() + ':';
& && && && && && && && && & m = date.getMinutes() + ':';
& && && && && && && && && & s = date.getSeconds();
& && && && && && && && && & return Y + M + D + h + m +
& && && && && && && && &} else {
& && && && && && && && && & return &&;
& && && && && && && && &}
& && && && && && &&&}
& && && && && & },
& && && && && & {
& && && && && && &&&field: &oper&, title: &操作&, width: 200, align: 'center', formatter: function (value, rows, index) {
& && && && && && &&&return '&a href=&javascript:void(0);& data-target=&.bs-example-modal-update& data-toggle=&modal& onclick=&Index.toUpdate(\'' + rows.appName + '\',' + rows.appId + ',' + rows.appDetailId + ')&&查看APK&/a&/&a href=&javascript:;& data-target=&.bs-example-modal-edit& data-toggle=&modal& onclick=&Index.toEdit(' + rows.appDetailId + ')&&查看APP信息&/a&';
& && && && && & }
& && && && && & }
& && && && &]],
& && && && &onClickCell: function (index, field, value) {
& && && && && & var isCheck= $('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').eq(index).prop('checked');
& && && && && & if(index ==selectIndex){
& && && && && && &&&$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').prop('checked',false);
& && && && && && &&&if(isCheck){
& && && && && && && && &selectIndex=
& && && && && && && && &isSelRow=
& && && && && && && && &$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').eq(index).prop('checked',true);
& && && && && && &&&}else{
& && && && && && && && &isSelRow=
& && && && && && && && &$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').eq(index).prop('checked',false);
& && && && && && &&&}
& && && && && & }else{
& && && && && && &&&$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').prop('checked',false);
& && && && && && &&&if(isCheck){
& && && && && && && && &$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').eq(index).prop('checked',true);
& && && && && && &&&}else{
& && && && && && && && &selectIndex=
& && && && && && && && &$('#auditTable').datagrid('getPanel').find('.datagrid-view2 input[type=&checkbox&]').eq(index).prop('checked',false);
& && && && && && &&&}
& && && && && & }
& && && && &},
& && && && &onSelect:function (index,row) {
& && && && && & if(selectIndex==index){
& && && && && && &&&if(!isSelRow){
& && && && && && && && &$('#auditTable').datagrid('unselectRow',selectIndex);
& && && && && && &&&}
& && && && && & }
& && && && &},
& && && && &onLoadError: function (data) {
& && && && && & console.log(data)
& && && && &},
& && && && &onLoadSuccess: function (data) {
& && && && && & var s = $(&#auditTable&).datagrid('getPanel');
& && && && && & var rows1 = s.find('tr.datagrid-row td[field!=radio]');
& && && && && & rows1.unbind('click').bind('click', function (e) {
& && && && && && &&&
& && && && && & });
& && && && && & if (data.total == 0) {
& && && && && && &&&$.messager.alert('提示信息', '暂未查询到相关信息', 'info');
& && && && && & }
& && && && &}
& && &&&});
& && && && &}
4：---------------------------------------
第二种方案：不需要自己写模拟单选，用easyui的一些属性就可以实现。。。。。。。。。。。。。。才发现自己浪费了那么多的功夫，好痛苦啊
singleSelect: true,
columns: [[
& && && && && & {
& && && && && && &&&field: 'ck',
& && && && && && &&&checkbox:true
& && && && && & }]],
onLoadSuccess: function (data) {
& && && && && & var s = $(&#auditTable&).datagrid('getPanel');
& && && && && & var rows1 = s.find('tr.datagrid-row td[field!=ck]');
& && && && && & rows1.unbind('click').bind('click', function (e) {
& && && && && && &&&
& && && && && & });
& && && && && & if (data.total == 0) {
& && && && && && &&&$.messager.alert('提示信息', '暂未查询到相关信息', 'info');
& && && && && & }
& && && && &}
17 总笔记数
1万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：jquery easyui datagrid 获取Checked选择行(勾选行)数据
getSelected：取得第一个选中行数据，如果没有选中行，则返回 null，否则返回记录。
getSelections：取得所有选中行数据，返回元素记录的数组数据。
getChecked：取得checkbox选择行的数据，返回元素记录的数组数据。
getSelected跟getSelections是选中行，而且getChecked是选择行。
选中行的意思就是，我们单击到某一个行，一般这个时候默认样式会让该行的背景色为黄色，就证明我们选中了该行。
而选择行的意思就是，我们在该行放置了一个checkbox按钮，我勾选了这个按钮，因此也可以将选择行称为勾选行更贴切一些！
var selRows = $('#Selproduct-table-list').datagrid('getChecked');
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？其实这个功能可以通过选择单击事件的作用域来实现
html里面，一切元素都可以通过document来得到，所以我们的思路就是取消除了checkbox那个td之外的所有td的单击事件，通过unbind来实现
以下展示代码,以下代码是放在onLoadSuccess事件中
var s= $("#dg1").datagrid('getPanel');
var rows = s.find('tr.datagrid-row');
var rows1 = s.find('tr.datagrid-row td[field!=ck]');
rows1.unbind('click').bind('click',function(e){
return false;
我使用的easyui版本是1.3.4
分享一下小知识
datagrid获取刚选择的行的行号代码
var s = $('#dg1').datagrid('getSelected');
var index = $("#dg1").datagrid('getRowIndex',s);
如果要获取多行
var s = [];
var index = [];
s = $('#dg1').datagrid('getSelected');
for(var i=0; i&s. i++) ｛
index.push($("#dg1").datagrid("getRowIndex",s[i]));
在调用onClickRow单击事件之前，总会先调用onSelect和onUnSelect事件
其实可以通过console.log()来调试js程序，而不是用alert，因为console不会打断程序的进行，可以浏览器的控制台进行查看，以下是firefox的控制台
以下是关于easayui中的this
var s= $("#dg1").datagrid('getPanel');
var rows = s.find('tr.datagrid-row');
var checkrows = rows.find('input[type=checkbox]');
$.each(checkrows,function(index,value){
console.log(this.checked);
这个程序会输出所有的checkbox的值，即true or false,这里的this返回的是一个input object对象，所以可以直接调用this.property来获取属性值
关于getSelected获取的值，其实getSelected获取的值的样式是{xx="xx",yy="yy"},所以要取某个属性的值，只需要datagrid("getSelected").xx就行了
阅读(...) 评论()EasyUi datagrid 单选框选中事件 - tebato - 推酷
EasyUi datagrid 单选框选中事件 - tebato
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);
if (index == selectIndex) {
$('#UserList').datagrid(&getPanel&).find(&.datagrid-view2 .datagrid-body table input[type='checkbox']:eq(& + index + &) &).attr(&checked&, false);
//将所有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 =
到此，目标基本达成，效果如下图所示。
聪明的你，是否发现，这里其实还有一个问题的，就是当对某一行单击三次及三次以上，选中和非选中的切换是有问题的。
不过，我并不打算在这里解决了，有兴趣可以自己试试，必竟自己解决问题的那种喜悦和成就感是其他事情无法替代的。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}