Extjs入门之动态加载树代码


Posted in Javascript onApril 09, 2010

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代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="Com.KimiYang.Web.Main" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title>无标题页</title> 
<link href="css/css/StyleSheet.css" rel="stylesheet" type="text/css" /> 
<link href="Extjs3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
<link href="Extjs3.2.0/resources/css/xtheme-gray.css" rel="stylesheet" type="text/css" /> 
<script src="Extjs3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script> 
<script src="Extjs3.2.0/ext-all.js" type="text/javascript"></script> 
<script src="Extjs3.2.0/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 
<script src="JS/Main.js" type="text/javascript"></script> 
<script src="JS/NowTime.js" type="text/javascript"></script> 
<base target="_self" /> 
</head> 
<body onload="getCurrentTime()"> 
<form id="form1" runat="server"> 
<div id="loading-mask" style=""></div> 
<div id="loading"> 
<div class="loading-indicator"><img src="Extjs3.2.0/resources/images/vista/s.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading...</div> 
</div> 
<div id="header"><h1>KimiYang</h1></div> 
<div class="menu"> 
<span style="float: left">欢迎  <b>admin  <span id="myTime"/></span></b>   
  </span> 
<span id="aLoginOut" runat="server" style="float: right"><a onclick="if (!window.confirm('您确认要注消当前登录用户吗?')){return false;}" 
href="#">注销</a></span> 
</div> 
<div id="north"></div> 
<div id="west"> 
</div> 
<div id="center"> 
</div> 
<div id="west_content" style="height:300px; "> 
</div> 
</form> 
</body> 
</html>

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:'<iframe id="center-iframe" width="100%" height=100% name="main" frameborder="0" scrolling="auto" style="border:0px none; background-color:#BBBBBB; " ></iframe>', 
autoScroll:true 
}, 
{ 
region:'south', 
margins:'0 0 0 2', 
border:false, 
html:'<div class="menu south">Copyright © 2009 浙江新昌 Kimi Yang All Rights Reserved</div>' 
} 
] 
}); 
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 
{ 
/// <summary> 
/// $codebehindclassname$ 的摘要说明 
/// </summary> 
[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; 
} 
} 
} 
}

页面效果图:
Extjs入门之动态加载树代码
源代码下载ExtjsTree.rar
Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
详解JS ES6编码规范
May 07 Javascript
JS 非图片动态loading效果实现代码
Apr 09 #Javascript
extJs 下拉框联动实现代码
Apr 09 #Javascript
禁止js文件缓存的代码
Apr 09 #Javascript
javascript+mapbar实现地图定位
Apr 09 #Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 #Javascript
Javascript string 扩展库代码
Apr 09 #Javascript
JavaScript 设计模式之组合模式解析
Apr 09 #Javascript
You might like
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
json数据的列循环示例
2013/09/06 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
浅析Python中的多条件排序实现
2016/06/07 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
网络方面基础面试题
2012/11/16 面试题
导游实习生自荐书
2014/01/28 职场文书
质检部经理岗位职责
2014/02/19 职场文书
青年文明号创建承诺
2014/03/31 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
给校长的建议书200字
2014/05/16 职场文书
规范化管理年活动总结
2014/08/29 职场文书
python办公自动化之excel的操作
2021/05/23 Python