作者:李桂平2402851397 | 2022-12-24 15:21
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" %>
无标题页 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:'', autoScroll:true }, { region:'south', margins:'0 0 0 2', border:false, html:'' } ] }); 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 { /// /// $codebehindclassname$ 的摘要说明 /// [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