使用EasyUI最好的方法不是学会，所有的东西都敲一遍，你也没办法敲得完，而是找到一个好的文档。
jQueryEasyUI的使用方法其实非常简单。在第一次使用中，也还是碰到了些问题，特地做了一个简单的示例，然后复制过来文档。
页面代码：
<html> <head> <title>jQuery EasyUI学习</title> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <link href="" type="text/css" /> <link href="" type="text/css" /> <script type="text/javascript"> $(function() { $("#Tree").tree({ url: "/Home/GetJson", onClick: function(node) { alert(node.text); } }) }) </script> </head> <body> <ul> </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方法
参数：
名称 类型 说明 默认值 url string 获取远程数据的 URL 。 null method string 获取数据的 http method 。 post animate boolean 定义当节点展开折叠时是否显示动画效果。 false checkbox boolean 定义是否在每个节点前边显示 checkbox 。 false cascadeCheck boolean 定义是否级联检查。 true onlyLeafCheck boolean 定义是否只在叶节点前显示 checkbox 。 false dnd boolean 定义是否启用拖放。 false data array 加载的节点数据。 null
事件
很多事件的回调函数需要 'node' 函数，它包含下列特性：
id：绑定到节点的标识值。
text：显示的文字。
checked：是否节点被选中。
attributes：绑定到节点的自定义属性。
target：目标的 DOM 对象。
名称 参数 说明 onClick node 当用户点击一个节点时触发， node 参数包含下列特性： onDblClick node 当用户双击一个节点时触发。 onBeforeLoad node, param 当加载数据的请求发出前触发，返回 false 就取消加载动作。 onLoadSuccess node, data 当数据加载成功时触发。 onLoadError arguments 当数据加载失败时触发， arguments 参数与 jQuery.ajax 的'error' 函数一样。. onBeforeExpand node 节点展开前触发，返回 false 就取消展开动作。 onExpand node 当节点展开时触发。 onBeforeCollapse node 节点折叠前触发，返回 false 就取消折叠动作。 onCollapse node 当节点折叠时触发。 onCheck node, checked 当用户点击 checkbox 时触发。 onBeforeSelect node 节点被选中前触发，返回 false 就取消选择动作。 onSelect node 当节点被选中时触发。 onContextMenu e, node 当右键点击节点时触发。 onDrop target, source, point
id：节点的 id
text：节点的文字
checked：节点是否被选中
attributes：节点自定义属性
target：被点击目标的 DOM 对象