Home > Article > Web Front-end > Analyze the use of jQueryEasyUI

Analyze the use of jQueryEasyUI

高洛峰Original: 2016-12-05 15:49:361108browse

　The use of jQueryEasyUI is actually very simple. In the first use, I still encountered some problems, so I made a simple example and copied the document.

Page code:

<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>

Backend code:

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;
 }
 }

The display effect is as follows:

Analyze the use of jQueryEasyUI

There is no method calling example in the above example, and the jQueryEasyUI method calling is strange Weirdly said, Such as:

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

Parameters:

Analyze the use of jQueryEasyUI

event

Many event callback functions require the 'node' function, which contains the following features:

id: the identification value bound to the node.
text: displayed text.
checked: Whether the node is selected.
attributes: Custom attributes bound to nodes.
target: DOM object of the target.

Analyze the use of jQueryEasyUI

Method

Analyze the use of jQueryEasyUI

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jQuery’s Cookie plug-inNext article：Detailed explanation of jQuery’s Cookie plug-in

See more

Analyze the use of jQueryEasyUI

Related articles