jquery EasyUI 异步树 treeview,我所做的真正意义上的异步树(单选)

时间：2010-08-20 来源：菜鸟毛

EasyUI易用灵活,但可惜说明文档太简单,网上不少的一些所谓异步树,名为异步,实则是一次性加载了全部的树内容,这样在构建一棵比较大的树的时候,可能会造成效率上的严重影响.

我们的目标,一般是:点击某节点前的"展开"图标====加载该节点下的子节点====下次展开,不用加载,直接展开;点击节点的文字,选定内容,做我们所要做的事情.

于是行动开始,首先,我们要加载EasyUI的核心文件及资源文件,HTML具体代码如下---

代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml" >
4 <head runat="server">
5     <title>Untitled Page</title>
6     <link rel="stylesheet" href="easyui/themes/default/easyui.css" />
7  <link rel="stylesheet" href="easyui/themes/icon.css" />
8  <script type="text/javascript" src="easyui/jquery-1.4.2.min.js"></script>
9     <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
10     <script type="text/javascript">
11
12     $(function(){
13             $('#tt2').tree({
14                 checkbox: false,
15                 url: '/common/GetGoupJsonByPid.ashx?pid=0',
16                 onBeforeExpand:function(node,param){
17                     $('#tt2').tree('options').url = "/common/GetGoupJsonByPid.ashx?pid=" + node.id;// change the url
18                     //param.myattr = 'test';    // or change request parameter
19                 },
20                 onClick:function(node){
21                     alert(node.id);
22                 }
23             });
24         });
25     </script>
26 </head>
27 <body>
28     <form id="form1" runat="server">
29     <div style="width:150px;">
30         <ul id="tt2">
31         </ul>
32     </div>
33     </form>
34 </body>
35 </html>

相关阅读更多 +