`
PrideSnow
  • 浏览: 240895 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

Ext 树的级联选择扩展插件使用说明

EXT 
阅读更多

插件文件见附件!
插件:TreeCheckNodeUI.js
作用:对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,用于树节点前面加复选框,并且实现级联选择

扩展的功能点有:
一、支持只对树的叶子进行选择
只有当返回的树结点属性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.render();

温馨说明

如果要让节点默认选中,直接在后台组装数据,让数据对象的checked=true就可以了

对于树的一些操作方法
//清空所有复选框
function clearChildNodeChecked(node){
    if(node.childNodes.length!=0){
        for(var i=0;i<node.childNodes.length;i++){
            node.childNodes[i].getUI().checkbox.checked=false;
            node.childNodes[i].attributes.checked=false;
            clearChildNodeChecked(node.childNodes[i]);
        }
    }
}
/**
* 取得所有子节点中checked 为true的节点
* 包括本节点
*/
function getCheckedNodes(node){
 var checked = [];
 if( node.attributes.funId=='0' || node.getUI().isChecked() || node.attributes.checked ) {
  if(node.attributes.funId!='0'){
   checked.push(node);
  }
  if( !node.isLeaf() ) {
   for(var i = 0; i < node.childNodes.length; i++ ) {
    checked = checked.concat( getCheckedNodes(node.childNodes[i]) );
   }
  }
 }
 return checked;
};

分享到:
评论

相关推荐

    Ext TreePanelrcheckbox级联选择的实现

    总之,“Ext TreePanelrcheckbox级联选择的实现”涉及了ExtJS的TreePanel组件和复选框模型的使用,通过监听事件和自定义逻辑实现了节点间的选择级联。这种功能在具有层级结构的数据选择场景中非常常见,如权限管理、...

    ext 级联选择的树形控件

    5. **数据绑定**:树形控件的数据通常是动态加载的,EXT使用Store来管理这些数据,可以与服务器进行异步通信,更新或获取树的结构和状态。 6. **自定义渲染**:EXT允许开发者自定义节点的显示样式和行为,比如通过...

    cascaderjs级联选择器

    级联选择器,通常被称为级联下拉框或树形下拉菜单,是一种常见的用户界面元素,尤其在数据层次结构复杂的情况下,它允许用户逐级浏览和选择数据。在JavaScript开发中,这种组件能够为用户提供清晰、直观的导航体验,...

    基于vue20实现的级联选择器

    在"基于vue20实现的级联选择器"项目中,我们将会深入探讨如何使用 Vue.js v2.0 版本来构建一个功能丰富的级联选择器组件。这个组件能够支持单级、二级、三级乃至多级的级联效果,为用户提供了灵活的数据选择体验。 ...

    ExtJS4.2 tree 级联选择

    在ExtJS库中,Tree组件允许我们展示和操作数据以树形结构显示,而级联选择功能则意味着当用户选择一个节点时,它的所有子节点也会被自动选中,反之亦然,如果取消选中父节点,其所有子节点也将被取消选中。...

    layui多选级联选择器

    在layui中,级联选择器是一种常用于数据层级关系展示和选择的组件,尤其适用于地区选择、部门结构等场景。本篇文章将深入探讨layui的多选级联选择器及其无限级联功能。 首先,我们要理解什么是级联选择器。级联选择...

    Ext combo 下拉框级联

    标题中的"Ext combo 下拉框级联"指的是在Ext JS框架中使用Combobox组件创建级联下拉框的功能。Ext JS是一个强大的JavaScript UI库,提供了丰富的组件模型和数据绑定机制,用于构建复杂的Web应用程序。 首先,我们...

    react级联选择器/支持多选/单选

    6. **PopOver组件**:文件名`react-cascader-popover-master`暗示了可能使用了Popover弹出层组件来显示级联选择器。Popover常用于创建浮层效果,当用户点击或 hover 时出现,提供额外信息或交互。 7. **优化与性能*...

    jQuery城市级联插件

    jQuery城市级联插件是一种基于JavaScript库jQuery的交互式组件,主要用于实现网页上的地区选择功能。这个插件通常被用于在线表单、地址输入或地理位置相关的应用中,它能够为用户展示一个层次化的城市选择菜单,使...

    基于Bootstrap的级联选择树

    在这个"基于Bootstrap的级联选择树"项目中,我们主要关注的是如何利用Bootstrap的特性来实现一个具有级联选择功能的树视图。级联选择允许用户在多个相关选项间进行递进式的选择,这样的交互方式常见于层次结构数据的...

    Ext级联菜单实例

    在IT行业中,级联菜单(Cascading Menu)是一种常见的用户界面元素,它允许用户从一个主菜单项中选择一个子菜单项,然后可能还有更深层次的子菜单。这种交互方式在网页应用、桌面软件以及各种图形用户界面中非常常见...

    ExtJs4.1.1a 异步树&级联选择

    说明:本例主要实现在树节点数据过多的情况下对数据进行异步请求,并且在请求数据返回前台的同时实现级联选择。使用ExtJs版本为4.1.1a,在struts2下测试通过。例子仅供提供思路,简单易懂,不负责代码优化,哈哈!

    js级联插件

    级联插件(Cascading Plugin)在JS中通常指的是能够实现下拉菜单、级联选择等功能的组件。这类插件极大地提高了用户体验,让用户能够通过交互式界面轻松地浏览和选择复杂的数据结构。 级联插件的核心特性是它能够...

    select 无限级联 Jquery 插件

    网页应用中,多个select之间级联刷新是很常见的一个需求,本插件充份运用jquery强大的脚本功能,并运用json实现数据交互,实现了select无限级联的功能,接口调用简洁,刷新功能配置灵活,参数强大, 支持select元素...

    2020-06 iview级联选择器-省市区三级联动

    2020-06 iview级联选择器-省市区三级联动js文件下载 2020-06 iview级联选择器-省市区三级联动js文件下载

    H5城市级联插件

    【H5城市级联插件】是一种基于HTML5技术实现的交互式用户界面组件,它主要用于在网页上展示城市选择的级联下拉菜单。这种插件在网站中广泛使用,尤其是在需要用户填写地址信息或者根据地理位置提供服务的场景下。它...

Global site tag (gtag.js) - Google Analytics