`

EXTJS组件化编程及递归树实现范例

阅读更多
原帖地址:http://www.cnblogs.com/yongfeng/archive/2013/05/27/3100978.html

目录


1       大概思路... 1


2       设计数据库... 1


3       编写递归树... 2


4       EXTJS注册若干通用组件... 3


5       EXTJS类图概览与代码... 7


6       JSON序列化... 11


7       运行效果... 12


8       总结... 13


 


 



 


1       大概思路



  • 设计数据库

  • 编写递归树

  • EXTJS注册若干通用组件与代码

  • EXTJS类图概览

  • JSON序列化

  • 运行效果


 


2       设计数据库


详细查看db_script



/*==============================================================*/
/* Table: SYSTEM_MODULE */
/*==============================================================*/
create table SYSTEM_MODULE
(
SM_ID
NUMBER not null,
SM_PARENTID
NUMBER,
SM_NAME
VARCHAR(30),
SM_DESCRIPTION
VARCHAR(50),
SM_REMARK
VARCHAR(300),
SM_EXPANDED
VARCHAR(1) default '0' not null,
SM_LEAF
VARCHAR(1) default '0',
UPDATE_DATE DATE,
UPDATE_BY
VARCHAR(30),
CREATE_DATE DATE,
CREATE_BY
VARCHAR(30),
constraint PK_SYSTEM_MODULE primary key (SM_ID)
);
comment
on table SYSTEM_MODULE is
'模块表';
comment
on column SYSTEM_MODULE.SM_ID is
'当前节点';
comment
on column SYSTEM_MODULE.SM_PARENTID is
'父节点';
comment
on column SYSTEM_MODULE.SM_NAME is
'模块名称';
comment
on column SYSTEM_MODULE.SM_DESCRIPTION is
'描述或访问页面、对象';
comment
on column SYSTEM_MODULE.SM_REMARK is
'备注';
comment
on column SYSTEM_MODULE.SM_EXPANDED is
'0不展开,1展开';
comment
on column SYSTEM_MODULE.SM_LEAF is
'0 不是子节点 ,1 是子节点';
comment
on column SYSTEM_MODULE.UPDATE_DATE is
'更新时间';
comment
on column SYSTEM_MODULE.UPDATE_BY is
'更新人';
comment
on column SYSTEM_MODULE.CREATE_DATE is
'创建时间';
comment
on column SYSTEM_MODULE.CREATE_BY is
'创建人';
create sequence SEQ_SYSTEM_MODULE
increment
by 1
start
with 1
nomaxvalue
nocycle;
/* 若有数据 */
INSERT INTO system_module(sm_id,SM_PARENTID,sm_name,SM_EXPANDED) VALUES(seq_system_module.nextval,'0','产品一','1');


 


 


3       编写递归树



        /// <summary>
/// 获取树
/// </summary>
/// <param name="obj"></param>
/// <returns></returns>
public SYSTEM_TREE GetTree(SYSTEM_TREE obj)
{
try
{
// 查询子节点
string strNextSQL = @"SELECT SM.SM_ID as id, SM.SM_PARENTID as parentid, SM.SM_NAME as text, SM.SM_EXPANDED as expanded
FROM SYSTEM_MODULE SM
WHERE SM.SM_PARENTID = :P_SM_PARENTID
ORDER BY SM.SM_ID
";
OracleParameter[] parasNext
= new OracleParameter[1];
parasNext[
0] = new OracleParameter("P_SM_PARENTID", OracleType.Number);
parasNext[
0].Value = obj.id;
DataView dvNext
= OracleHelper.ExecuteView(this.connectString, System.Data.CommandType.Text, strNextSQL, parasNext);
DataTable dtNext
= dvNext.Table;

obj.children
= new List<SYSTEM_TREE>();
// 子节点添加到当前节点
foreach (DataRow dr in dtNext.Rows)
{
SYSTEM_TREE st
= new SYSTEM_TREE();
st.id
= Convert.ToInt32(dr["id"].ToString());
st.text
= dr["text"].ToString();
st.expanded
= dr["expanded"].ToString() == "0" ? false : true;

// 递归调用
st = this.GetTree(st);

st.leaf
= st.children.Count > 0 ? false : true;
obj.children.Add(st);
}
return obj;
}
catch
{
throw;
}
}


 


 


4       EXTJS注册若干通用组件


ux.js文件



Ext.ns('Pub.ux');


/*
create by zhyongfeng in 2013.05.23
注册RadioGroup扩展组件
new Pub.ux.RadioGroup({
......
})
*/
Pub.ux.RadioGroup
= Ext.extend(Ext.form.RadioGroup, {
getValue :
function () {
var v;
if (this.rendered) {
this.items.each(function (item) {
if (!item.getValue())
return true;
v
= item.getRawValue();
return false;
});
}
else {
for (var k in this.items) {
if (this.items[k].checked) {
v
= this.items[k].inputValue;
break;
}
}
}
return v;
},
setValue :
function (v) {
if (this.rendered)
this.items.each(function (item) {
item.setValue(item.getRawValue()
== v);
});
else {
for (var k in this.items) {
this.items[k].checked = this.items[k].inputValue == v;
}
}
}
});
Ext.reg(
'ux.RadioGroup', Pub.ux.RadioGroup);

/*
create by zhyongfeng in 2013.05.23
注册FormPanel扩展组件
new Pub.ux.FormPanel({
......
})
*/
Pub.ux.FormPanel
= Ext.extend(Ext.FormPanel, {
frame :
true,
layout :
'form',
border :
false,
lableWidth :
20,
constructor :
function (config) {
// 对象不存在,则返回
if (!config) {
Pub.ux.FormPanel.superclass.constructor.apply(
this);
return;
}

Ext.apply(
this, config);
Pub.ux.FormPanel.superclass.constructor.apply(
this);
}
});
Ext.reg(
'ux.FormPanel',Pub.ux.FormPanel);

/*
create by zhyongfeng in 2013.05.23
注册Window扩展组件
new Pub.ux.Window({
......
})
*/
Pub.ux.Window
= Ext.extend(Ext.Window, {
frame :
true,
border :
false,
autoDestroy :
true,
modal:
true,
resizable :
false,
layout:
'fit',
buttonAlign :
"center",
width :
250,
height :
150,
constructor :
function (config) {
// 对象不存在,则返回
if (!config) {
Pub.ux.Window.superclass.constructor.apply(
this);
return;
}
this.buttons = [{
text :
"提交",
scope :
this,
handler :
this.onSave
}, {
text :
"退出",
scope :
this,
handler :
this.close
}
];
Ext.apply(
this, config);
Pub.ux.Window.superclass.constructor.apply(
this);
},
onSave :
function () {
if (this.items.length == 0)
return;
// 针对表单
var formPanel = this.getFormPanel();
if (formPanel.getForm().isValid())
formPanel.getForm().submit({
url:formPanel.url,
waitMsg :
'正在保存...',
success :
function (re, v) {},
failure :
function () {
JsHelper.ShowError(
"响应文本错误");
}
});
},
getFormPanel:
function(){
if (this.items.length == 0)
return;
return this.items.items[0];
}
})
Ext.reg(
'ux.Window',Pub.ux.Window);


 


5       EXTJS类图概览与代码


 


 



        Ext.ns('demo');
Ext.onReady(
function () {
Ext.QuickTips.init();
demo.run();
});

demo.formItems
= [{
xtype :
'textfield',
fieldLabel :
'ID',
name :
'id',
anchor :
'100%',
readOnly :
true,
style : {
background :
'#E6E6E6'
}
}, {
xtype :
'textfield',
fieldLabel :
'名称',
name :
'parentid',
anchor :
'100%',
allowBlank :
false
}, {
xtype :
'ux.RadioGroup',
fieldLabel :
'展开',
name :
'expandedgroup',
items : [{
xtype :
'radio',
name :
"expanded",
inputValue :
true,
boxLabel :
"是",
checked :
true

}, {
xtype :
'radio',
name :
"expanded",
inputValue :
false,
boxLabel :
"否"

}
]
}
];


/*
声明menu
new demo.menuClick({
treePanel : null,
......
})
*/
demo.menuClick
= Ext.extend(Ext.menu.Menu, {
constructor :
function (config) {
this.items = [{
text :
'添加节点',
scope :
this,
handler :
this.onNew
}, {
text :
'编辑节点',
scope :
this,
handler :
this.onEdit
}, {
text :
'删除节点',
scope :
this,
handler :
this.onDel
}
];
// 对象不存在,则返回
if (!config) {
demo.menuClick.superclass.constructor.apply(
this);
return;
}
Ext.apply(
this, config);
demo.menuClick.superclass.constructor.apply(
this);
},
onNew :
function () {
var formPanel = new Pub.ux.FormPanel({
url:
'Handler.ashx',
items:demo.formItems
});
var window = new Pub.ux.Window({
height:
300,
width:
300,
title :
'新增',
items : [formPanel]
});
window.show();
},
onEdit :
function () {
var selectNode = this.treePanel.getSelectionModel().getSelectedNode();
if (selectNode.id == 0) {
JsHelper.ShowWarning(
"根节点不提供编辑");
return;
}

var formPanel = new Pub.ux.FormPanel({
url:
'Handler.ashx',
items:demo.formItems
});
var window = new Pub.ux.Window({
title :
'编辑',
items : [formPanel]
});
// 加载数据
var json = {
"id" : selectNode.id,
"parentid" : selectNode.text,
"expandedgroup" : selectNode.expanded
};
formPanel.getForm().setValues(json);
window.show();
},
onDel :
function () {
var selectNode = this.treePanel.getSelectionModel().getSelectedNode();
if (selectNode.id == 0) {
JsHelper.ShowWarning(
"根节点不提供删除");
return;
}
JsHelper.OK(
"当前节点为" + selectNode.id + "<br />当前文本为" + selectNode.text);
}
});

demo.treePanel
= Ext.extend(Ext.tree.TreePanel, {
constructor :
function (config) {
// 默认加载
Ext.apply(this, {
enableDD :
false,
allowDrag :
false,
useArrows :
false,
lines :
true,
border :
false,
rootVisible :
true,
root :
new Ext.tree.AsyncTreeNode({
id :
"0",
text :
"超市商场",
expanded :
true, //展开
loader : new Ext.tree.TreeLoader({
url :
"handler.ashx"
})
})
});
Ext.apply(
this, config);
demo.treePanel.superclass.constructor.apply(
this);
}
});

demo.run
= function () {
var treePanel = new demo.treePanel();
var rightClick = new demo.menuClick({
treePanel : treePanel
});

// 右键监听
treePanel.on('contextmenu', function (node, event) {
// 阻止浏览器默认右键菜单显示
event.preventDefault();
node.select();
// 取得鼠标点击坐标,展示菜单
rightClick.showAt(event.getXY());
});

var panelMain = new Ext.Panel({
title :
"系统管理",
width :
300,
height :
450,
autoScroll :
true,
layout :
'fit',
iconCls :
"form-window",
items : treePanel,
collapsible :
false
});

panelMain.render(document.body);
}


 


6       JSON序列化


需要引入Newtonsoft.Json.dll,进行JSON序列化。



using Newtonsoft.Json;
using Newtonsoft.Json.Converters;

SYSTEMMANAGER sysmanager
= new SYSTEMMANAGER();
SYSTEM_TREE obj
= new SYSTEM_TREE();
obj.id
= int.Parse(context.Request["node"]);
obj
= sysmanager.GetTree(obj);
string json = JsonConvert.SerializeObject(obj.children, Formatting.None,
new Newtonsoft.Json.Converters.IsoDateTimeConverter() { DateTimeFormat = "yyyy-MM-dd HH:mm:ss" });


 


7       运行效果





8       总结


对于项目系统目录级数不限,可采用递归树的解决方案。


Newtonsoft.Json.dll可对DataTable与List<Object>等泛型进行序列化。


 


源代码下载:


http://files.cnblogs.com/yongfeng/EXTJS_TREE.rar


PDF下载:


http://files.cnblogs.com/yongfeng/EXTJS_TREE.pdf


 

本文链接

分享到:
评论

相关推荐

    extjs ajax tree(js动态树,无需递归)

    6. **渲染树组件**:最后,将创建好的树组件添加到页面布局中。 在提供的资源"tree1"中,可能包含了实现上述过程的相关代码示例。通过查看和学习这个例子,你可以了解如何在实际项目中实现ExtJS AJAX树。 值得注意...

    extJS 可视化编程工具破解版

    在使用ExtJS可视化编程工具时,开发者可以利用其内置的组件库,如表格、树形视图、图表、表单元素等,快速构建出复杂的交互式用户界面。此外,这些组件大多具有高度可配置性,可以通过设置各种属性来满足特定的需求...

    EXTjs图开编程EXTJS

    EXTJS的图形组件不仅适用于数据可视化,还适合构建仪表盘和报告,为企业决策提供直观的数据支持。它们可以与其他EXTJS组件(如表格、面板、窗口等)灵活组合,构建出功能完善的业务系统。 在实际开发中,EXTJS的...

    Extjs树分页组件扩展

    这个文件名暗示了它是实现树分页功能的核心代码。在ExtJS中,"Store"通常用于管理数据源,它与TreeLoader配合,负责数据的获取、加载和存储。在这个扩展中,TreeLoaderStore可能是结合了TreeLoader和Store概念的一个...

    extjs实现动态树

    1. `Ext.tree.TreePanel`:这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件,支持数据源绑定,能轻松实现动态加载。 2. 数据源:动态树的数据通常来自服务器,通过Ajax请求获取JSON格式的节点数据...

    Extjs自定义组件-下拉树

    ### Extjs自定义组件——下拉树:深入解析与实现 在现代Web开发中,Extjs作为一款功能强大且灵活的框架,深受开发者喜爱。它提供了丰富的UI组件库,能够帮助开发者快速构建复杂的用户界面。其中,自定义组件是Extjs...

    ExtJS 组件扩展

    例如,实现一个下拉树(ComboTree)组件,即通过扩展现有的ComboBox组件来满足特殊的需求。 - **特点**: - 技术导向:需要深入理解组件的工作原理、生命周期以及渲染机制。 - 代码细节多:涉及外观设计、DOM结构...

    extjs增删改查分页树

    extjs增删改查分页树

    extjs 高级编程

    extjs高级编程extjs高级编程extjs高级编程

    extjs 树 搜索

    2. **TreePanel组件**:EXTJS中的树形控件是通过TreePanel组件实现的。TreePanel包含了渲染树形结构所需的配置项,如store、root、displayField等。 3. **TreeStore**:存储树形数据的仓库,它负责加载和管理树形...

    extjs树形下拉框treeField

    extjs 树形下拉列表框,可以进行数据选择,数据回显。

    ExtJS4下拉树组件

    ### ExtJS4 下拉树组件知识点详解 #### 一、概述 在ExtJS4中,下拉树组件(TreeComboBox)是一种特殊的组合框,它结合了下拉列表和树形结构的功能,允许用户通过选择树节点来填充组合框的值。这种组件广泛应用于...

    extjs 3.1 组件 使用

    它提供了丰富的组件库,包括表格、表单、菜单、工具栏、树形结构等,使得开发者能够轻松创建复杂的用户界面。在本篇文章中,我们将深入探讨如何在实际项目中使用ExtJS 3.1的组件。 首先,`css`目录包含了ExtJS 3.1...

    EXTJS 4 树形表格组件使用示例

    其中,树形表格组件(TreeGrid)结合了树形结构和表格数据展示的功能,能够帮助开发者以更直观的方式展示层次化数据。在EXTJS 4中,树形表格组件不仅支持基本的节点操作,如展开、折叠、拖放,还提供了丰富的数据...

    ExtJS桌面化(desktop)插件Demo项目

    1. ExtJS框架的应用,特别是其组件化和MVC模式。 2. "desktop"插件的使用和定制,包括桌面环境的构建、小部件管理和任务管理。 3. 动态加载技术,通过`Ext.Loader`优化应用性能。 4. 配合myeclipse进行Web应用的开发...

    EXTjs组件解释文档

    包括从基础到深入的EXTjs组件解释,EXTjs实例,EXT核心API详解,Ext.DomQuery类

    EXTJS 上传组件及示例

    EXTJS 是一款基于JavaScript的富客户端应用开发框架,由Sencha公司开发,它提供了一整套组件化的用户界面元素和强大的数据绑定功能。在EXTJS 中,上传组件是用于实现文件上传功能的关键部分,这对于创建交互性强、...

    EXTjs组件.pdf

    EXTjs组件是构建EXTJS应用程序的核心元素,它们是基于Ext.Component的子类,具备自动化的生命周期管理,包括创建、渲染、尺寸调整、定位和销毁等关键功能。组件是EXTJS中可交互的部件,可以是按钮、表格、面板等,...

    Extjs6中利用treePicker实现的下拉树中

    利用extjs6自带的treePicker插件,实现下拉树的效果

Global site tag (gtag.js) - Google Analytics