首页 > 网络拾遗 > jQuery EasyUI 中文文档（DataGrid and Tree：Tree）

jQuery EasyUI 中文文档（DataGrid and Tree：Tree）

2010年5月13日 发表评论 阅读评论

Usage

Markup

Tree can be definded in <ul/> element. The markup can defines leaf and children, bellow is an example: 树可以definded在 <ul/> 元素。 该标记可以定义叶和儿童，贝娄是一个例子：

<ul id="tt">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li>
                        <span><a href="#">File 11</a></span>
                    </li>
                    <li>
                        <span>File 12</span>
                    </li>
                    <li>
                        <span>File 13</span>
                    </li>
                </ul>
            </li>
            <li>
                <span>File 2</span>
            </li>
            <li>
                <span>File 3</span>
            </li>
        </ul>
    </li>
    <li>
        <span>File21</span>
    </li>
</ul>

Tree can also be defined in an empty <ul/> element: 树也可以定义在一个空 <ul/> 元素：

<ul id="tt"></ul>

jQuery

$('#tt').tree(options);

Tree data format 树中的数据格式

Every node can contains following properties: 每个节点可以包含以下属性：

  • text: node text to show 文字：节点的文本显示
  • id: node id, which is important to load remote data 编号：节点ID，这是很重要的远程数据加载
  • state: node state, ‘open’ or ‘closed’, default is ‘open’. When set to ‘closed’, the node have children nodes and will load them from remote site 状态：节点状态，’打开’或’关闭’，默认是’打开’。当设置为’关闭’，该节点有子节点，并将它们加载远程站点
  • attributes: custom attributes can be added to a node 属性：自定义属性可以被添加到一个节点
  • children: an array nodes defines some children nodes 子节点：一个数组节点定义了一些子节点

Some example:

[{
    text:'Folder1',
    iconCls:'icon-save',
    children:[{
        text:'File1'
    },{
        text:'Books',
        state:'open',
        attributes:{
            url:'/demo/book/abc',
            price:100
        },
        children:[{
            text:'PhotoShop'
        },{
            id: 8,
            text:'Sub Bookds',
            state:'closed'
        }]
    }]
},{
    text:'File2'
}]

Dependencies

none

Options

Override defaults with $.fn.tree.defaults.

Tree Node is a javascript object which contains following properties: 树节点是一个JavaScript对象，它包含以下属性：

  • id: An identity value bind to the node. 编号：一个标识值绑定到该节点。
  • text: Text to be showed. 文本：文本将显示。
  • attributes: Custom attributes bind to the node. 属性：自定义属性绑定到该节点。
  • target: Target DOM object. 目标：目标的DOM对象。

Properties

Name Type Description Default
url string a URL to retrive remote data. 一个网址retrive远程数据。 null
animate boolean Defines if to show animation effect when node expand or collapse. 如果定义动画效果时显示节点展开或折叠。 false

Events

Name Parameters Description
onClick node Fires when user click a node, the node parameter contains following properties: 触发时，用户点击一个节点，该节点参数包含以下属性：
id: the node id 编号：节点ID
text: the node text 文字：节点的文本
attributes: the node custom attributes 属性：节点自定义属性
target: the target clicked DOM object 目标：点击DOM对象的目标
onLoadSuccess arguments Fires when data loaded successfully, the arguments parameter is same as the ’success’ function of jQuery.ajax. 触发成功加载数据时，参数参数的’成功’的jQuery.ajax函数相同。
onLoadError arguments Fires when data loaded fail, the arguments parameter is same as the ‘error’ function of jQuery.ajax. 数据加载失败时触发，参数参数的’错误’的jQuery.ajax函数相同。

Methods

Name Parameter Description
reload none Reload tree data. 重新加载树的数据。
getSelected none Get the selected node and return it, if no node selected return null. 获取选中的节点，并返回它，如果没有节点选择返回null。
select target Select a node, the target parameter indicate the node DOM object. 选择一个节点，目标参数表明该节点的DOM对象。
collapse target Collapse a node, the target parameter indicate the node DOM object. 折叠节点，目标参数表明该节点的DOM对象。
expand target Expand a node, the target parameter indicate the node DOM object. 展开一个节点，目标参数表明该节点的DOM对象。
append param Append some children nodes to a parent node. param parameter has two properties: 一些子节点追加到父节点。参数有两个属性：
parent: DOM object, the parent node to append to. 父节点：DOM对象，父节点追加。
data: array, the nodes data. 数据：数组，节点数据。
remove target Remove a node and it’s children nodes, the target parameter indicate the node DOM object. 删除一个节点和它的子节点，目标参数表明该节点的DOM对象。

原文页面：http://jquery-easyui.wikidot.com/document:tree

分类: 网络拾遗 标签: , , , ,
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.