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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
jquery select操作的日期联动实现代码
Dec 06 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
vuejs指令详解
Feb 07 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
使用js和canvas实现时钟效果
Sep 08 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
一个用于MySQL的PHP XML类
2006/10/09 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
Js 中debug方式
2010/02/07 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
js实现简单扫雷
2020/11/27 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python让列表倒序输出的实例
2018/06/25 Python
python实现多人聊天室
2020/03/31 Python
python中partial()基础用法说明
2018/12/30 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python实现udp聊天窗口
2020/03/31 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
nginx配置之并发频次限制
2022/04/18 Servers