坚持，坚定，坚强

博客园 首页 新随笔 联系 订阅 管理
如何使用asp.net 开发 ext 2.0 tree ?
最近看了一下 ext 2.0 ,于是想法用asp.net 程序实现了一个tree型结构
数据库如下:
 1CREATE TABLE [Admin_Menu] (
 2    [Menu_Id] [int] IDENTITY (1, 1) NOT NULL ,
 3    [Menu_Title] [varchar] (50) COLLATE Chinese_PRC_CI_AS NOT NULL ,
 4    [Menu_Parent_Node] [int] NOT NULL ,
 5    [Menu_Url] [varchar] (100) COLLATE Chinese_PRC_CI_AS NULL ,    
 6    CONSTRAINT [PK_Admin_Menu] PRIMARY KEY  CLUSTERED 
 7    (
 8        [Menu_Id]
 9    )  ON [PRIMARY] 
10) ON [PRIMARY]
11GO

数据如下

INSERT INTO Admin_Menu(Menu_Title,Menu_Parent_Node,Menu_Url) VALUES('A',0,'0')
INSERT INTO Admin_Menu(Menu_Title,Menu_Parent_Node,Menu_Url) VALUES('A-1',1,'0')
INSERT INTO Admin_Menu(Menu_Title,Menu_Parent_Node,Menu_Url) VALUES('A-1-1',2,'WWW.163.COM')
INSERT INTO Admin_Menu(Menu_Title,Menu_Parent_Node,Menu_Url) VALUES('B',0,'0')
INSERT INTO Admin_Menu(Menu_Title,Menu_Parent_Node,Menu_Url) VALUES('B-1',4,'0')
INSERT INTO Admin_Menu(Menu_Title,Menu_Parent_Node,Menu_Url) VALUES('B-2',4,'0')
INSERT INTO Admin_Menu(Menu_Title,Menu_Parent_Node,Menu_Url) VALUES('B-1-1',5,'0')
INSERT INTO Admin_Menu(Menu_Title,Menu_Parent_Node,Menu_Url) VALUES('B-1-1-1',8,'WWW.163.COM')
INSERT INTO Admin_Menu(Menu_Title,Menu_Parent_Node,Menu_Url) VALUES('C',0,'WWW.163.COM')

js 代码如下:
 1Ext.onReady(function(){
 2    // shorthand
 3    var Tree = Ext.tree;
 4    Ext.BLANK_IMAGE_URL = "../images/default/s.gif";
 5    var tree = new Tree.TreePanel({
 6        el:'tree-div',
 7        useArrows:true,
 8        autoScroll:true,
 9        animate:true,
10        enableDD:true,
11        containerScroll: true, 
12       
13        loader: new Tree.TreeLoader({
14            dataUrl:'../Admin/left.aspx?source=dd' //生成 ext 2.0 所需要的树型格式
15        })
16    });
17
18    // set the root node
19    var root = new Tree.AsyncTreeNode({
20        text: '管理员',
21        draggable:false,
22        id:'0' // 0 为根目录
23    });
24    tree.setRootNode(root);
25
26    // render the tree
27    tree.render();
28    root.expand();
29});
生成的格式如下:
[{'text':'A','cls':'file','id':'8','leaf':false,'children':
[{'text':'A-1','cls':'file','id':'9','leaf':true,'hrefTarget':'main','href':'http://www.163.com'}]
},{'text':'B','cls':'file','id':'10','leaf':false,'children':
[{'text':'B-1','cls':'file','id':'11','leaf':false,'children':
[{'text':'B-1-1','cls':'file','id':'12','leaf':false,'children':
[{'text':'B-1-1-1','cls':'file','id':'14','leaf':true,'hrefTarget':'main','href':'http://www.163.com'
}]
}]
}]
},
{'text':'B-1-2','cls':'file','id':'13','leaf':true,'hrefTarget':'main','href':'http://www.163.com'
},{'text':'C','cls':'file','id':'15','leaf':false,'children':
[{'text':'C-1','cls':'file','id':'16','leaf':false,'children':
[{'text':'C-1-1','cls':'file','id':'17','leaf':true,'hrefTarget':'main','href':'http://www.163.com'
}]
}]
}]
解释一下:
基本格式是: [{ 内容 },{内容}] 有子节点的话格式就是 [{ 根节点 [{子节点}] }] 有更多则用一样用此格式
还有关键的一些参数说明一下: text 是节点的文本 ,cls 是节点图片的样式 有 file 和 floder(好像是目录的意思)
 id 这好懂. leaf 当前节点是否有子节点.为 true / false . href 为链接地址  hrefTarget 在哪个目标打开链接.
所有参数都需要用 '' 括都来,除bool类型外.
aspx代码(html)
<HTML>
    <HEAD>
        <title>left</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
        <link rel="stylesheet" type="text/css" href="../css/ext-all.css">
        <!-- GC -->
        <!-- LIBS-->
        <script type="text/javascript" src="../js/ext-base.js"></script>
        <!-- ENDLIBS-->
        <script type="text/javascript" src="../js/ext-all.js"></script>
        <script type="text/javascript" src="../js/reorder.js"></script>
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../css/examples.css">
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
            <FONT face="宋体"></FONT>
            <div id="tree-div" style="BORDER-RIGHT:#c3daf9 1px solid; BORDER-TOP:#c3daf9 1px solid; OVERFLOW:auto; BORDER-LEFT:#c3daf9 1px solid; WIDTH:250px; BORDER-BOTTOM:#c3daf9 1px solid; HEIGHT:300px"></div>
        </form>
    </body>
</HTML>

cs 代码
 1private void Page_Load(object sender, System.EventArgs e)
 2        {
 3            // 在此处放置用户代码以初始化页面
 4            if (Request.QueryString["source"]!=null)
 5                GetMenu();
 6        }
 7        private void GetMenu()
 8        {
 9            WapBLL.UserMenu objUserMenu = new XuWayMob.WapBLL.UserMenu();
10            DataTable dt = new DataTable();
11            dt = objUserMenu.GetMenu();
12            string js = "[";            
13            string s = "";
14            BuildMenu(dt,"0",s,ref js);            
15            Response.Write(js.Substring(0,js.Length-1)+"]");
16            Response.End();
17        }
18        private void BuildMenu(DataTable dt,string ParentNode,string s ,ref string js)
19        {
20            
21            DataRow[] dr = dt.Select(string.Format("Menu_Parent_Node={0}",ParentNode) );
22            if ( dr.Length> 0 && ParentNode!="0")
23            {                
24                s = ",'leaf':false,'children':[";
25            }
26            else if ( dr.Length<= 0 && s.IndexOf("children")>0)
27            {                    
28                int end = js.Split(new char[]{'['}).Length -2  - js.Split(new char[]{']'}).Length;
29                if ( end > 0 )
30                {
31                    for(int i= 0;i <= end;i++)
32                    {
33                        js= js +"}]";                
34                    }
35                    js = js + "},";
36                }
37                else
38                {
39                    js= js +"}]},";
40                }                
41            }
42            else if ( !js.Equals("[") )
43            {
44                js= js +"},";                
45            }        
46            
47            foreach(DataRow dr1 in dr)
48            {            
49                s = s+"{'text':'"+ dr1["Menu_Title"].ToString() 
50                    +"','cls':'file"
51                    +"','id':'"+ dr1["Menu_Id"].ToString()  +"'";
52                if ( !"0".Equals(dr1["Menu_Url"].ToString()) )
53                    s +=",'leaf':true,'hrefTarget':'main','href':'"+dr1["Menu_Url"].ToString() +"'";
54                
55                js = js +s;
56                BuildMenu(dt,dr1["Menu_Id"].ToString(),s,ref js);                
57                s = "";                
58            }            
59        }
这个递归写得不好.老是感觉怪怪的. 数据是一次性读出来.如有人能写得更好请不需私藏了.
基本上是可以了.
vs 2003 + sql 2000通过
可以在js 中
Ext.BLANK_IMAGE_URL = 'http://www.cnblogs.com/resources/images/default/s.gif';
posted on 2008-04-10 12:53  老公鸡  阅读(1122)  评论(2)    收藏  举报