JS前端框架5 EasyUI基本使用(Tree)

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 onclick="append()" data-options="iconCls:'icon-add'">Append</div> <div onclick="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 nodes var nodes = $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodes var 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#