解析jQueryEasyUI的使用-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

解析jQueryEasyUI的使用

Dec 05, 2016 pm 03:49 PM

　jQueryEasyUI的使用方法其实非常简单。在第一次使用中，也还是碰到了些问题，特地做了一个简单的示例，然后复制过来文档。

页面代码：

&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;jQuery EasyUI学习&lt;/title&gt;
 &lt;script src=&quot;../../Scripts/jquery-1.4.1.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;../../Scripts/jquery.easyui.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
 &lt;link href=&quot;../../themes/default/easyui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
 &lt;link href=&quot;../../themes/icon.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
 &lt;script type=&quot;text/javascript&quot;&gt;
 $(function() {
  $(&quot;#Tree&quot;).tree({
  url: &quot;/Home/GetJson&quot;,
  onClick: function(node) {
   alert(node.text);
  }
  })
 })
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;ul id=&quot;Tree&quot;&gt;
 &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

后台代码：

public class HomeController : Controller
 {
 public ActionResult Index()
 {
  return View();
 }
 public ActionResult About()
 {
  return View();
 }
 public ActionResult GetJson()
 {
  Node node4 = new Node(4, &quot;java从入门到精通&quot;, &quot;open&quot;, null);
  Node node5 = new Node(5, &quot;30天精通C#&quot;, &quot;open&quot;, null);
  List&lt;Node&gt; ListNode2 = new List&lt;Node&gt;() { node4 };
  List&lt;Node&gt; ListNode3 = new List&lt;Node&gt;() { node5 };
  Node node2 = new Node(2, &quot;java分类&quot;, &quot;closed&quot;, ListNode2);
  Node node3 = new Node(3, &quot;c#分类&quot;, &quot;closed&quot;, ListNode3);
  List&lt;Node&gt; ListNode1 = new List&lt;Node&gt;() { node2, node3 };
  Node node1 = new Node(1, &quot;图书分类&quot;, &quot;closed&quot;, ListNode1);
  List&lt;Node&gt; ListNode0 = new List&lt;Node&gt;() { node1 };
  return Json(ListNode0, JsonRequestBehavior.AllowGet);
 }
 }
 public class Node
 {
 public Node(int Id,string Text,string IconCls, List&lt;Node&gt; 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&lt;Node&gt; children
 {
  get;
  set;
 }
 }

Salin selepas log masuk

显示效果如下：

上面的示例中没有方法的调用示例，jQueryEasyUI方法的调用很奇葩的说，如：

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

Salin selepas log masuk

　参数：

事件

很多事件的回调函数需要 'node' 函数，它包含下列特性：

id：绑定到节点的标识值。
text：显示的文字。
checked：是否节点被选中。
attributes：绑定到节点的自定义属性。
target：目标的 DOM 对象。

方法

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn