Heim > Artikel > Web-Frontend > Analysieren Sie die Verwendung von jQueryEasyUI

Analysieren Sie die Verwendung von jQueryEasyUI

高洛峰Original: 2016-12-05 15:49:361106Durchsuche

Die Verwendung von jQueryEasyUI ist eigentlich sehr einfach. Bei der ersten Verwendung traten noch einige Probleme auf, daher habe ich ein einfaches Beispiel erstellt und das Dokument kopiert.

Seitencode:

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

Der Anzeigeeffekt ist wie folgt:

Analysieren Sie die Verwendung von jQueryEasyUI

Im obigen Beispiel gibt es kein Beispiel für einen Methodenaufruf. Der Aufruf der jQueryEasyUI-Methode ist sehr seltsam, wie zum Beispiel:

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

Parameter:

Analysieren Sie die Verwendung von jQueryEasyUI

Ereignis

Viele Ereignisrückruffunktionen erfordern die 'Knoten'-Funktion. Sie enthält die folgenden Eigenschaften:

id: Der an den Knoten gebundene Identifikationswert.
Text: angezeigter Text.
geprüft: Ob der Knoten ausgewählt ist.
Attribute: Benutzerdefinierte Attribute, die an den Knoten gebunden sind.
Ziel: DOM-Objekt des Ziels.

Analysieren Sie die Verwendung von jQueryEasyUI

Methode

Analysieren Sie die Verwendung von jQueryEasyUI

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des Cookie-Plug-Ins von jQueryNächster Artikel：Detaillierte Erläuterung des Cookie-Plug-Ins von jQuery

In Verbindung stehende Artikel

Mehr sehen