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;
}
}
}
}

页面效果图:

源代码下载ExtjsTree.rar



相关阅读:
简单示例AJAX结合PHP代码实现登录效果代码
mssql server 存储过程里,bulk insert table from ''路径+文件'',路径固定,文件名不固定的实现方法
CSS布局实例代码:两列布局实例
详解Windows 7全方位的安全保护功能
ASP3.0高级编程(二十四)
Ubuntu Linux系统已开始支持SELinux技术
Windows 7操作系统新技术深入探讨
让IE6支持min-width和max-width的方法
Oracle修改表结构
标签 li 是不是块级元素分析
关于Chat模块控件化的想法
JavaScript入门教程(4) js浏览器对象
Enterprise JavaBeans导论三
《PHP编程最快明白》第三讲:php数组
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 励志故事《疼痛的力量》 我是普通小山石 快乐的一天日记800字 求职信的范文:国际贸易专业 300字三年级状物作文精选 2016建材质量保证书范文 高中高三作文1000字:我看赤壁 小学五年级作文450字:课后随想 社区民政工作调研报告 学前班幼儿园评语2015 -有爱有恨,爱恨一线隔。失落了年华,你我共别的天涯 炒菜的作文300字 区级三好学生推荐信作文1100字 奶奶戒烟了700字 小学六年级作文650字:椅子 雪之盼 高考百日誓师大会高二学生代表演讲稿 2016消防安全排查整治工作方案 网络游戏--赛尔号 再见了,蓝璃3作文450字 因为遗憾 老师教我们学舞蹈作文400字 长长的问询 周末来到,把工作的烦恼丢掉 县档案局年度工作计划 2014实习周记200字五篇 那么他 家庭给了我欢笑和泪水作文700字 我考了88分 反败为胜的感觉真好450字 教师自荐书范文 扬美德共感恩作文500字 劳动技术教学计划 学习重要讲话精神总结 你说什么样的话,你就是什么样的人 蔡康永微博语录 七一讲话学习心得体会 沁园春(晁共道侍郎生日) 党员党风廉政建设心得体会 受伤害的往往是自己 县民政局民生资金监管工作实施方案 远离喧嚣作文700字 初中初二作文650字:心灵深处的“守护神” 正能量早安心语 正能量早安心语励志语录大全 不用眼睛看男生 梦言梦语·梦中的期待 关晓彤经典语录 假设的一个问题 我爱你雪作文 党支部选举大会主持词

Copyright © 2016 phpStudy |