jQueryEasyUI 사용 분석-JS 튜토리얼-php.cn

jQueryEasyUI 사용 분석

高洛峰

풀어 주다： 2016-12-05 15:49:36

원래의

1133명이 탐색했습니다.

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 사용 분석

위 예제에는 jQueryEasyUI 메서드 호출이 매우 이상합니다. 🎜>

alert($("#Tree").tree(&#39;getRoot&#39;).text);　　　　//调用getRoot方法
$("#Tree").tree(&#39;collapseAll&#39;);　　　　　　　　 //调用collapseAll方法

로그인 후 복사

매개변수:

jQueryEasyUI 사용 분석

이벤트

많은 이벤트 콜백 함수에는 'node' 함수에는 다음 속성이 포함됩니다.

id: 노드에 바인딩된 식별 값입니다.

텍스트: 표시되는 텍스트입니다.
선택됨: 노드가 선택되었는지 여부.
속성: 노드에 바인딩된 사용자 정의 속성입니다.
target: 대상의 DOM 개체입니다.

jQueryEasyUI 사용 분석

방법

jQueryEasyUI 사용 분석