页面代码：
<html> <head> <title>jquery easyui学习</title> <script src="../../scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="../../scripts/jquery.easyui.min.js" type="text/javascript"></script> <link href="../../themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../../themes/icon.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() { $("#tree").tree({ url: "/home/getjson", onclick: function(node) { alert(node.text); } }) }) </script> </head> <body> <ul id="tree"> </ul> </body> </html>
后台代码：
public class homecontroller : controller { public actionresult index() { return view(); } public actionresult about() { return view(); } public actionresult getjson() { node node4 = new node(4, "java从入门到精通", "open", null); node node5 = new node(5, "30天精通c#", "open", null); list<node> listnode2 = new list<node>() { node4 }; list<node> listnode3 = new list<node>() { node5 }; node node2 = new node(2, "java分类", "closed", listnode2); node node3 = new node(3, "c#分类", "closed", listnode3); list<node> listnode1 = new list<node>() { node2, node3 }; node node1 = new node(1, "图书分类", "closed", listnode1); list<node> listnode0 = new list<node>() { node1 }; return json(listnode0, jsonrequestbehavior.allowget); } } public class node { public node(int id,string text,string iconcls, list<node> children) { id = id; text = text; iconcls = iconcls; children = children; } public int id { get; set; } public string text { get; set; } public string iconcls { get; set; } public list<node> children { get; set; } }
显示效果如下：
上面的示例中没有方法的调用示例，jqueryeasyui方法的调用很奇葩的说，如：
alert($("#tree").tree('getroot').text);//调用getroot方法 $("#tree").tree('collapseall'); //调用collapseall方法
参数：
事件
很多事件的回调函数需要 'node' 函数，它包含下列特性：
id：绑定到节点的标识值。
text：显示的文字。
checked：是否节点被选中。
attributes：绑定到节点的自定义属性。
target：目标的 dom 对象。
方法