TREE的使用

基本用法示例：

$('#ul-menu').tree({
         lines: true,
         animate: true,
         data : [
    {
        "text" : "网站管理", 
    "state":"open",
        "children" : [
              {"text" : "网站设置","path" : "/admin/views/web_admin_setsite_list.htm","iconCls":"note_go"}
        ]
    }],
         onClick:function(node){
          if(node.children){
           node.expand();
          }
          else
          admin_module.addTab(node.text.trim(),node.path);
         }
});

异步获取json：（左侧菜单示例）

$.getJSON("/admin/js/menu.js?t=" + (new Date()), function (result) {
        var data =[];
        for (var i = 0; i < result.length; i++) {
            var item = result[i];
            if (item.action) {
                var navname = item.action[0].navname;
                var actiondesc = item.action[0].actiondesc;
                if (navname+actiondesc!='') {
                    if (!web_admin_user_module.checkLimit(navname, actiondesc)) continue;
                }
            }
            if (item.children) {
                var children = [];
                for (var j = 0; j < item.children.length; j++) {
                    var child = item.children[j];
                    var navname = child.action[0].navname;
                    var actiondesc = child.action[0].actiondesc;
                    if (navname+actiondesc!='') {
                        if (!web_admin_user_module.checkLimit(navname, actiondesc)) continue;
                    }
                    children.push(child);
                }
                item.children = children;
            }
            data.push(item);
        }
        $('#ul-menu').tree({
            lines: true,
            animate: true,
            data: data,
            onClick: function (node) {
                if (node.children) {
                    //todo:点文件夹时也能展开列表$('#ul-menu').tree("expand",node);
                }
                else {
                    if (node.path) { //节点支持两种，一种有text path属性，另一种是有module属性。这取决于自己js框架的设计。
                        addTab(node.text.trim(), node.path, null, function (content) {
                            var jsArray = node.path.split('/');
                            var module = jsArray[jsArray.length - 1].replace('.htm', '');
                            require([module], function (module_func) { //这里使用了require.js，可以视实际情况取舍
                                module_func['init'](node, module, content);
                            });
                        });
                    }
                    else {
                        require([node.module], function (module_func) {     <span style="font-family: Arial, Helvetica, sans-serif;">//这里使用了require.js，可以视实际情况取舍</span>
                            var a0, a1, a2, a3;
                            if (typeof(node.arg0)!='undefined') a0 = node.arg0;
                            if (typeof(node.arg1)!='undefined') a1 = node.arg1;
                            if (typeof(node.arg2)!='undefined') a2 = node.arg2;
                            if (typeof(node.arg3)!='undefined') a3 = node.arg3;
                            module_func[node.method](node, node.module,a0,a1,a2,a3);
                        });
                    }
                }
            }
        });
    });


menu.js 

[
  {
      "text": "网站管理", "state": "open", "action": [{ "navname": "网站管理", "actiondesc": "网站管理" }],
      "children": [
              { "text": "网站设置", "path": "/admin/views/web_admin_setsite_list.htm", "iconCls": "file", "action": [{ "navname": "网站管理", "actiondesc": "网站设置" }]}, 
              
      ]
  },
]



属性表：

Name

Type

Description

Default

url

string

远程URL

null

method

string

get 或 post

post

animate

boolean

展开折叠的动画效果

false

checkbox

boolean

显示复选框

false

cascadeCheck

boolean

Defines if to cascade check.

true

onlyLeafCheck

boolean

是否只显示带复选框的节点

false

lines

boolean

显示分隔线

false

dnd

boolean

允许拖动效果

false

data

array

节点数据 $('#tt').tree({

data: [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' },{ text: 'Item12' }] },{ text: 'Item2' }]});

null

queryParams

object

加载远程数据时的query参数

{}

formatter

function(node)

格式化显示的文字

 

filter

function(q,node)

本地数据格式化

 

loader

function(param,success,error)

Defines how to load data from remote server. Return false can abort this action. This function takes the following parameters:

param: the parameter object to pass to remote server.

success(data): the callback function that will be called when retrieve data successfully.

error(): the callback function that will be called when failed to retrieve data.

json loader

loadFilter

function(data,parent)

Return the filtered data to display. The returned data is in standard tree format. This function takes the following parameters:

data: the original data to be loaded.

parent: DOM object, indicate the parent node.

事件：

Name

Parameters

Description

onClick

node

Fires when user click a node. Code example: $('#tt').tree({

onClick: function(node){ alert(node.text); // alert node text property when clicked }});

onDblClick

node

Fires when user dblclick a node.

onBeforeLoad

node, param

Fires before a request is made to load data, return false to cancel this load action.

onLoadSuccess

node, data

Fires when data loaded successfully.

onLoadError

arguments

Fires when data loaded fail, the arguments parameter is same as the 'error' function of jQuery.ajax.

onBeforeExpand

node

Fires before node is expanded, return false to cancel this expand action.

onExpand

node

Fires when node is expanded.

onBeforeCollapse

node

Fires before node is collapsed, return false to cancel this collapse action.

onCollapse

node

Fires when node is collapsed.

onBeforeCheck

node, checked

Fires before users click the checkbox, return false to cancel this check action. Available since version 1.3.1.

onCheck

node, checked

Fires when users click the checkbox.

onBeforeSelect

node

Fires before node is selected, return false to cancel this select action.

onSelect

node

Fires when node is selected.

onContextMenu

e, node

Fires when node is right clicked. Code example: // right click node and then display the context menu

$('#tt').tree({ onContextMenu: function(e, node){ e.preventDefault(); // select the node $('#tt').tree('select', node.target); // display context menu $('#mm').menu('show', { left: e.pageX, top: e.pageY }); }});// the context menu is defined as below:<div id="mm" class="easyui-menu" style="width:120px;"> <div οnclick="append()" data-options="iconCls:'icon-add'">Append</div> <div οnclick="remove()" data-options="iconCls:'icon-remove'">Remove</div></div>

onBeforeDrag

node

Fires when a node's dragging starts, return false to deny drag. Available since version 1.3.2.

onStartDrag

node

Fires when start dragging a node. Available since version 1.3.2.

onStopDrag

node

Fires after stop dragging a node. Available since version 1.3.2.

onDragEnter

target, source

Fires when a node is dragged enter some target node that can be dropped to. return false to deny drop.

target: the target node element to be dropped.

source: the source node being dragged.

Available since version 1.3.2.

onDragOver

target, source

Fires when a node is dragged over some target node that can be dropped to, return false to deny drop.

target: the target node element to be dropped.

source: the source node being dragged.

Available since version 1.3.2.

onDragLeave

target, source

Fires when a node is dragged leave some target node that can be dropped to.

target: the target node element to be dropped.

source: the source node being dragged.

Available since version 1.3.2.

onBeforeDrop

target,source,point

Fires before a node is dropped, return false to deny drop.

target: DOM object, The node being targeted for the drop.

source: the source node.

point: indicate the drop operation, posible values are: 'append','top' or 'bottom'.

Available since version 1.3.3.

onDrop

target,source,point

Fires when a node is dropped.

target: DOM object, The node being targeted for the drop.

source: the source node.

point: indicate the drop operation, posible values are: 'append','top' or 'bottom'.

onBeforeEdit

node

Fires before edit node.

onAfterEdit

node

Fires after edit node.

onCancelEdit

node

Fires when cancel the editing action.

方法：

Name

Parameter

Description

options

none

Return the options of tree.

loadData

data

Load the tree data.

getNode

target

get the specified node object.

getData

target

get the specified node data, including its children.

reload

target

Reload tree data.

getRoot

none

Get the root node, return node object

getRoots

none

Get the root nodes, return node array.

getParent

target

Get the parent node, the target parameter indicate the node DOM object.

getChildren

target

Get the children nodes, the target parameter indicate the node DOM object.

getChecked

state

Get the checked nodes. The state available values are: 'checked','unchecked','indeterminate'. If the state is not assigned, return the 'checked' nodes.

Code example:

var nodes = $('#tt').tree('getChecked'); // get checked nodes

var nodes = $('#tt').tree('getChecked', 'unchecked'); // get unchecked nodesvar nodes = $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodesvar nodes = $('#tt').tree('getChecked', ['checked','indeterminate']); // get checked and indeterminate nodes

getSelected

none

Get the selected node and return it, if no node selected return null.

isLeaf

target

Determine the specified node is leaf, the target parameter indicate the node DOM object.

find

id

Find the specifed node and return the node object. Code example: // find a node and then select it

var node = $('#tt').tree('find', 12);$('#tt').tree('select', node.target);

select

target

Select a node, the target parameter indicate the node DOM object.

check

target

Set the specified node to checked.

uncheck

target

Set the specified node to unchecked.

collapse

target

Collapse a node, the target parameter indicate the node DOM object.

expand

target

Expand a node, the target parameter indicate the node DOM object. When node is closed and has no child nodes, the node id value(named as 'id' parameter) will be sent to server to request child nodes data.

collapseAll

target

Collapse all nodes.

expandAll

target

Expand all nodes.

expandTo

target

Expand from root to specified node.

scrollTo

target

Scroll to the specified node. Available since version 1.3.4.

append

param

Append some children nodes to a parent node. param parameter has two properties:

parent: DOM object, the parent node to append to, if not assigned, append as root nodes.

data: array, the nodes data. Code example: // append some nodes to the selected node

var selected = $('#tt').tree('getSelected');$('#tt').tree('append', { parent: selected.target, data: [{ id: 23, text: 'node23' },{ text: 'node24', state: 'closed', children: [{ text: 'node241' },{ text: 'node242' }] }]});

toggle

target

Toggles expanded/collapsed state of the node, the target parameter indicate the node DOM object.

insert

param

Insert a node to before or after specified node. the 'param' parameter contains following properties:

before: DOM object, the node to insert before.

after: DOM object, the node to insert after.

data: object, the node data.

The code below shows how to insert a new node before the selected node:

var node = $('#tt').tree('getSelected');

if (node){ $('#tt').tree('insert', { before: node.target, data: { id: 21, text: 'node text' } });}

remove

target

Remove a node and it's children nodes, the target parameter indicate the node DOM object.

pop

target

Pop a node and it's children nodes, the method is same as remove but return the removed node data.

update

param

Update the specified node. The 'param' parameter has following properties:

target(DOM object, the node to be updated),id,text,iconCls,checked,etc.

Code example:

// update the selected node text

var node = $('#tt').tree('getSelected');if (node){ $('#tt').tree('update', { target: node.target, text: 'new text' });}

enableDnd

none

Enable drag and drop feature.

disableDnd

none

Disable drag and drop feature.

beginEdit

target

Begin editing a node.

endEdit

target

End editing a node.

cancelEdit

target

Cancel editing a node.

doFilter

text

Do the filter action. Available since version 1.4.2.

Code example:

$('#tt').tree('doFilter', 'easyui');

$('#tt').tree('doFilter', ''); // clear the filter



参考：http://www.jeasyui.com/documentation/index.php#