ExtJs4中的复选树级联选择
好久没有写新的博文了,过了个年休息了近一个月,人都懒散了。。
这几天要把项目中的几个模块有ext3升级到ext4,还要保持页面展示和功能要跟3.x版本的一样。升级并不是一件简单的是,基本相当于重写了,3.x版本的复选框树级联操作是在网上找的一个现成的插件,直接搬运到4.2中就不能用了,但是又找不到可用的插件。百度谷歌了好久,还真让我搞出来一个方法,记录下来吧,也分享给大家。如有不合理或者更好的方法希望不吝赐教。
在3.x版本中要实现级联选择的话,我使用的是一个TreeCheckNodeUI.js
这个文件百度一下都能找到啊,就不详细说明了,很好用。
在4.2中实现的方法是在treepanel
的配置项viewConfig
中添加函数onCheckboxChange
,表示复选框选择状态发生变化是触发的事件,先把代码贴出来:
viewConfig:{
onCheckboxChange: function(e, t) {
var item = e.getTarget(this.getItemSelector(), this.getTargetEl()), record;
if (item) {
record = this.getRecord(item);
var check = !record.get('checked');
record.set('checked', check);
if (check) {
record.bubble(function(parentNode) {
parentNode.set('checked', true);
});
record.cascadeBy(function(node) {
node.set('checked', true);
});
record.expand();
record.expandChildren();
} else {
record.collapse();
record.collapseChildren();
record.cascadeBy(function(node) {
node.set('checked', false);
});
record.bubble(function(parentNode) {
var childHasChecked=false;
var childNodes = parentNode.childNodes;
if(childNodes || childNodes.length>0){
for(var i=0;i<childNodes.length;i++){
if(childNodes[i].data.checked){
childHasChecked= true;
break;
}
}
}
if(!childHasChecked){
parentNode.set('checked', false);
}
}); }
}
}
}
其实这段代码我也不是很懂,几个方法是百度出来的,然后纯属于东拼西凑,最后居然还实现了功能,等闲来再好好了解一下这段代码的意思。
还遇到过一个问题,3.x的版本中有个grid的单元格悬浮展示数据的功能,其实就是一个quicktip
将单元格中的内容展示出来。同样的,直接搬运到extjs4中还是实现不了的,又花了半天时间才找到一个方法,还是直接贴出代码吧:
{
header : "姓名",
width : 100,
dataIndex : "name",
menuDisabled : true,
sortable : false,
renderer : function(value, metadata, record, rowIndex,
columnIndex, store) {
value = value.replace(/</g, '<');
metadata.tdAttr = 'data-qtip="' + value+ '"';
return value;
}
}
给colmodel中的列添加一个renderer
函数,给单元格所在的td
添加一个qtip
,将单元格的内容放到里面就可以了。
extjs的qtip提示会有个小问题,也不知道是不是bug,如果value的值中包含了空格,横线等特殊符号的时候qtip显示的内容不完整,只能显示第一个空格之前的内容。为了避免这种情况可以用<xmp>标签将value包含起来: metadata.tdAttr = 'data-qtip="<xmp>' + value+ '</xmp>"';
还有一种办法就是给grid添加一个鼠标移动事件,当鼠标移动到单元格内的时候取到单元格的内容,然后生成一个tooltip显示出来。代码如下:
listeners:{
'render': function(g) {
g.on("itemmouseenter", function(view,record,mode,index,e) {
var view = g.getView();
logGrid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: view.getCellSelector(),
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
tip.update(tip.triggerElement.innerHTML);
}
}
});
});
}
}
ExtJs4中的复选树级联选择的更多相关文章
- 树形菜单复选框级联选择HTML
模块标题 标识符 类别 链接 排序 系统管理 组 1 用户权限设定 Sys_UserModelConfigList 模块 Sys_UserModelConfigList.aspx 1 角色管理 ...
- jQuery+SpringMVC中的复选框选择与传值
一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked& ...
- 在word中做复选框打对勾钩
在word中做复选框打对勾钩 现在终于搞明白正确的操作方法 一.你在word里输入2610,按alt+X就能出 空checkbox 你在word里输入2611,按alt+X就能出 打了勾的checkb ...
- python QQTableView中嵌入复选框CheckBox四种方法
搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...
- django ORM中的复选MultiSelectField的使用
下载和介绍: https://pypi.org/project/django-multiselectfield/ 在django ORM的使用中,经常会出现选择的情况,例如: class person ...
- nodetree中 前面复选框禁用插件
nodetree中 前面复选框的去掉插件 extendTreeCheck.js /** * tree方法扩展 * 作者:小雪转中雪 */ $.extend($.fn.tree.methods, { / ...
- QTableView中嵌入复选框CheckBox 的四种方法总结
搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...
- springMVC 复选框带有选择项记忆功能的处理
前言:由于jsp管理页面经常会遇到复选框提交到JAVA后台,后台处理逻辑完成后又返回到jsp页面,此时需要记住jsp页面提交时复选框的选择状态,故编写此功能! 一.复选框的初始化 1.1.jsp页面 ...
- ExtJS表格——行号、复选框、选择模型
本篇的内容是为表格添加行号,和复选框,最后谈一下Ext的选择模型.内容比较简单,就直接上代码了.一. 设置行号 行号的设置主要问题在于删除某一行后需要重新计算行号 Ext.onReady(fun ...
随机推荐
- WIN8系统安装软件时提示"扩展属性不一致"的解决方法
单位新添加了两台T440P笔记本电脑,需要安装五笔输入法,同事一直安装不上.开始以为是WIN8系统跟输入法不兼容的问题,怀疑是输入法下载有误.于是直接在输入法官网下载了输入法,问题依旧:扩展属性不一致 ...
- android cocos2d-x for Android安装和学习笔记(请用adt-bundle21.1或以上导入)
引用:http://weimingtom.iteye.com/blog/1483566 (20121108)注意:这篇文章用cdt编译ndk工程的内容已过时(现在可以用adt-bundle,避免配置繁 ...
- 19. 星际争霸之php设计模式--迭代器模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
- RF内置库-----内置库的学习过程总结
前段时间充忙的学习RF,系统学习完之后就开始动手做各种接口的测试,虽然各类的接口测试基本能跑通了,但是重复造车的问题存在太明显.RF本身内置库就已经比较丰富,比如不需要import直接就加载到内存的B ...
- 深入理解Java PriorityQueue
PriorityQueue 本文github地址 Java中PriorityQueue通过二叉小顶堆实现,可以用一棵完全二叉树表示.本文从Queue接口函数出发,结合生动的图解,深入浅出地分析Prio ...
- PostgreSQL同步复制搭建
摘要: PostgreSQL同步复制搭建 一.初始化master节点 1. 安装PostgreSQL 2. 初始化db initdb -D /data/pg940_data 二.配置master节点 ...
- python基础(内置函数+文件操作+lambda)
一.内置函数 注:查看详细猛击这里 常用内置函数代码说明: # abs绝对值 # i = abs(-123) # print(i) #返回123,绝对值 # #all,循环参数,如果每个元素为真,那么 ...
- JAVA基础知识之JDBC——JDBC事务处理及批量更新
JDBC事务 JDBC的事务由Connection提供,默认是打开的. 要开启事务,则要关闭自动提交, conn.setAutoCommit(false); 提交事务使用 conn.commit(); ...
- JS加密库Crypto-JS SEA加密
http://www.seacha.com/tools/aes.html 在该网站测试 CryptoJS有很多加密方式网上查阅后有 CryptoJS (crypto.js) 为 JavaScript ...
- 红字差评系列2.dwarf
[题目分析] 首先按照题目给出的样例想到只要每个物品的价格都用能够合成他的两个物品来更新,一边读入一边更新就好了,后来又发现如果出现这样的情况:1 2 3在2 5 6 的前面,那我们就需要先更新2在更 ...