zoukankan      html  css  js  c++  java
  • 【easyUI】取消easyui行点击选中事件,智能通过勾选checkbox才能选中行

    背景:项目中使用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>
  • 相关阅读:
    开启power management功能有坑,ESP32串口频繁出现UART_BREAK中断
    ESP32音频开发板ESP32-Korvo V1.1踩坑
    驱动开发常用位运算
    ESP8266 RTOS 开发笔记(4)串口透传
    mosquitto服务状态监控(转载)
    ESP8266 RTOS 开发笔记(3)用户参数
    ESP8266 RTOS 开发笔记(2)TCP Client+Server
    ESP8266 RTOS 开发笔记(1)STA+AP模式(共存)
    C uint32 转 uint8
    python 简易计算器(只能计算加减乘除和括号)
  • 原文地址:https://www.cnblogs.com/oldwei/p/10005929.html
Copyright © 2011-2022 走看看