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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
iView框架问题整理小结
Oct 16 Javascript
Vue代码整洁之去重方法整理
Aug 06 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
php通用防注入程序 推荐
2011/02/26 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
Web程序工作原理详解
2014/12/25 PHP
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python之列表推导式的用法
2019/11/29 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
生产班组长岗位职责
2014/01/05 职场文书
一年级学生评语
2014/04/23 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
团组织推优材料
2014/12/29 职场文书
蓬莱阁导游词
2015/02/04 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
小学家长意见怎么写
2015/06/03 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
学生会主席任命书
2015/09/21 职场文书
教育教学工作反思
2016/02/24 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
python APScheduler执行定时任务介绍
2022/04/19 Python