键盘人生

After all,tomorrow is another day
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
Ext树控件的制作

  由于在项目中需要一个树形控件展示我的目录结构,最终选择了extjs,第一次接触花了1天时间学习先将成果列出来,以备后查.

  1.把ext包下的adapter,resource两个目录和ext-all.js文件包含到工程中

  2.在需要放置树的页面的头部包含相关的css和js文件,注意顺序

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title>产品展示</title>
 5     <link href="css/main.css" rel="stylesheet" type="text/css">
 6     <link href="css/tab_style.css" rel="stylesheet" type="text/css">
 7 
 8     <script language="javascript" src="javascript/product_index.js"></script>
 9 
10     <link rel="stylesheet" type="text/css" href="./Extjs/resources/css/ext-all.css" />
11     <!-- GC -->
12     <!-- LIBS -->
13 
14     <script type="text/javascript" src="./Extjs/adapter/ext/ext-base.js"></script>
15 
16     <!-- ENDLIBS -->
17 
18     <script type="text/javascript" src="./Extjs/ext-all-debug.js"></script>
19 
20     <script type="text/javascript" src="./javascript/CategoryMenu.js"></script>
21 
22 </head>
23 <body>
24     <form id="form1" runat="server">
25     <mp6:top_music runat="server" ID="txtDisplayOrder"></mp6:top_music>
26     <div id="main">
27         <div id="c_left">
28             <div id="CategoryMenuTree" style="overflow: auto; margin-right: 8px; height: 300px;
29                 width: 192px; border: 1px solid #c3daf9;">
30             </div>
31         </div>
32         <div class="product_show" id="maincontaint">
33             <iframe id="productDetail" name="productDetail" src="CategoryDetailShow.aspx?categoryid=1"
34                 frameborder="0" style="border: solid 1px #e3e2e2; width: 756px; height: 450px;
35                 padding: 0; margin: 0;"></iframe>
36         </div>
37     </div>
38     </form>
39 </body>
40 </html>

  3.代码中已经可以看到树控件使用的脚本文件

    <script type="text/javascript" src="./javascript/CategoryMenu.js"></script> 

  4.我们在相应的目录下生成这个 CategoryMenu.js文件

  1 /*!

 2  * Ext JS Library 3.3.1
 3  * Copyright(c) 2006-2010 Sencha Inc.
 4  * licensing@sencha.com
 5  * http://www.sencha.com/license
 6  */
 7 Ext.onReady(function(){
 8     // shorthand
 9     var Tree = Ext.tree;
10     var loader = new Tree.TreeLoader({dataUrl:'GetCategoryMenuTree.aspx'});
11     loader.processResponse = function(response, node, callback){
12         var json = response.responseText;
13         try{
14             node.beginUpdate();
15             var o = eval("("+json+")");
16             for(var i=0, len=o.length; i<len; i++){
17                 o[i]["text"] = unescape(o[i]["text"]);
18                 var n = this.createNode(o[i]);
19                 if (n){
20                     node.appendChild(n);
21                 }
22             }
23             node.endUpdate();
24             if(typeof callback == "function"){
25                 callback(this, node);
26             }
27             
28         }catch(e){
29             this.handleFailure(response);
30         }        
31     }
32     var menuTree = new Tree.TreePanel({
33         useArrows: true,
34         autoScroll: true,
35         animate: true,
36         enableDD: false,
37         containerScroll: true,
38         border: false,
39         height: 300,
40         rootVisible: true,
41         loader:loader
42     });
43 
44     var root = new Tree.AsyncTreeNode({  
45         text: '全部分类',  
46         draggable:false,  
47         id:'0'
48     });  
49     
50     menuTree.setRootNode(root); 
51     
52     // render the tree
53     menuTree.render('CategoryMenuTree');
54 
55 //    var menucontext = new Ext.menu.Menu({
56 //        id: 'menucontext',
57 //        items: [{
58 //            text: '点我呀',
59 //            handler:function(){
60 //                alert('aaaaaaaaaaaaaaaaaaaa');
61 //            }
62 //        }]
63 //    });
64 //    
65 //    menuTree.on("contextmenu", function(node,e){
66 //        e.preventDefault();
67 //        node.select();
68 //        menucontext.showAt(e.getXY());
69 //    });
70     
71 //    tree.on("click", function(node){
72 //        Ext.Msg.show({
73 //            title:'提示',
74 //            msg:'你单击了' + node,
75 //            animEl:node.ui.textNode
76 //        });
77 //    });
78     
79     Ext.QuickTips.init();
80     
81     root.expand(false,false, function(){
82         locationTree(menuTree.getRootNode());
83     });    
84     
85     root.expand(false,false);
86     
87 });
88 
89 function locationTree(node){  
90     node.childNodes[0].select();
91     //Ext.get('productDetail').src="CategoryDetailShow.aspx?categoryid=1";
92     
93 } 

     这个树使用[GetCategoryMenuTree.aspx] 作为异步树的数据源,该页面的后台代码返回一个json字符串,客户端使用该数据构建树的节点.

  1  public partial class GetCategoryMenuTree : System.Web.UI.Page

 2     {
 3         protected void Page_Load(object sender, EventArgs e)
 4         {
 5             string nodeTpl = "id:'{0}', text:'{1}', cls:'{2}', qtip:'{3}', href:'CategoryDetailShow.aspx?categoryid={4}',hrefTarget:'productDetail'";
 6             string leafTpl = "id:'{0}', text:'{1}', cls:'{2}', qtip:'{3}', leaf:'{4}'";
 7             string leafTpl2 = "id:'{0}', text:'{1}', cls:'{2}', qtip:'{3}', leaf:'{4}', href:'ProductInCategoryShow.aspx?categoryid={5}',hrefTarget:'productDetail'";
 8 
 9             string jsonTpl = "[{0}]";
10 
11             string json = "";
12 
13             int nodeID = 0;
14             try
15             {
16                 nodeID = int.Parse(Request.Params["node"]);
17             }
18             catch (Exception ex)
19             {
20                 Response.Write("[]");
21                 Response.End();
22                 return;
23             }
24             CategoryCollection categorys = CategoryManager.GetAllCategories(nodeID);
25             foreach (Category category in categorys)
26             {
27                 string node = "";
28                 string Name = category.Name;                
29                 Name = Microsoft.JScript.GlobalObject.escape(Name);
30 
31                 if (CategoryManager.hasChildren(category.CategoryID))
32                 {
33                     node = string.Format(nodeTpl, 
34                                             category.CategoryID, 
35                                             Name, 
36                                             "folder", 
37                                             "categroyid:[" + category.CategoryID.ToString() + "]",
38                                             category.CategoryID);
39                 }
40                 else
41                 {
42                     // 叶子节点
43                     node = string.Format(leafTpl2,
44                                                category.CategoryID,
45                                                Name,
46                                                "folder",
47                                                "categroyid:[" + category.CategoryID.ToString() + "]",
48                                                "true",
49                                                category.CategoryID);
50 
51                     //ProductCategoryCollection pcc = CategoryManager.GetProductCategoriesByCategoryID(category.CategoryID);
52                     //if (pcc != null && pcc.Count > 0)
53                     //{
54                     //    node = string.Format(leafTpl2,
55                     //                           category.CategoryID,
56                     //                           category.Name,
57                     //                           "folder",
58                     //                           "categroyid:[" + category.CategoryID.ToString() + "]",
59                     //                           "true",
60                     //                           category.CategoryID);
61 
62                     //}
63                     //else
64                     //{
65                     //    node = string.Format(leafTpl,
66                     //                            category.CategoryID,
67                     //                            category.Name,
68                     //                            "folder",
69                     //                            "categroyid:[" + category.CategoryID.ToString() + "]",
70                     //                            "true");
71                     //}
72                 }
73                 if (!string.IsNullOrEmpty(json))
74                 {
75                     json += ",";
76                 }
77                 json += "{" + node + "}";
78             }
79             json = string.Format(jsonTpl, json);
80 
81             Response.Write(json);
82             Response.End();
83         }
84     }

  5.到这里我的这个树就做好了

posted on 2011-03-25 15:32  Dr.Wang  阅读(1120)  评论(0)  编辑  收藏  举报