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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
javascript if条件判断方法小结
May 17 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
JavaScript实现星级评价效果
May 17 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
javascript实现页面的实时时钟显示示例
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
PHP实现的增强性mhash函数
2015/05/27 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
原生js开发的日历插件
2017/02/04 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python实现与redis交互操作详解
2020/04/21 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
Python类及获取对象属性方法解析
2020/06/15 Python
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
新学期校长寄语
2014/01/18 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
五一劳动节慰问信
2015/02/14 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python