转自: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代码

Java代码  
  1. var tree = new Ext.tree.TreePanel({
  2. el:'tree-ct',
  3. width:,
  4. height:,
  5. checkModel: 'cascade',   // 对树的级联多选
  6. onlyLeafCheckable: false,//对树所有结点都可选
  7. animate: false,
  8. rootVisible: false,
  9. autoScroll:true,
  10. dwrCall:Tmplt.getTmpltTree,
  11. baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加uiProvider属性
  12. }),
  13. root: new Ext.tree.AsyncTreeNode({ id:'0' })
  14. });
  15. tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
  16. tree.render();
  17. var tree = new Ext.tree.TreePanel({
  18. el:'tree-ct',
  19. width:,
  20. height:,
  21. checkModel: 'cascade',   //对树的级联多选
  22. onlyLeafCheckable: false,//对树所有结点都可选
  23. animate: false,
  24. rootVisible: false,
  25. autoScroll:true,
  26. loader: new Ext.tree.DWRTreeLoader({
  27. dwrCall:Tmplt.getTmpltTree,
  28. baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }//添加uiProvider属性
  29. }),
  30. root: new Ext.tree.AsyncTreeNode({ id:'0' })
  31. });
  32. tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
  33. tree.render();

需要注意的是, 使用例子里的Tree
使用了Ext.tree.DWRTreeLoader这个扩展类,用来加载后台树结点,这和使用其它的loader没有区别的,

如果您使用其它的loader, 同样加上 baseAttrs: { uiProvider:
Ext.ux.TreeCheckNodeUI } 就行了

Java代码  
  1. 实现单选功能:
  2. this.on('checkchange',this.check,this);
  3. getNodes:function(treePanel){
  4. var startNode = treePanel.getRootNode();
  5. var r = [];
  6. var f = function(){
  7. r.push(this);
  8. };
  9. startNode.cascade(f);
  10. return r;
  11. },
  12. check : function(node,bool) {
  13. if(!bool){
  14. return;
  15. }
  16. if(this.checkModel=='single'){
  17. var nodes =this.getNodes(this);
  18. ){
  19. ,len=nodes.length;i
  20. if(nodes[i].id!=node.id){
  21. if(nodes[i].getUI().checkbox){
  22. nodes[i].getUI().checkbox.checked = false;
  23. nodes[i].attributes.checked=false;
  24. }
  25. }
  26. }
  27. }
  28. }
  29. }

81.Ext TreePanel实现单选等功能的更多相关文章

  1. ExtJs2.0学习系列(12)--Ext.TreePanel之第一式

    今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel, ...

  2. Extjs Ext.TreePanel

    TreePanel 简单实例. <link rel="stylesheet" href="Js/ext-4.2/resources/css/ext-all-nept ...

  3. ext TreePanel树节点操作

    1.全部展开 tree.expandAll();2.全部收缩 tree.collapseAll();3.得到父节点 node.parentNode4.判断是否有父节点 node.parentNode= ...

  4. [Ext.Net]TreePanel 异步加载数据

    异步加载数据指的是页面加载的时候只显示根目录,点击根目录再去加载其子目录. 下面就来介绍下这种异步加载的树结构要怎么实现 现将例子的图 QQ图片20131225134353.jpg (12.1 KB, ...

  5. Extjs treePanel过滤查询功能【转】

    Extjs4.2中,对于treeStore中未实现filterBy函数进行实现,treestore并未继承与Ext.data.Store,对于treePanel的过滤查询功能,可有以下两种实现思路: ...

  6. EXT.NET 使用总结(2) ---TreePanel(带右键菜单,节点自定义属性)

    TreePanel(带右键菜单,节点自定义属性) 其实这个树控件也挺好用的.http://www.ztree.me/v3/main.php#_zTreeInfo html <ext:Panel ...

  7. Ext.Net TreePanel 修改Icon图标

    分类: Ext.Net2012-09-24 13:44 1779人阅读 评论(0) 收藏 举报 webformserverextassemblyxhtmlobject 1.默认icon 2.自定义ic ...

  8. [Ext JS 4] Grid 实战之分页功能

    前言 分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据.也就是要多少取多少.这种方式比较适合Grid  的数据量很大,需 ...

  9. [Ext.Net]TreePanel+gridPanel实例

     @小花要完整例子,尝试一下图文并茂,力求完整. gridPanel TreePanel.JPG (27.49 KB, 下载次数: 16) 下载附件  保存到相册 2013-1-6 11:24 上 ...

随机推荐

  1. JS——switch case

    语法: switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代码 ...

  2. ASP.NET MVC 二维码生成(ThoughtWorks.QRCode)

    原文地址http://www.cnblogs.com/jys509/p/4592539.html

  3. [Windows Server 2003] IIS自带FTP安装及配置方法

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:IIS6.0自 ...

  4. spring+spring MVC+mybatis 框架搭建

    1.新建一个javaWeb工程Test,创建时记得勾选web.xml文件. 2.导入需要的jar包,Mybatis所有的jar,spring所有的jar,mysql驱动包. 这里mybatis和spr ...

  5. java网络

    title: java 网络 date: 2017年3月11日11:14:52 1. 复杂的东西就把他封装成对象 概述:(网络就是找到别人) 找到对方的机器,(找到对方的ip地址) 每个机器中有很多进 ...

  6. Centos6.4 安装bind dns 服务器

    一.介绍 1)Centos6.4 64bit minimal 2) bind-9.8.2-0.30.rc1.el6_6.3.x86_64 二.安装 $ yum install -y bind bind ...

  7. Symbolicating Crash Reports With atos

    地址:0x1000e4000 + 49116 = 0x00000001000effdc都是运行时地址: 0x1000e4000:基址偏移后的地址: 0x100000000: 共知基址:各个环境都知道, ...

  8. vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http: ...

  9. vue04 组件化开发 Vue自动化工具

    5. 组件化开发 5.1 组件[component] 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网 ...

  10. HTML 符号实体

    带有实体名称的 ASCII 实体 结果 描述 实体名称 实体编号 " quotation mark " " ' apostrophe  &apos; ' & ...