Extjs入门之动态加载树代码_extjs-js教程-PHP中文网

Extjs入门之动态加载树代码_extjs

WBOY

发布： 2016-05-16 18:30:03

原创

1507 人浏览过

Extjs动态加载树，首先在数据库里面设计存放树信息的表

 
USE [KimiExtjs] 
GO 
/****** 对象: Table [dbo].[Trees] 脚本日期: 04/08/2010 22:12:25 ******/ 
SET ANSI_NULLS ON 
GO 
SET QUOTED_IDENTIFIER ON 
GO 
SET ANSI_PADDING ON 
GO 
CREATE TABLE [dbo].[Trees]( 
[Tid] [varchar](40) COLLATE Chinese_PRC_CI_AS NOT NULL,---节点ID 主键 Guid 
[ParentId] [varchar](40) COLLATE Chinese_PRC_CI_AS NULL,---父亲节点ID 0表示为根目录 
[ContentText] [varchar](800) COLLATE Chinese_PRC_CI_AS NULL,---节点现实内容 
[StrHref] [varchar](800) COLLATE Chinese_PRC_CI_AS NULL,---节点链接地址 
[hrefTarget] [varchar](50) COLLATE Chinese_PRC_CI_AS NULL,---Target 
CONSTRAINT [PK_Trees] PRIMARY KEY CLUSTERED 
( 
[Tid] ASC 
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY] 
) ON [PRIMARY] 
GO 
SET ANSI_PADDING OFF 

构建完数据表后，我们将开始应运程序的开发，首先页面的设计，html代码如下：

复制代码代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="Com.KimiYang.Web.Main" %>

无标题页

js代码如下所示:

复制代码代码如下:

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL="Extjs3.2.0/resources/images/default/s.gif";
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'west_content',//渲染到
useArrows:true,
autoHeight:true,
split:true,
lines:true,
autoScroll:true,
animate:true,
enableDD:true,
border:false,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl :'ServletHandlers/GetTrees.ashx'
})
}); var root = new Tree.AsyncTreeNode({
text: 'KimiYang',
draggable:true,
id:'0'
});
tree.setRootNode(root);
root.expand();
var viewport = new Ext.Viewport( {
layout:'border',
items:[{
region:'west',
id:'west',
title:'导航菜单',
split: true，
宽度：200，
minSize：200，
maxSize：400，
可折叠：true，
边距：'60 0 2 2'，
cmmargins：'60 5 2 2',
layout:'fit',
layoutConfig:{ activeontop:true},
defaults: { bodyStyle: 'margin:0;padding:0;'},
items:
new Ext.TabPanel({
border:false,
activeTab:0,
tabPosition:'bottom',
items:[{
contentEl:'west_content',
title:'系统管理',
autoScroll:true,
bodyStyle:'padding:5px;'
},
{
title:'网上办公',
autoScroll:true ,
bodyStyle:'padding:5px;'
}]
})
},{
region:'center',
el:'center',
deferredRender :false,
边距:'60 0 2 0',
html:'',
autoScroll:true
},
{
区域:'南',
边距:'0 0 0 2',
边框:false,
html:''
}
]
})
setTimeout(function(){
Ext.get('loading').remove();
Ext.get('loading-mask); ').fadeOut({remove:true});
}, 250)
});

C#代码如下图：

复制代码代码如下：

使用 System;

使用 System.Collections; 
使用 System.Data; >使用 System.Linq; 
使用 System.Web.Services; 
使用 System.Xml.Linq; Com.KimiYang.Web.ServletHandlers 
{ 
///  
/// $codebehindclassname$ 的摘要说明 
/// [WebService(命名空间 = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
public class GetTrees : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
string strSql = "从树中选择 Tid,ParentId,ContentText,StrHref,hrefTarget"; 
dbOperator db = new dbOperator(); 
DataTable dt = db.Execute(strSql); >string strResult = "["; 
if (dt.Rows.Count > 0) 
{ 
DataRow[] dr = dt.Select("ParentId='0'"); 
strResult = DtTreeToJson(dt, strResult, dr); 
} 
strResult = "]"; 
context.Response.ContentType = "text/plain"; 
context.Response.Write(strResult.ToString()); 
context.Response.End(); 
} 
private static string DtTreeToJson(DataTable dt, string strResult, DataRow[] dr) 
{ 
if (dr.Length > 0) 
{ 
for (int i = 0; 长度 i ) 
{ 
strResult = "{"; 
strResult = "text:'" dr[i]["ContentText"] "',"; 
strResult = "id:'" dr[i]["Tid"] "',"; 
DataRow[] drChild = dt.Select("ParentId='" dr[i]["Tid"] "'"); 
if (drChild.Length > 0) 
{ 
strResult = "leaf:false,"; 
strResult = "孩子:["; 
strResult = DtTreeToJson(dt, strResult, drChild); 
strResult = "]"; 
} 
else 
{ 
strResult = "href:'" dr[i]["StrHref"] "',"; 
strResult = "hrefTarget:'" dr[i]["hrefTarget"] "',"; 
strResult = "leaf:true"; 
} 
strResult = "}"; 
if (i != dr.Length - 1) 
strResult = ","; 
} 
} 
返回 strResult; 
} 
public bool IsReusable 
{ 
获取 
{ 
返回 false; 
} 
} 
} 
} 

 
页面效果图： 


来源代码下载
ExtjsTree.rar 