extjs6.0 动态加载_Extjs入门之动态加载树代码

Extjs动态加载树的实现代码，需要的朋友可以参考下。

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代码如下：

无标题页

Loading...

KimiYang

欢迎  admin  

href="#">注销

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

tree.render();

root.expand();

var viewport = new Ext.Viewport({

layout:'border',

items:[{

region:'west',

id:'west',

title:'菜单导航',

split:true,

width: 200,

minSize: 200,

maxSize: 400,

collapsible: true,

margins:'60 0 2 2',

cmargins:'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,

margins:'60 0 2 0',

html:'',

autoScroll:true

},

{

region:'south',

margins:'0 0 0 2',

border:false,

html:'

Copyright © 2009 浙江新昌 Kimi Yang All Rights Reserved

'

}

]

});

setTimeout(function(){

Ext.get('loading').remove();

Ext.get('loading-mask').fadeOut({remove:true});

}, 250)

});

C#代码如下图所示:

using System;

using System.Collections;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml.Linq;

namespace Com.KimiYang.Web.ServletHandlers

{

///

/// $codebehindclassname$ 的摘要说明

///

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class GetTrees : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

string strSql = "select Tid,ParentId,ContentText,StrHref,hrefTarget from Trees";

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 < dr.Length; 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 += "children:[";

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 += ",";

}

}

return strResult;

}

public bool IsReusable

{

get

{

return false;

}

}

}

}

页面效果图：

源代码下载ExtjsTree.rar