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在IE和FireFox中的不同表现简析
Dec 03 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
js实现加载更多功能实例
Oct 27 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
JavaScript链式调用实例浅析
Dec 19 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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
layui实现三级导航菜单
2019/07/26 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
决策树的python实现方法
2014/11/18 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
Linux文件系统类型
2012/09/16 面试题
物业管理计划书
2014/01/10 职场文书
毕业大学生自荐信
2014/06/17 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android