extjs6.0 动态加载_Extjs入门之动态加载树代码
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代码如下:
无标题页
KimiYang
欢迎 admin
href="#">注销
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
extjs6.0 动态加载_Extjs入门之动态加载树代码相关推荐
- JS动态加载脚本及对动态脚本内方法的调用
JS动态加载脚本及对动态脚本内方法的调用 摘要 JS动态加载脚本及对动态脚本内方法的调用 JS 动态 添加脚本 按需加载 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package ...
- java spring包_java 自定义加载器,加载spring包,动态加载实现,jar包隔离,tomcat加载webapp方式...
java 自定义加载器,加载spring包,动态加载实现,jar包隔离,tomcat加载webapp方式 发布时间:2018-08-20 12:02, 浏览次数:774 , 标签: java spri ...
- ligertoolbar 动态加载按钮_Axure利用动态面板实现环形加载进度条
先来看下效果. 基本原理 上面是组合效果,主要包含三个部分,左半圆.右半圆和中间的百分加载部分.左.右半圆的实现原理很简单,就是利用动态面板的遮挡功能,将一个完整的圆遮挡一半,然后在显示的那一半上面添 ...
- 懒加载和预加载的区别_类的动态创建(ro,rw)amp; 懒加载类和非懒加载类底层加载的区别 amp; 类和分类的搭配分析...
黑客技术点击右侧关注,了解黑客的世界! Java开发进阶点击右侧关注,掌握进阶之路! Python开发点击右侧关注,探讨技术话题!作者丨OSMin链接:https://juejin.im/post/5 ...
- layui的tree如何实现动态加载_layui tree动态加载 利用CAReplicatorLayer实现的加载动画 - 电脑常识 - 服务器之家...
layui tree动态加载 利用CAReplicatorLayer实现的加载动画 发布时间:2017-04-12 来源:服务器之家 在上一篇中,笔者简要介绍了CAReplicatorLayer,在本 ...
- ceisum 加载geojson,使用 Cesium 动态加载 GeoJSON 数据
前言 需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析 这里面牵扯到两 ...
- 【自然语言处理入门系列】加载和预处理数据-以Cornell Movie-Dialogs Corpus数据集为例
[自然语言处理入门系列]加载和预处理数据-以Cornell Movie-Dialogs Corpus数据集为例 Author: Yirong Chen from South China Univers ...
- html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
- Linux动态库的动态加载与静态加载以及加载依赖了其他动态库的动态库
Linux动态库加载 在Linux下,动态库格式一般为libxxx.so或者libxxx.so.3这种格式. 通常我们在网上下载下来源码包,编译之后会是libxxx.so软连接libxxx.so.1链 ...
最新文章
- Nature:中国正在上演AI人才争夺战,中国公司在与Google竞争
- 如何更改已生成的APK的APP名字?
- php 添加内链插件,ecshop自动内链插件seo优化插件
- Qt Creator配置编辑器
- 为什么c语言要定义变量,C语言为什么要规定对所用到的变量要“先定义,后使用”...
- JS - 按钮倒计时
- java list 对象 json字符串_Java中Json字符串直接转换为对象的方法(包括多层List集合)...
- PL/SQL Developer图形化窗口创建数据库(表空间和用户)以及相关查询sql
- java开发的程序怎么用_java安装后怎么使用?第一次编写java程序
- vba_1《考勤表》
- Ubuntu16安装Nvidia驱动(GTX1060显卡)
- “燕云十六将”之三弟王静
- 福昕阅读器注册无法连接服务器,福昕pdf阅读器 10安装使用教程(附注册机)
- migration php,PHP日记——Lavarel常用语句之Migration篇
- 警告 C4819 该文件包含不能在当前代码页(936)中表示的字符。请将该文件保存为 Unicode 格式以防止数据丢失
- python二维列表每个子列表取一个元素的所有组合
- snubber电路总结
- 响应式设计:理解设备像素,CSS像素和屏幕分辨率
- C4droid安装使用教程
- Vue项目中将时间格式成xxxx-xx-xx