解决grid拖拽功能后,复选框多选后取消不掉的问题

2024-05-09 23:48

本文主要是介绍解决grid拖拽功能后,复选框多选后取消不掉的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        Extjs 中设置enableDragDrop:true,即可实现grdi的grid可拖拽功能,但是与此同时带来一个bug,复选框多选后,点击其中的一个复选框取消不掉已选中的这行
只能通过全选然后取消。我们希望是通过复选框选中多行记录时,可以通过点击复选框取消刚选择的若干行记录。
      这个问题也是extjs自身的一个bug,就是CheckboxSelectionModel和拖拽功能(enableDragDrop:true)是冲突的,通过谷歌找到解决方案。通过重写GridDragZone的getDragData方法去实现

new Ext.grid.EditorGridPanel({header: false,region: 'west',width: 700,border: false,enableColumnMove: false,enableHdMenu: false,store: this.store,selModel:sm,columns: this.columns,multiSelect : true,enableDragDrop:true,//设置拖拽功能ddGroup: 'gridDD', dropConfig: {appendOnly:false},loadMask: {msg:'<fmt:message key="mainPanel.loading"/>'},listeners: {render: function(grid){var ddrow = new Ext.dd.DropTarget(grid.getEl(), {ddGroup: 'gridDD',copy    : false,notifyDrop : function(dd, e, data){var rows = grid.getSelectionModel().getSelections();var count = rows.length;var dropIndex = dd.getDragData(e).rowIndex;if (!dropIndex && dropIndex != 0) return ;grid.getStore().remove(rows);grid.getView().refresh();var dropIndex2 = dd.getDragData(e).rowIndex;var array=[];if (dropIndex != dropIndex2) dropIndex = dropIndex2 + 1 ;for(var i=0;i < count;i++){var index = dropIndex + i;array.push(index);}grid.getStore().insert(dropIndex,data.selections);grid.getSelectionModel().selectRows(array);grid.getView().refresh();}});}}});

解决方法:重写GridDragZone的getDragData方法

     

	 Ext.override( Ext.grid.GridDragZone, {getDragData : function( e ) {var t = Ext.lib.Event.getTarget(e);var rowIndex = this.view.findRowIndex(t);if ( rowIndex !== false ) {var sm = this.grid.selModel;if ( sm instanceof( Ext.grid.CheckboxSelectionModel ) ) {sm.onMouseDown( e, t );}if( t.className != 'x-grid3-row-checker' && ( !sm.isSelected( rowIndex ) || e.hasModifier() ) ) {sm.handleMouseDown( this.grid, rowIndex, e );}return { grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections() };}return false;}} ); 


这篇关于解决grid拖拽功能后,复选框多选后取消不掉的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/974831

相关文章

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

Spring的RedisTemplate的json反序列泛型丢失问题解决

《Spring的RedisTemplate的json反序列泛型丢失问题解决》本文主要介绍了SpringRedisTemplate中使用JSON序列化时泛型信息丢失的问题及其提出三种解决方案,可以根据性... 目录背景解决方案方案一方案二方案三总结背景在使用RedisTemplate操作redis时我们针对

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

Kotlin Map映射转换问题小结

《KotlinMap映射转换问题小结》文章介绍了Kotlin集合转换的多种方法,包括map(一对一转换)、mapIndexed(带索引)、mapNotNull(过滤null)、mapKeys/map... 目录Kotlin 集合转换:map、mapIndexed、mapNotNull、mapKeys、map

nginx中端口无权限的问题解决

《nginx中端口无权限的问题解决》当Nginx日志报错bind()to80failed(13:Permissiondenied)时,这通常是由于权限不足导致Nginx无法绑定到80端口,下面就来... 目录一、问题原因分析二、解决方案1. 以 root 权限运行 Nginx(不推荐)2. 为 Nginx

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

SpringSecurity整合redission序列化问题小结(最新整理)

《SpringSecurity整合redission序列化问题小结(最新整理)》文章详解SpringSecurity整合Redisson时的序列化问题,指出需排除官方Jackson依赖,通过自定义反序... 目录1. 前言2. Redission配置2.1 RedissonProperties2.2 Red

nginx 负载均衡配置及如何解决重复登录问题

《nginx负载均衡配置及如何解决重复登录问题》文章详解Nginx源码安装与Docker部署,介绍四层/七层代理区别及负载均衡策略,通过ip_hash解决重复登录问题,对nginx负载均衡配置及如何... 目录一:源码安装:1.配置编译参数2.编译3.编译安装 二,四层代理和七层代理区别1.二者混合使用举例

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.