zoukankan      html  css  js  c++  java
  • 树TreePanel

    概要

    1、TreePanel简介
    2、树节点
    3、同步树
    4、异步树
    5、树加载器
                  

    1、树控件的简单应用

    树控件由Ext.tree.TreePanel类定义,控件的名称为treepanel,TreePanel类继承自Panel面板。在ExtJS中使用树控件其实非常简单,我们先来看下面的代码:

    <script type="text/javascript">
    Ext.onReady(
    function(){
    var root=new Ext.tree.TreeNode({
    id:
    "root",
    text:
    "树的根"
    });

    root.appendChild(
    new Ext.tree.TreeNode({
    id:
    "c1",
    text:
    "子节点"
    })
    );

    var tree=new Ext.tree.TreePanel({
    renderTo: Ext.getBody(),
    root:root,
    100
    });

    });
    </script>
    运行结果如下:
    2、树节点Ext.tree.TreeNode

    TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等。

    3、异步树Ext.tree.AsyncTreeNode

    在很多时候,树的节点是动态产生的,也就是需要从服务器端的一个url中获得树的节点信息。ExtJS的树控件提供了对这种功能的支持,你只需要在创建树控件的时候,通过给树指定一个节点加载器,就可以从服务器端动态加载树的节点信息。我们来看下面的代码:

    <script type="text/javascript">
    Ext.onReady(
    function(){
    var root=new Ext.tree.AsyncTreeNode({
    id:
    "root",
    text:
    "树的根"
    });

    var tree=new Ext.tree.TreePanel({
    renderTo: Ext.getBody(),
    root: root,
    loader:
    new Ext.tree.TreeLoader({url: "treedata.js" }),
    150
    });

    });
    </script>
                  

    treedata.js这个url返回的内容如下:

    [{
    id:
    1,
    text:
    '子节点1',
    leaf:
    true
    },{
    id:
    2,
    text:
    '儿子节点2',
    children: [{
    id:
    3,
    text:
    '孙子节点',
    leaf:
    true
    }]
    }]

    4、树加载器Ext.tree.TreeLoader

    凡是异步树节点,都需指定一个树加载器,TreeLoader会根据需要,通过Ajax的方式自动从指定的url或内存中加载树节点信息。

    可以在准备加载一个树节点之前,更改TreeLoader的相关信息,示例:

    myTreeLoader.on("beforeload", function(treeLoader, node) {this.baseParams.category = node.attributes.category;}, this);

  • 相关阅读:
    HTML5 ViewPort 资料收集
    [ASP.NET 技术点滴] Jquery 前端验证
    [转帖]Asp.NET 弹出页面
    [转]ASP.NET 页生命周期概述
    C#时间转整型(时间戳),模仿php strtotime函数的部分功能
    [转]使用微软的官方类库CHSPinYinConv获得汉字拼音
    [转]ASP.NET数据库连接字符串总结
    gradle 生成 pom,引用mybatis-plus源代码到自己的工程中
    困扰的问题终于解决了-docker时区不正确的问题修改记
    mybatis plus3.1.0 热加载mapper
  • 原文地址:https://www.cnblogs.com/linjiqin/p/2088999.html
Copyright © 2011-2022 走看看