jquery EasyUI 异步树

aguang110

浏览: 887635 次
性别:
来自: 北京

最近访客更多访客>>

tongwawa

ggggoo

lyne15730

gggfff39

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

easyUI

jQuery JavaScript CSS json 数据结构

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

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
[url]http://www.CodeHighlighter.com/[/url]

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

大家可以看到,这个代码已经是相当简单了,然后, 我们要做的是服务器端的代码返回工作,其实也很简单,核心代码如下:

代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
[url]http://www.CodeHighlighter.com/[/url]

--> 1            int parentId = -1;//默认为-1,如果请求参数不正确,将不返回任何值
2            string resultStr = string.Empty;
3            if (!string.IsNullOrEmpty(context.Request.QueryString["pid"]))
4            {
5                Int32.TryParse(context.Request.QueryString["pid"], out parentId);
6            }
7            if (parentId >= 0)
8            {
9 ........//此处省略得到数据列表的代码
10                    resultStr = "";
11                    resultStr += "[";
12                    foreach (数据类 item in 数据集List<>)
13                    {
14                        resultStr += "{";
15                        resultStr += string.Format("\"id\": \"{0}\", \"text\": \"{1}\", \"iconCls\": \"icon-ok\", \"state\": \"closed\"", item.Id.ToString(), item.TxtName);
16                        resultStr += "},";
17                    }
18                    resultStr = resultStr.Substring(0, resultStr.Length - 1);
19                    resultStr += "]";
20            }
21
22
23            //最后返回json数据
24            context.Response.Write(resultStr);
25

请注意,以上的服务器端代码,请根据具体数据结构情况进行修改.

好了,这样,我们的工作就完成了.是不是很简单（另一个更简单，更好的Tree插件jquery.simple.tree）.具体实现中,还可以根据情况进行多选的设置.
EasyUI代码下载"http://jquery-easyui.wikidot.com/download",我这里用的版本是1.2

分享到：

spring+hibernate操控LOB对象 | 设计模式笔记

2011-03-12 00:10
浏览 1455
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论