• ExtJs开发教程_002_如何使用ExtJs中的Ext.data.TreeStore


    介绍Ext.data.TreeStore:

    这个组件继承自Ext.data.AbstractStore

    本篇讲解了如何构造并且做一些基本使用,如果有什么疑问可以联系我QQ1330771552

    首先还是介绍下这个控件内部属性。对每一个属性做一下分析。

    autoLoad:
        自动加载,实际上你会发现在Ext4.X中这个属性没有多少意义,后面会做解释。
    autoSync:
        自动同步,比如我们用普通editingGrid的时候,修改了数据自动保存到store(不是保存到后台)
    clearOnLoad:
        在加载之前删除原来的所有子节点,可能在4.X中都会遇到tree第二次加载的时候数据重复,造成混乱,你可以试试这个属性。
    clearRemovedOnLoad:
        你加载一个节点的时候,会自动把已经删除的节点记录清除,可以参考getRemovedRecords() 函数
    defaultRootId:
        默认的根节点(root)id,这个是在异步加载树种很重要的,就是展开根节点的时候向后台发送请求的参数(稍后讲解)
    defaultRootProperty:
        子节点的属性名,用处不大。就是修改什么属性作为子节点解析用的。
    fields:
        属性域,跟Ext.data.Store的fields一样使用。
    filters:
        过滤器。
    folderSort:
        排序,设置为true自动为子节点排序
    listeners:
        监听器。定义触发事件。
    model:
        跟Ext.data.Store的model一样。
    nodeParam:
        节点参数,注意这个是参数名,defaultRootId是参数值。
    proxy:
        数据代理。这个跟Ext.data.Store一样。
    root:
        根节点,ExtJs的树允许你设置一个默认的根节点,也就是说不加载数据的情况下会显示这个作为基础的节点。通常我们使用这个节点代替treePanel的title。用来标示这棵树的目的。
    storeId:store的唯一性标示,便于Ext.data.StoreManager管理,可以参看Ext.data.StoreManager. lookup( String/Object store ) : Ext.data.Store
    
    说实话,这些属性有的我也没用过,太多了,记不过来。

    下面给出一棵树的完整代码

    var oaStore = Ext.create('Ext.data.TreeStore', {
                    // 根节点的参数是parentId
                    nodeParam : 'parentId',
                    // 根节点的参数值是0
                    defaultRootId : 0,
                    // 属性域
                    fields : [{
                                name : 'className',
                                type : 'string'
                            }, {
                                name : 'text',
                                type : 'string'
                            }, {
                                name : 'iconCls',
                                type : 'string'
                            }],
                    // 数据代理
                    proxy : {
                        // 请求方式
                        type : 'ajax',
                        // 请求网址
                        url : GET_FUNCTION_NODE_URL
                    }
                });

    上面是一棵树的代码,下面是分析代码

    nodeParam : 'parentId',就是指定这棵树的根节点属性参数名。

    defaultRootId : 0,就是制定这棵树的根节点参数值。

     

    Ext.data.TreeStore默认是每个节点都带有id属性的。比如如下json

    {id:’1’,className:’Ext.le.MyView’,text:’我的视图’,iconCls:’icon_depart’}

    这个json是能解析到id属性的,你获取了store某条record直接.get(‘id’)就会有值。就是1

     

    ExtJs的tree在点击可以展开的节点的时候,会向后台发送请求,请求的url就是proxy里面的url,同时还会带上参数参数就是当前点击节点的id(就是上面说的id)。

    注意:当然Ext很智能,当你的树的某个节点已经有子节点了的情况下,他不会去发送请求获取子节点的。

    事实上刚才的store在我的项目里面读取了这样一个json结构

      [{
    
               "children" : [{...}, {...}],
               "className" : "","expandable" : true,
               "expanded" : false,
               "functionNodeName" : "人事管理",
               "iconCls" : "",
               "id" : 1,
               "leaf" : false,
               "memo" : "","parentId" : 0,
               "primaryKey" : 1,
               "text" : "人事管理"
    
           }]

    其中的expandable就是控制这个节点可以展开的。有了他节点就会可以展开(也就是有效箭头或者“+”图标在旁边),并且会发送请求子节点。

    想想,后台能获取当前点击的那个节点的id,想得到子节点很容易了,

    注意:expandable属性和children属性有这样的冲突,当children属性是array([])长度是0的时候,expandable被视为false,也就是说记载的数据有0个children就认为不可以展开

    select * from department where parentId=````````聪明的你懂的。

    这样就能构成异步树。

    这棵树如何被应用到panel中呢

    事实上你只需要这样的代码就能完成。

                  {
                                title : '模块菜单',
                                xtype : 'treepanel',
                                rootVisible : false,
                                store : oaStore,
                                useArrows : true
                            }

      看看,是不是很简单,一个标题,一个xtype,rootVisible属性控制能不能看到根节点,关于这个属性,其实就是控制是否显示你默认的那个根节点,其实如果你的根节点expanded属性(是否已经展开)是false然后treePanel rootVisible是false那么你的树在页面渲染完成的时候是什么也看不到的。而且你可能无法看到,至少你应该允许看到根节点,然后打开根节点才能看到下面的内容,或者你的根节点隐藏,默认根节点已经展开。

      刚才的treePanel是个不完整的例子,是json格式的,下面给出Ext.create格式

      不要误会,这个跟上面的store没有任何关系

        var deptGrid = Ext.create('Ext.tree.Panel', {
                store : deptStore,
                useArrows : true,//展开按钮图标是箭头还是+-
                rootVisible : true,//允许看到跟节点
                columns : deptColumns(),//构造列
                tbar : deptTbar,//不解释
                padding : 5,//不解释
                columnLines : true,//列分割线
            });

    这是一个非常基础的列子,还带了一些没用的属性,不解释的就是么哦用的属性,可有可无包括columns

    如果你不写columns会默认使用text、id等这些默认属性,详细可以参看Ext.data.NodeInterface和Ext.tree.Panel后续章节会讲解这些相关控件。

    这棵树能做到什么效果呢?

    很简单,默认记载好的树,只呈现最基本的节点,当你点击可展开的节点的时候会去请求后台加载其子节点,发送的url大致如下

    下面是googleChrome中netWork监控得到的请求,这个请求拦截于我展开一个节点的时候发生的。

    1. 1.     Request URL:

    http://localhost:8080/struts2Stu/FunctionNodeController/selAllFunction.action?_dc=1344480677744&parentId=1

    1. 2.     Request Method:

    GET

    1. 3.     Status Code:

    200 OK

    1. 1.     Query String Parameters
      1. 1.     _dc:

    1344480677744

    1. 2.     parentId: (看到这个属性没有,就是我们自己定义的nodeParam

    1

    注意这个url

    http://localhost:8080/struts2Stu/FunctionNodeController/selAllFunction.action?_dc=1344480677744&parentId=1

     

    http://localhost:8080/struts2Stu/FunctionNodeController/selAllFunction.action到这里是我的后台地址。

    后面的_dc=1344480677744是用来做唯一标示不造成缓存。

    parentId=1 这个就是Ext帮助我们构造异步加载树的参数。

    至于如何不异步加载,你可以直接把json构造好树的样子,子节点使用children标示.

    给出一个同步加载的json例子

    [{
                "children" : [{
                            "children" : [{
                                        "children" : [],
                                        "companyName" : "123asd",
                                        "deleter" : 0,
                                        "departmentName" : "123asds",
                                        "duty" : "sa",
                                        "expandable" : true,
                                        "expanded" : false,
                                        "id" : 4,
                                        "leader" : 1,
                                        "leaf" : true,
                                        "memo" : "ad",
                                        "primaryKey" : 4,
                                        "text" : "123asds"
                                    }, {
                                        "children" : [],
                                        "companyName" : "爱上",
                                        "departmentName" : "爱上",
                                        "duty" : "阿斯达",
                                        "expandable" : true,
                                        "expanded" : false,
                                        "id" : 3,
                                        "leader" : 1,
                                        "leaf" : true,
                                        "memo" : "阿斯达",
                                        "parentId" : 2,
                                        "primaryKey" : 3,
                                        "text" : "爱上"
                                    }],
                            "companyName" : "叶子公司",
                            "departmentName" : "大陆分公司",
                            "duty" : "没职位",
                            "expandable" : true,
                            "expanded" : false,
                            "id" : 2,
                            "leader" : 1,
                            "leaf" : false,
                            "memo" : "没有",
                            "primaryKey" : 2,
                            "text" : "大陆分公司"
                        }],
                "companyName" : "叶子集团",
                "deleter" : 0,
                "departmentName" : "大陆总公司",
                "duty" : "总职务",
                "expandable" : true,
                "expanded" : false,
                "id" : 1,
                "leader" : 1,
                "leaderName" : "",
                "leaf" : false,
                "memo" : "没有备注",
                "primaryKey" : 1,
                "text" : "大陆总公司"
            }]
    
    这样结构是json会直接呈现所有的节点。
  • 相关阅读:
    利用Github Actions自动保持 GitHub 提交状态常绿
    windows下搭建轻量级php代码审计环境
    jquery实现点击弹出对话框
    redis学习记录(1)Redis简介
    StatefulSet
    Pod
    Spark 写Hive指定动态分区
    我常用的git操作
    在C#中如何使用GetOpenFileName函数多选文件
    image matching challenge
  • 原文地址:https://www.cnblogs.com/mrye/p/2629895.html
Copyright © 2020-2023  润新知