分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

extjs tree 添加复选框

发布时间:2023-09-06 01:29责任编辑:郭大石关键词:js

 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性   
   
 扩展的功能点有:   
 一、支持只对树的叶子进行选择   
     只有当返回的树结点属性leaf = true 时,结点才有checkbox可选   
     使用时,只需在声明树时,加上属性 onlyLeafCheckable: true 既可,默认是false   
   
 二、支持对树的单选   
     只允许选择一个结点   
     使用时,只需在声明树时,加上属性 checkModel: "single" 既可   
   
 二、支持对树的级联多选   
     当选择结点时,自动选择该结点下的所有子结点,以及该结点的所有父结点(根结点除外),特别是支持异步,当子结点还没显示时,会从后台取得子结点,然后将其选中/取消选中   
     使用时,只需在声明树时,加上属性 checkModel: "cascade" 既可   
   
 三、添加"check"事件   
     该事件会在树结点的checkbox发生改变时触发   
     使用时,只需给树注册事件,如:   
     tree.on("check",function(node,checked){...});   
   
 默认情况下,checkModel为‘multiple‘,也就是多选,onlyLeafCheckable为false,所有结点都可选   
   
 使用方法:在loader里加上 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 既可.   
 例如:   
    var tree = new Ext.tree.TreePanel({   
       el:‘tree-ct‘,   
       width:568,   
       height:300,   
       checkModel: ‘cascade‘,    //对树的级联多选   
       onlyLeafCheckable: false,//对树所有结点都可选   
       animate: false,   
       rootVisible: false,   
       autoScroll:true,   
       loader: new Ext.tree.DWRTreeLoader({   
           dwrCall:Tmplt.getTmpltTree,   
           baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } //添加 uiProvider 属性   
       }),   
       root: new Ext.tree.AsyncTreeNode({ id:‘0‘ })   
   });   

   tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件

//添加监听 实现复选框的级联

tree.on(‘checkchange‘, function (node, checked) {

    node.expand();

    node.attributes.checked = checked;

    node.eachChild(function (child) {

        child.ui.toggleCheck(checked);

        child.attributes.checked = checked;

        child.fireEvent(‘checkchange‘, child, checked);

    });

}, fileListTree);

extjs tree 添加复选框

原文地址:http://www.cnblogs.com/royal-salute/p/8011971.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved