jQueryEasyUI를 사용하는 방법은 실제로 매우 간단합니다. 처음 사용시에는 여전히 문제가 있어서 간단한 예제를 만들어서 문서를 복사했습니다.
페이지 코드:
<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: 노드에 바인딩된 식별 값입니다.
텍스트: 표시되는 텍스트입니다.
선택됨: 노드가 선택되었는지 여부.
속성: 노드에 바인딩된 사용자 정의 속성입니다.
target: 대상의 DOM 개체입니다.