首页 教程 API文档

树组件

2015-10-30 11:02:13

属性


父模块 widget
依赖组件 Menu
Demo地址 Tree

描述


树组件

树组件图片

成员列表


方法名称 成员类型 描述
treeItem 内部模块 树节点模块
selectionMode public 节点选择模式
editable public 树节点是否可编辑的
itemHeight public 树节点高度
insertBefore public 在指定节点之前插入节点
insertAfter public 在指定节点之后插入节点
checkable public 树节点拥有复选框
expandAll public 展开所有节点
collapseAll public 折叠所有节点
map public 获取ID对应的节点地图
count public 获取子节点的数量
types public 节点类型
append public 追加子节点
insert public 插入子节点
clearSelected public 清除所有已选择状态
clearChecked public 清除所有已勾选状态
clear public 清空所有子节点
remove extend 移除子节点或自身

参数选项


名称 类型 默认值 描述
defaultClass String StdUI_Tree 树的默认class名称
level Number 4 默认布局等级
items Array null 需要添加的树的子节点数据,对应append方法
expanded Boolean false 节点是否展开的
checkable Boolean false 节点是否拥有勾选框
editable Boolean false 节点是否可以被编辑的
droppable Boolean false 节点是否可以被拖动的
itemHeight Number 20 节点高度
itemContextMenu Object null 节点的上下文菜单(右键菜单)
selectionMode String items

节点的选择模式,取值范围有:

名称 描述
item 只能选择单个节点
items 可以通过按下ctrl键选择多个节点
checkedItems 只有勾选中的节点会被选中
none 节点不能被选中

事件


名称 回调参数 描述
clear 当清空节点的时候,执行clear方法的时候,clear事件会被触发
selectionModeChange String:当前改变之后的选择模式 当选择模式被改变的时候,selectionModeChange事件会被触发
itemPositionChange
名称 描述
sourceItem 拖动的那个节点的对象
currentItem 目标节点对象
type 类型,有3种,1:before 插入到目标节点之前,2:after 插入到目标节点之后,3:in 插入到目标节点里面
当节点的位置被拖动改变的时候,itemPositionChange事件会被触发
itemClick
名称 描述
node 节点对象
e 点击的事件对象
当节点被点击的时候,itemClick事件会被触发
itemDblClick
名称 描述
node 节点对象
e 点击的事件对象
当节点被双击的时候,itemDblClick事件会被触发
itemRename
名称 描述
node 节点对象
value 编辑之后的文字
text 被编辑之前的文字
当节点被手动编辑之后,该事件会被触发
itemChecked Boolean: 节点勾选状态 当节点被勾选或者取消勾选的时候,itemChecked事件会被触发

相关例子



Std.ui("Tree",{
    renderTo:"body",
    width:300,
    height:400,
    checkable:true,
    editable:true,
    droppable:true,
    selectionMode:"item",
    types:{
        root:{
            icon:"images/root.png"
        },
        folder:{
            icon:"images/folder.png"
        },
        file:{
            icon:"images/file.png"
        }
    },
    items:[
        {
            id:1,
            type:"folder",
            text:"item_1",
            items:[
                {
                    type:"file",
                    text:"item_1_1"
                },
                {
                    type:"file",
                    text:"item_1_2"
                }
            ]
        },
        {
            id:2,
            type:"folder",
            text:"item_2",
            items:[
                {
                    type:"file",
                    text:"item_2_1"
                },
                {
                    type:"file",
                    text:"item_2_2"
                }
            ]
        },
        {
            id:3,
            type:"folder",
            text:"item_3"
        },
        {
            id:4,
            type:"folder",
            text:"item_4"
        }
    ],
    plugins:{
        contextMenu:{
            items:[
                {text:"asdasd"},{text:"dddddddd"}
            ]
        }
    }
});