背景:项目中使用easyui作为前端架子。datagrid默认是点击行就选中此行然后变色。

需求:点击行不让此行选中;只能通过点击复选框才能选中某一行。

解决思路:

  1、写点击行函数function onClickRow(rowIndex,rowData){}

  2、查询当前datagrid所有选中行。

  3、遍历选中行。对比选中行索引和点击行的索引:如果点击行的索引在所有选中行中,则取消点击行的选中状态;如果不存在,则选中点击行。

代码:

<script type="text/javascript">
// 行点击事件
function rowClick(rowIndex,rowData){
var rows = $("#datagrid").datagrid('getSelections');
var tag = true;
// 判断是否刚刚选中
for(var i = 0;i<rows.length;i++){
// 所有选中行中存在刚刚点击的行 则取消选中
if($('#datagrid').datagrid('getRowIndex', rows[i])==rowIndex){
// 取消选中此行
$('#datagrid').datagrid('unselectRow',rowIndex);
tag = false;
break;
}
}
// 判断是否刚刚取消
if(tag){
$('#datagrid').datagrid('selectRow',rowIndex);
}
}
</script>

延伸:

  在解决这个问题的时候看到js中Set对象的使用。如果使用Set对象,上面的代码则变成下面这样:

使用Set对象(此情景并不适用Set对象,为以后使用打下基础吧)

<script type="text/javascript">
// 行点击事件
function rowClick(rowIndex,rowData){
var rows = $("#datagrid").datagrid('getSelections');
var set = new Set();
// 判断是否刚刚选中
for(var i = 0;i<rows.length;i++){
var currentIndex = $('#datagrid').datagrid('getRowIndex',rows[i]);
set.add(currentIndex);
// 所有选中行中存在刚刚点击的行 则取消选中
if(currentIndex==rowIndex){
// 取消选中此行
$('#datagrid').datagrid('unselectRow',rowIndex);
}
}
// 判断是否刚刚取消
if(!set.has(rowIndex)){
$('#datagrid').datagrid('selectRow',rowIndex);
}
}
</script>

【easyUI】取消easyui行点击选中事件,智能通过勾选checkbox才能选中行的更多相关文章

  1. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  2. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  3. 点击DIV触发其他元素的点击事件(案例:点击type="radio" 的input 标签外层DIV,触发内部单选点击选中事件)

    方法一: 直接用找到对应dom元素调用.click()方法 $('.user_content').click(function(){ $(this).children()[0].click(); // ...

  4. CSS侧边栏,ng-click定义选中事件

    本篇小随笔,记录下侧边栏的写法和ng-click点击选中事件.因为这个工程不让引用jQuery.所以ng-click选中事件用了一个比较笨的方法实现的. 下面是HTML页面 按 Ctrl+C 复制代码 ...

  5. easyui datagrid取消点击行的选中事件

    http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material&dir=ltr&pitem= ...

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

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

  7. EasyUi datagrid 单选框选中事件

    Easyui datagrid中的单选框默认是这样定义的 columns: [[ { field: 'CK', title: '', checkbox: true, width: 30 }]]. 平常 ...

  8. EasyUI Datagrid 数据网格 点击选中行 再次单击取消选中行

    适用于jquery-easyui-1.9.15版本: 在项目中全局搜索: opts.singleSelect==true 或者在jquery.easyui.min.js中搜索: opts.single ...

  9. easyui datagrid checkbox复选框取消单击选中事件、初始全选全不选等问题解决

    系统业务需要,导入的列表数据默认全部选中,且不可取消选中行.全部店铺优惠券发放过后导入的数据全部清空.如图所示: 一.初始化页面默认全部选中“selectAll”,全部不选中“unselectAll” ...

随机推荐

  1. javascript 之对象-13

    对象 无序属性的集合,属性可以包含基本值.对象或者函数,简单理解为对象是若干属性的集合:我们常说的面向对象(oop)编程其实是指的一种编码的思想,简单理解为用对象来封装数据,利用封装.继承.多态对代码 ...

  2. CSS行内元素盒模型

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  3. 通过xshell实现内网linux上公网yum、apt-get安装软件

    环境:在内网,我的机器可上网,内网服务器不可上网,本来在我机器上开个代理,服务器直接通过我机器上网就可以,奈何网络配置太复杂,目前只有ssh端口可通. 先安装ccproxy软件,配置http监听端口为 ...

  4. java例题_32 取一个整数a从右端开始的4~7位

    1 /*32 [程序 32 左移右移] 2 题目:取一个整数 a 从右端开始的 4-7 位. 3 */ 4 5 /*分析 6 * 从右端开始的第四位相当于原数除以1000后结果的最后一位数, 7 * ...

  5. Activiti工作流学习笔记(四)——工作流引擎中责任链模式的建立与应用原理

    原创/朱季谦 本文需要一定责任链模式的基础,主要分成三部分讲解: 一.简单理解责任链模式概念 二.Activiti工作流里责任链模式的建立 三.Activiti工作流里责任链模式的应用 一.简单理解责 ...

  6. Scrapy 5+1 ——五大坑附送一个小技巧

    笔者最近对scrapy的学习可谓如火如荼,虽然但是,即使是一整天地学习下来也会有中间两三个小时的"无效学习",不是笔者开小差,而是掉进了深坑出不来. 在此,给各位分享一下作为一名S ...

  7. [Fundamental of Power Electronics]-PART I-2.稳态变换器原理分析-2.4 Cuk变换器实例

    2.4 Cuk 变换器 作为第二个示例,考虑图2.20(a)的变换器.该变换器执行类似于降压-升压变换器的直流转换功能:它可以增加或减小直流电压的幅值,并且可以反转极性.使用晶体管和二极管的实际实现如 ...

  8. java面试-集合类不安全问题及解决方案

    一.List 1.代码演示 public class ArrayListNotSafeDemo { public static void main(String[] args) { List<S ...

  9. CODING 首届金融科技技术交流闭门会议顺利召开

    近期,由腾讯云旗下一站式 DevOps 开发平台 CODING 和中国 DevOps 社区主办的深圳第十一届 Meetup 圆满结束,会上三位专家分享了自己独到的行业见解,腾讯云 CODING Dev ...

  10. 关于 下载 nfs-utils时的 gssproxy conflicts with selinux-policy-3.13.1-102.el7.noarch 错误

    使用 yum install nfs-utils -y 时 出现如下错误: 错误:gssproxy conflicts with selinux-policy-3.13.1-102.el7.noarc ...