81.Ext TreePanel实现单选等功能
转自:https://blog.csdn.net/iteye_7988/article/details/81886654
在ext1.x里,树是没有checkbox的, 幸好在2.X版本里提供了这个功能, 在许多应用里, 带有checkbox的树使用还是很常见的
Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) ,
单选等等, Ext2.X并没有帮我们实
还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度
在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决
对 Ext.tree.TreeNodeUI
进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
扩展的功能点有:
一、支持只对树的叶子进行选择
只有当返回的树结点属性leaf = true 时,结点才有checkbox可选
使用时,只需在声明树时,加上属性 onlyLeafCheckable: true 既可,默认是false
二、支持对树的单选
只允许选择一个结点
使用时,只需在声明树时,加上属性 checkModel: "single" 既可
三、支持对树的级联多选
当选择结点时,自动选择该结点下的所有子结点,或该结点的所有父结点(根结点除外),特别是支持异步,当子结点还没显示时,会从后台取得子结点,然后将其选中/取消选中
使用时,只需在声明树时,加上属性 checkModel: "cascade"
或"parentCascade"或"childCascade"既可
cascade
:级联选中所有父结点和子结点
parentCascade :级联选中所有父结点
childCascade :级联选中所有子结点
四、添加"check"事件
该事件会在树结点的checkbox发生改变时触发
使用时,只需给树注册事件,如:
tree.on("check",function(node,checked){...});
默认情况下,checkModel为
'multiple',也就是多选;onlyLeafCheckable为false,所有结点都可选
使用方法:在loader里加上 baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI}
既可.
例如:
Js代码
- var tree = new Ext.tree.TreePanel({
- el:'tree-ct',
- width:,
- height:,
- checkModel: 'cascade', // 对树的级联多选
- onlyLeafCheckable: false,//对树所有结点都可选
- animate: false,
- rootVisible: false,
- autoScroll:true,
- dwrCall:Tmplt.getTmpltTree,
- baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加uiProvider属性
- }),
- root: new Ext.tree.AsyncTreeNode({ id:'0' })
- });
- tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
- tree.render();
- var tree = new Ext.tree.TreePanel({
- el:'tree-ct',
- width:,
- height:,
- checkModel: 'cascade', //对树的级联多选
- onlyLeafCheckable: false,//对树所有结点都可选
- animate: false,
- rootVisible: false,
- autoScroll:true,
- loader: new Ext.tree.DWRTreeLoader({
- dwrCall:Tmplt.getTmpltTree,
- baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }//添加uiProvider属性
- }),
- root: new Ext.tree.AsyncTreeNode({ id:'0' })
- });
- tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
- tree.render();
需要注意的是, 使用例子里的Tree
使用了Ext.tree.DWRTreeLoader这个扩展类,用来加载后台树结点,这和使用其它的loader没有区别的,
如果您使用其它的loader, 同样加上 baseAttrs: { uiProvider:
Ext.ux.TreeCheckNodeUI } 就行了
- 实现单选功能:
- this.on('checkchange',this.check,this);
- getNodes:function(treePanel){
- var startNode = treePanel.getRootNode();
- var r = [];
- var f = function(){
- r.push(this);
- };
- startNode.cascade(f);
- return r;
- },
- check : function(node,bool) {
- if(!bool){
- return;
- }
- if(this.checkModel=='single'){
- var nodes =this.getNodes(this);
- ){
- ,len=nodes.length;i
- if(nodes[i].id!=node.id){
- if(nodes[i].getUI().checkbox){
- nodes[i].getUI().checkbox.checked = false;
- nodes[i].attributes.checked=false;
- }
- }
- }
- }
- }
- }
81.Ext TreePanel实现单选等功能的更多相关文章
- ExtJs2.0学习系列(12)--Ext.TreePanel之第一式
今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel, ...
- Extjs Ext.TreePanel
TreePanel 简单实例. <link rel="stylesheet" href="Js/ext-4.2/resources/css/ext-all-nept ...
- ext TreePanel树节点操作
1.全部展开 tree.expandAll();2.全部收缩 tree.collapseAll();3.得到父节点 node.parentNode4.判断是否有父节点 node.parentNode= ...
- [Ext.Net]TreePanel 异步加载数据
异步加载数据指的是页面加载的时候只显示根目录,点击根目录再去加载其子目录. 下面就来介绍下这种异步加载的树结构要怎么实现 现将例子的图 QQ图片20131225134353.jpg (12.1 KB, ...
- Extjs treePanel过滤查询功能【转】
Extjs4.2中,对于treeStore中未实现filterBy函数进行实现,treestore并未继承与Ext.data.Store,对于treePanel的过滤查询功能,可有以下两种实现思路: ...
- EXT.NET 使用总结(2) ---TreePanel(带右键菜单,节点自定义属性)
TreePanel(带右键菜单,节点自定义属性) 其实这个树控件也挺好用的.http://www.ztree.me/v3/main.php#_zTreeInfo html <ext:Panel ...
- Ext.Net TreePanel 修改Icon图标
分类: Ext.Net2012-09-24 13:44 1779人阅读 评论(0) 收藏 举报 webformserverextassemblyxhtmlobject 1.默认icon 2.自定义ic ...
- [Ext JS 4] Grid 实战之分页功能
前言 分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据.也就是要多少取多少.这种方式比较适合Grid 的数据量很大,需 ...
- [Ext.Net]TreePanel+gridPanel实例
@小花要完整例子,尝试一下图文并茂,力求完整. gridPanel TreePanel.JPG (27.49 KB, 下载次数: 16) 下载附件 保存到相册 2013-1-6 11:24 上 ...
随机推荐
- TensorFlow:Windows下使用TensorFlow-Python版本
原文链接:Win10X64下安装使用TensorFlow 安装TensorFlow 由于Google那帮人已经把 TensorFlow 打成了一个 pip 安装包,所以现在可以用正常安装包的方式安装 ...
- 【技术累积】【点】【java】【28】Map遍历
Map遍历 map的遍历一般有几种吧 遍历entrySet for(Map.Entry<String,String> entry : map.entrySet()){ } Iterator ...
- comdlg32.dll
dll的应用,目前还不知道要怎么查看dll里的功能,暂且试着用了一个, 下面的Declare 分32位office软件和64位,如果是64位,要在Declare 后面加上PtrSafe ,定义的Typ ...
- 一个数据去重sql
参考: https://www.jb51.net/article/129656.htm DELETE testcaseFROM testcase, ( SELECT max(id) id, a ...
- 如何让git忽略指定的文件
有些文件,我们修改后,并不需要git提交更改,可以在.gitignore里面设置过滤规则 在.gitignore文件里面输入 *.zip 表示所有zip文件忽略更改 /bin 表示忽略整个根目录的bi ...
- csrf漏洞利用
low csrf(cross-site-request forgery),跨站请求伪造. 测试网站 --http://localhost/vulnerability/csrf 修改密码,点击chang ...
- Django REST framework 分页
三种分页:根据页码.根据索引.根据加密 http://www.xx.com/courses/?page=1&size=10 http://www.xx.com/courses/?offset= ...
- C语言指针与指向指针的指针
#include <stdio.h> #include <string.h> int main() { char a[]="hello world"; ch ...
- Java POI Excel 导入导出
这个东西很容易懂,不是特别难,难就难在一些复杂的计算和Excel格式的调整上. 近期写了一个小列子,放上来便于以后使用. POI.jar下载地址:http://mirror.bit.edu.cn/ap ...
- JavaSE 学习笔记之内部类(九)
内部类:如果A类需要直接访问B类中的成员,而B类又需要建立A类的对象.这时,为了方便设计和访问,直接将A类定义在B类中.就可以了.A类就称为内部类.内部类可以直接访问外部类中的成员.而外部类想要访问内 ...