解析jQueryEasyUI的使用

来源：动视网责编：小采时间：2020-11-27 20:29:10

解析jQueryEasyUI的使用

解析jQueryEasyUI的使用:jQueryEasyUI的使用方法其实非常简单。在第一次使用中，也还是碰到了些问题，特地做了一个简单的示例，然后复制过来文档。页面代码：<html> <head> <title>jQuery EasyUI学习</title> <script src=

推荐度：

点击下载本文 文档为doc格式

导读解析jQueryEasyUI的使用:jQueryEasyUI的使用方法其实非常简单。在第一次使用中，也还是碰到了些问题，特地做了一个简单的示例，然后复制过来文档。页面代码：<html> <head> <title>jQuery EasyUI学习</title> <script src=

　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：绑定到节点的标识值。
text：显示的文字。
checked：是否节点被选中。
attributes：绑定到节点的自定义属性。
target：目标的 DOM 对象。

方法

解析jQueryEasyUI的使用

推荐度：

点击下载本文 文档为doc格式

标签：使用解析 easyUI

热门焦点

解析jQueryEasyUI的使用

解析jQueryEasyUI的使用

解析jQueryEasyUI的使用

最新推荐

猜你喜欢

热门推荐