TopJUI前端框架

Appearance

Tree（树） ​

使用$.fn.iTree.defaults重写默认值对象。

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

依赖关系 ​

使用案例 ​

树控件使用 <ul> 元素定义。标签能够定义分支和子节点。节点都定义在 <ul> 列表内的 <li> 元素中。以下显示的元素将被用作树节点嵌套在 <ul> 元素中。

html
<ul id="tt" data-toggle="topjui-tree">
    <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>

树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

html
<ul id="tt"></ul>
javascript
$('#tt').iTree({
    url:'tree_data.json'
});

使用loadFilter函数处理来自Web Services的JSON数据。

javascript
$('#tt').iTree({
    url: ...,
    loadFilter: function(data){
        if (data.d){
            return data.d;
        } else {
            return data;
        }
    }
});

树控件数据格式化 ​

每个节点都具备以下属性：

  • id：节点ID，对加载远程数据很重要。
  • text：显示节点文本。
  • state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
  • checked：表示该节点是否被选中。
  • attributes: 被添加到节点的自定义属性。
  • children: 一个节点数组声明了若干节点。

一些案例：

javascript
[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

异步树控件 ​

树控件内建异步加载模式的支持，用户先创建一个空的树，然后指定一个服务器端，执行检索后动态返回JSON数据来填充树并完成异步请求。例子如下：

html
<ul data-toggle="topjui-tree" data-options="url:'get_data.php'"></ul>

树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为'id'，通过URL发送到服务器上面检索子节点。

下面是从服务器端返回的数据。

javascript
[{
    "id": 1,
    "text": "Node 1",
    "state": "closed",
    "children": [{
        "id": 11,
        "text": "Node 11"
    },{
        "id": 12,
        "text": "Node 12"
    }]
},{
    "id": 2,
    "text": "Node 2",
    "state": "closed"
}]

节点1和节点2是封闭的，当展开节点1的时候将直接显示它的子节点。当展开节点2的时候它将发送值(2)到服务器获取子节点。

属性 ​

属性名属性值类型描述默认值
urlstring检索远程数据的URL地址。null
methodstring检索数据的HTTP方法。（POST / GET）post
animateboolean定义节点在展开或折叠的时候是否显示动画效果。false
checkboxboolean,function定义是否在每个节点前显示复选框。如果指定了函数，返回true以显示复选框。见下方代码示例。false
cascadeCheckboolean定义是否层叠选中状态。true
onlyLeafCheckboolean定义是否只在末级节点之前显示复选框。false
linesboolean定义是否显示树控件上的虚线。false
dndboolean定义是否启用拖拽功能。false
dataarray节点数据加载。见下方代码示例。null
queryParamsobject在请求远程数据的时候增加查询参数并发送到服务器。{}
formatterfunction(node)定义如何渲染节点的文本。见下方代码示例。false
filterfunction(q,node)定义如何过滤本地展示的数据，返回true将允许节点进行展示。json loader
loaderfunction(param,success,error)定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数：param：发送到远程服务器的参数对象。success(data)：当检索数据成功的时候调用的回调函数。error()：当检索数据失败的时候调用的回调函数。json loader
loadFilterfunction(data,parent)返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数：data：加载的原始数据。parent: DOM对象，代表父节点。

事件 ​

很多事件的回调函数都包含'node'参数，其具备如下属性：

  • id：绑定节点的标识值。
  • text：显示的节点文本。
  • iconCls：显示的节点图标CSS类ID。
  • checked：该节点是否被选中。
  • state：节点状态，'open' 或 'closed'。
  • attributes：绑定该节点的自定义属性。
  • target：目标DOM对象。
事件名事件参数描述
onClicknode在用户点击一个节点的时候触发。见下方代码示例。
onDblClicknode在用户双击一个节点的时候触发。
onBeforeLoadnode, param在请求加载远程数据之前触发，返回false可以取消加载操作。
onLoadSuccessnode, data在数据加载成功以后触发。
onLoadErrorarguments在数据加载失败的时候触发，arguments参数和jQuery的$.ajax()函数里面的'error'回调函数的参数相同。
onBeforeExpandnode在节点展开之前触发，返回false可以取消展开操作。
onExpandnode在节点展开的时候触发。
onBeforeCollapsenode在节点折叠之前触发，返回false可以取消折叠操作。
onCollapsenode在节点折叠的时候触发。
onBeforeChecknode, checked在用户点击勾选复选框之前触发，返回false可以取消选择动作。
onChecknode, checked在用户点击勾选复选框的时候触发。
onBeforeSelectnode在用户选择一个节点之前触发，返回false可以取消选择动作。
onSelectnode在用户选择节点的时候触发。
onContextMenue, node在右键点击节点的时候触发。见下方代码示例。
onBeforeDragnode在开始拖动节点之前触发，返回false可以拒绝拖动。
onStartDragnode在开始拖动节点的时候触发。
onStopDragnode在停止拖动节点的时候触发。
onDragEntertarget, source在拖动一个节点进入到某个目标节点并释放的时候触发，返回false可以拒绝拖动。target：释放的目标节点元素。source：开始拖动的源节点。
onDragOvertarget, source在拖动一个节点经过某个目标节点并释放的时候触发，返回false可以拒绝拖动。target：释放的目标节点元素。source：开始拖动的源节点。
onDragLeavetarget, source在拖动一个节点离开某个目标节点并释放的时候触发，返回false可以拒绝拖动。target：释放的目标节点元素。source：开始拖动的源节点。
onBeforeDroptarget, source, point在拖动一个节点之前触发，返回false可以拒绝拖动。target：释放的目标节点元素。source：开始拖动的源节点。point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。
onDroptarget, source, point当节点位置被拖动时触发。target：DOM对象，需要被拖动动的目标节点。source：源节点。point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。
onBeforeEditnode在编辑节点之前触发。
onAfterEditnode在编辑节点之后触发。
onCancelEditnode在取消编辑操作的时候触发。

方法 ​

方法名方法参数描述
optionsnone返回树控件属性。
loadDatadata读取树控件数据。
getNodetarget获取指定节点对象。
getDatatarget获取指定节点数据，包含它的子节点。
reloadtarget重新载入树控件数据。
getRootnodeEl获取通过"nodeEl"参数指定的节点的顶部父节点元素。
getRootsnone获取所有根节点，返回节点数组。
getParenttarget获取父节点，'target'参数代表节点的DOM对象。
getChildrentarget获取所有子节点，'target'参数代表节点的DOM对象。
getCheckedstate获取所有选中的节点。'state'可用值有：'checked','unchecked','indeterminate'。如果'state'未指定，将返回'checked'节点。见下方代码示例。
getSelectednone获取选择节点并返回它，如果未选择则返回null。
isLeaftarget判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。
findid查找指定节点并返回节点对象。见下方代码示例。
selecttarget选择一个节点，'target'参数表示节点的DOM对象。
checktarget选中指定节点。
unchecktarget取消选中指定节点。
collapsetarget折叠一个节点，'target'参数表示节点的DOM对象。
expandtarget展开一个节点，'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候，节点ID的值(名为'id'的参数)将会发送给服务器请求子节点的数据。
collapseAlltarget折叠所有节点。
expandAlltarget展开所有节点。
expandTotarget打开从根节点到指定节点之间的所有节点。
scrollTotarget滚动到指定节点。
appendparam追加若干子节点到一个父节点，param参数有2个属性：parent：DOM对象，将要被追加子节点的父节点，如果未指定，子节点将被追加至根节点。data：数组，节点数据。见下方代码示例。
toggletarget打开或关闭节点的触发器，target参数是一个节点DOM对象。
insertparam在一个指定节点之前或之后插入节点，'param'参数包含如下属性：before：DOM对象，在某个节点之前插入。after：DOM对象，在某个节点之后插入。data：对象，节点数据。见下方代码示例。
removetarget移除一个节点和它的子节点，'target'参数是该节点的DOM对象。
poptarget移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据。
updateparam更新指定节点。'param'参数包含以下属性：target(DOM对象，将被更新的目标节点)，id，text，iconCls，checked等。见下方代码示例。
enableDndnone启用拖拽功能。
disableDndnone禁用拖拽功能。
beginEdittarget开始编辑一个节点。
endEdittarget结束编辑一个节点。
cancelEdittarget取消编辑一个节点。
doFiltertext过滤操作，和filter属性功能类似。见下方代码示例。

属性代码示例 ​

checkbox属性示例：

javascript
$('#tt').iTree({
    checkbox:function(node){
        if (node.id == 11 || node.id == 122){
            return true;
        }
    }
})

data属性示例：

javascript
$('#tt').iTree({
    data: [{
        text: 'Item1',
        state: 'closed',
        children: [{
            text: 'Item11'
        },{
            text: 'Item12'
        }]
    },{
        text: 'Item2'
    }]
});

formatter属性示例：

javascript
$('#tt').iTree({
    formatter:function(node){
        return node.text;
    }
});

事件代码示例 ​

onClick事件示例：

javascript
$('#tt').iTree({
    onClick: function(node){
        alert(node.text);  // 在用户点击的时候提示
    }
});

onContextMenu事件示例：

javascript
// 右键点击节点并显示快捷菜单
$('#tt').iTree({
    onContextMenu: function(e, node){
        e.preventDefault();
        // 查找节点
        $('#tt').iTree('select', node.target);
        // 显示快捷菜单
        $('#mm').iMenu('show', {
            left: e.pageX,
            top: e.pageY
        });
    }
});
html
// 右键菜单定义如下：
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
    <div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>

方法代码示例 ​

getChecked方法示例：

javascript
var nodes = $('#tt').iTree('getChecked');	// get checked nodes
var nodes = $('#tt').iTree('getChecked', 'unchecked');	// 获取未选择节点
var nodes = $('#tt').iTree('getChecked', 'indeterminate');	// 获取不确定的节点
javascript
var nodes = $('#tt').iTree('getChecked', ['unchecked','indeterminate']);

find方法示例：

javascript
// 查找一个节点并选择它
var node = $('#tt').iTree('find', 12);
$('#tt').iTree('select', node.target);

append方法示例：

javascript
// 追加若干个节点并选中他们
var selected = $('#tt').iTree('getSelected');
$('#tt').iTree('append', {
    parent: selected.target,
    data: [{
        id: 23,
        text: 'node23'
    },{
        text: 'node24',
        state: 'closed',
        children: [{
            text: 'node241'
        },{
            text: 'node242'
        }]
    }]
});

insert方法示例：

javascript
var node = $('#tt').iTree('getSelected');
if (node){
    $('#tt').iTree('insert', {
        before: node.target,
        data: {
            id: 21,
            text: 'node text'
        }
    });
}
javascript
var node = $('#tt').iTree('getSelected');
if (node){
    $('#tt').iTree('insert', {
        before: node.target,
        data: [{
            id: 23,
            text: 'node23'
        },{
            text: 'node24',
            state: 'closed',
            children: [{
                text: 'node241'
            },{
                text: 'node242'
            }]
        }]
    });
}

update方法示例：

javascript
// 更新选择的节点文本
var node = $('#tt').iTree('getSelected');
if (node){
    $('#tt').iTree('update', {
        target: node.target,
        text: 'new text'
    });
}

doFilter方法示例：

javascript
$('#tt').iTree('doFilter', 'easyui');
$('#tt').iTree('doFilter', '');	// 清除过滤器

基于最新稳定版jQuery EasyUI构建的前端框架

Copyright © 2024 TopJUI