TeddyWang
- 浏览: 520171 次
- 性别:
- 来自: 深圳
-
文章分类
- 全部博客 (299)
- Oracle（pl/sql_Erp_Pro*C） (69)
- 设计模式 (4)
- spring (23)
- ext (17)
- apache开源项目应用 (4)
- jquery (16)
- 生活琐事 (8)
- 下载资源 (23)
- mysql (2)
- Eclipse使用积累 (5)
- 报表类（报表/图表） (13)
- php (4)
- Web多彩文本框 (3)
- json (4)
- jqgrid (2)
- ant (2)
- java算法积累 (8)
- EL表达式/JSTL (4)
- poi (3)
- gwt (2)
- 爬网第一步 (2)
- javascript (17)
- Javaweb (8)
- tomcat (1)
- flex (1)
- Java&DB (3)
- J2SE (7)
- linux (3)
- 数据结构 (1)
- dot net (5)
- struts (1)
- ibatis (1)
- log4j (1)
- 项目管理 (1)
- Java native interface(jni,jacob......) (5)
- applet (1)
- VB.net/C#.net/JNI (20)
- css (1)
- Sqlite (1)
- servlet (1)
- REST (1)
最新评论
-
wenhurena：
能不能给一下解压密码roki.work.2017@gmail. ...
Ebs解体新書と学習資料1 -
liutao1600：
楼主写的太好了，每天学习～～
Spring_MVC(6)测试 -
liutao1600：
太好了，每天学习你的文章～～～
Spring_MVC(3)表单页面处理 -
liutao1600：
学习了，太好了
Spring_MVC(2)控制层处理 -
liutao1600：
学习了～～～
Spring_MVC(1)构建简单web应用
后台树节点定义
menu_info
{
menu_id (0x500), // 本id
menu_parent_id (0x501), //父亲id
menu_title (0x502),
menu_action (0x503),
menu_nextId (0x504), //兄弟id
menu_isleaf (0x507), // 是否叶子节点
menu_roles (0x508)
}
关键是为了存放同级节点之间的顺序关系 ，而引入 兄弟节点 next ，这样的话，可以在处理拖放的时候，更新相应的 next 和 parent 就行了 ，没有使用 treeeditor，因为树节点的卫星数据太多了，还是window操作
后台只要处理 drop ,add ,del edit ,get 操作，返回 AsyncNode 对应数据，则ext 树自动界面变更，后台关键要维护好 链结构
/*
示例代码 ， 全部使用 全局变量(不建议)，请在产品中修改为局部变量
*/
function initTree() {
window.tree = new Ext.tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
dataUrl: 'menu/get-menus.jsp',
listeners: {
'beforemovenode': function (tree, node, oldParent, newParent, index) {
//alert(node.text + " before move from " + oldParent.text + " to " + newParent.text + " index " + index);
//操作的遮罩层
if (!window.treeLoadMask) {
window.treeLoadMask = new Ext.LoadMask(window.tree.body, {
msg: "处理中"
});
}
window.treeLoadMask.show();
var oldC = (oldParent.childNodes);
var indexI = oldC.indexOf(node);
//alert(indexI);
//(1) 拖放节点 的 下一个节点，父节点改变
var menuIdOwer = node.id;
var menuNewParentId = newParent.id;
//(2) 拖放前 拖放节点的上一个节点 的 下一个指向改变
var menuOldPreId = '';
var menuOldPreNext = '';
if (indexI != 0) {
menuOldPreId = oldC[indexI - 1].id;
}
if (indexI + 1 != oldC.length) {
menuOldPreNext = oldC[indexI + 1].id;
} else {
menuOldPreNext = 'node-1';
}
var newC = newParent.childNodes;
//(3) 拖放后 ，新的兄弟节点 指向也要改变
var menuNewNextId = '';
var menuNewPreId = '';
var menuNewPreNext = '';
if (newC.length == index) menuNewNextId = 'node-1';
else menuNewNextId = newC[index].id;
if (index != 0) {
menuNewPreId = newC[index - 1].id;
menuNewPreNext = node.id;
}
var conn = new Ext.data.Connection();
// 发送异步请求
conn.request({
// 请求地址
url: 'menu/update-menus.jsp',
method: 'post',
params: {
'menuIdOwer': menuIdOwer,
'menuNewParentId': menuNewParentId,
'menuNewNextId': menuNewNextId,
'menuOldPreId': menuOldPreId,
'menuOldPreNext': menuOldPreNext,
'menuNewPreId': menuNewPreId,
'menuNewPreNext': menuNewPreNext
},
// 指定回调函数
callback: callback
});
//回调函数
function callback(options, success, response) {
if (success) {
try {
var jsonObj = Ext.util.JSON.decode(response.responseText);
} catch(e) {}
if (jsonObj && jsonObj.success) {} else alert(response.responseText);
} else {
alert(response.responseText);
}
window.treeLoadMask.hide();
}
},
'contextmenu': function (n, ee) {
if (!window.treerowcontextmenu_) {
window.treerowcontextmenu_ = Ext.menu.MenuMgr.get({
id: 'treerowcontextmenu_-ctx',
items: [{
text: '刷新子节点',
iconCls: 'blist',
handler: function () {
if (!window.tree.getSelectionModel().getSelectedNode().leaf) window.tree.getSelectionModel().getSelectedNode().reload();
}
},
{
text: '添加标题',
iconCls: 'blist',
handler: function () {
var node = window.tree.getSelectionModel().getSelectedNode();
if (node.leaf) {
Ext.Msg.alert('禁止', '该节点不是目录');
return;
}
Ext.getCmp('add_menu_parent_id').setValue(node.id.substring(4));
var oldC = (node.childNodes);
var next_id = -1;
if (oldC && oldC.length != 0) next_id = oldC[0].id.substring(4);
Ext.getCmp('add_menu_next_id').setValue(next_id);
window.treeAddwin.cur_node = node;
node.expand(false, true, function () {
window.treeAddwin.show()
});
}
},
{
text: '修改标题',
iconCls: 'blist',
handler: function () {
var node = window.tree.getSelectionModel().getSelectedNode();
Ext.getCmp('edit_menu_id').setValue(node.id.substring(4));
Ext.getCmp('edit_menu_title').setValue(node.text);
Ext.getCmp('edit_menu_action').setValue(node.attributes.href);
Ext.getCmp('edit_menu_roles').setValue(node.attributes.menu_roles);
window.treeEditwin.curNode = node;
window.treeEditwin.show();
}
},
{
text: '删除节点',
iconCls: 'blist',
handler: function () {
//操作的遮罩层
var node = window.tree.getSelectionModel().getSelectedNode();
node.expand(false, true, function () {
if (node.firstChild || !node.parentNode) {
alert('还有子节点呢');
return;
}
if (!confirm('确认删除？')) {
return;
}
if (!window.treeLoadMask) {
window.treeLoadMask = new Ext.LoadMask(window.tree.body, {
msg: "处理中"
});
}
window.treeLoadMask.show();
var pre = node.previousSibling;
var post = node.nextSibling;
var pre_id = '';
var pre_next_id = '';
if (pre) {
pre_id = pre.id.substring(4);
if (post) pre_next_id = post.id.substring(4);
else pre_next_id = -1;
}
var conn = new Ext.data.Connection();
// 发送异步请求
conn.request({
// 请求地址
url: 'menu/del-menu.jsp',
method: 'post',
params: {
'del_menu_id': node.id.substring(4),
'pre_id': pre_id,
'pre_next_id': pre_next_id
},
// 指定回调函数
callback: callback
});
//回调函数
function callback(options, success, response) {
if (success) {
try {
var jsonObj = Ext.util.JSON.decode(response.responseText);
} catch(e) {}
if (jsonObj && jsonObj.success) {
node.parentNode.removeChild(node);
} else alert(response.responseText);
} else {
alert(response.responseText);
}
window.treeLoadMask.hide();
}
});
}
}]
});
}
window.tree.getSelectionModel().select(n);
window.treerowcontextmenu_.showAt(ee.getXY());
ee.preventDefault();
}
},
root: {
nodeType: 'async',
text: '(支持，右键,拖放)',
draggable: false,
id: 'node-1',
singleClickExpand: true,
leaf: false,
expandable: true
}
});
/*
window.treeEditer = new Ext.tree.TreeEditor(
window.tree,
{allowBlank: false});
window.treeEditer.on("complete", function(treeEditer, value, ovalue) {
//alert(value);
});
*/
window.treeAddForm = new Ext.FormPanel({
//width: 500,
//labelWidth:70,
//width: 560,
baseCls: 'x-plain',
method: 'POST',
autoHeight: true,
autoWidth: true,
bodyStyle: 'padding:0 10px 0;',
url: 'menu/add-menu.jsp',
//frame:true,
//animCollapse:true,
defaultType: 'textfield',
items: [{
xtype: 'hidden',
name: 'menu_parent_id',
id: 'add_menu_parent_id'
},
{
xtype: 'hidden',
name: 'menu_next_id',
id: 'add_menu_next_id'
},
{
fieldLabel: '标题',
allowBlank: false,
name: 'menu_title',
id: 'add_menu_title'
},
{
fieldLabel: '动作',
name: 'menu_action',
id: 'add_menu_action'
},
{
fieldLabel: '权限',
allowBlank: false,
name: 'menu_roles',
id: 'add_menu_roles'
},
{
checked: true,
fieldLabel: '类型',
xtype: 'radio',
boxLabel: '节点',
name: 'menuIsLeaf',
inputValue: '1',
id: 'add_menuIsLeaf'
},
{
fieldLabel: '',
xtype: 'radio',
labelSeparator: '',
boxLabel: '目录',
name: 'menuIsLeaf',
inputValue: '0'
}],
buttons: [{
text: '确定',
handler: function () {
if (treeAddForm.form.isValid()) {
if (!window.treeLoadMask) {
window.treeLoadMask = new Ext.LoadMask(window.tree.body, {
msg: "处理中"
});
}
window.treeLoadMask.show();
treeAddForm.form.submit({
url: 'menu/add-menu.jsp',
success: function (form, action) {
var before = null;
var oldC = (window.treeAddwin.cur_node.childNodes);
if (oldC && oldC.length != 0) before = oldC[0];
var newNode = new Ext.tree.AsyncTreeNode({
leaf: Ext.getCmp('add_menuIsLeaf').getValue() == '1',
text: Ext.getCmp('add_menu_title').getValue(),
href: Ext.getCmp('add_menu_action').getValue(),
id: 'node' + action.result.new_menu_id,
nodeType: 'async',
expandable: Ext.getCmp('add_menuIsLeaf').getValue() == '0'
});
window.treeAddwin.cur_node.insertBefore(newNode, before);
window.treeLoadMask.hide();
window.treeAddwin.hide();
},
failure: function (form, action) {
Ext.Msg.alert('失败', action.result.error);
window.treeLoadMask.hide();
window.treeAddwin.hide();
},
waitMsg: '添加中',
waitTitle: '请等待'
});
} else {}
}
}]
});
window.treeAddwin = new Ext.Window({
//width : 500,
//height : 300,
layout: 'fit',
title: '添加树结点',
//frame:true,
items: treeAddForm,
bodyStyle: 'padding:5px;',
closeAction: 'hide',
renderTo: document.body
});
window.treeEditForm = new Ext.FormPanel({
//width: 500,
//labelWidth:70,
//width: 560,
baseCls: 'x-plain',
method: 'POST',
autoHeight: true,
autoWidth: true,
bodyStyle: 'padding:0 10px 0;',
url: 'menu/edit-menu.jsp',
//frame:true,
//animCollapse:true,
defaultType: 'textfield',
items: [{
xtype: 'hidden',
name: 'edit_menu_id',
id: 'edit_menu_id'
},
{
fieldLabel: '标题',
allowBlank: false,
name: 'edit_menu_title',
id: 'edit_menu_title'
},
{
fieldLabel: '动作',
name: 'edit_menu_action',
id: 'edit_menu_action'
},
{
fieldLabel: '权限',
allowBlank: false,
name: 'edit_menu_roles',
id: 'edit_menu_roles'
}],
buttons: [{
text: '确定',
handler: function () {
if (treeEditForm.form.isValid()) {
if (!window.treeLoadMask) {
window.treeLoadMask = new Ext.LoadMask(window.tree.body, {
msg: "处理中"
});
}
window.treeLoadMask.show();
treeEditForm.form.submit({
url: 'menu/edit-menu.jsp',
success: function (form, action) {
var node = window.treeEditwin.curNode;
node.setText(Ext.getCmp('edit_menu_title').getValue());
node.attributes.menu_roles = Ext.getCmp('edit_menu_roles').getValue();
node.attributes.href = Ext.getCmp('edit_menu_action').getValue();
node.getUI().getAnchor().setAttribute('href', node.attributes.href);
window.treeLoadMask.hide();
window.treeEditwin.hide();
},
failure: function (form, action) {
Ext.Msg.alert('失败', action.result.error);
window.treeLoadMask.hide();
},
waitMsg: '添加中',
waitTitle: '请等待'
});
} else {}
}
}]
});
window.treeEditwin = new Ext.Window({
//width : 500,
//height : 300,
layout: 'fit',
title: '修改树结点',
//frame:true,
items: treeEditForm,
bodyStyle: 'padding:5px;',
closeAction: 'hide',
renderTo: document.body
});
}
分享到：
发表评论
-
Ext tree add update delete
2010-09-26 16:33 1492Ext.onReady(function() { // 树 ... -
Ext动态grid
2010-08-24 23:54 1603在做报表的时候，需要 ... -
Extjs 工具
2010-08-19 12:24 834调试工具:调试ExtJs利器 - Firebug( ... -
Extjs upload（ext官网例子）
2010-08-16 14:08 9019http://dev.sencha.com/deploy/de ... -
Extjs uploadDialog
2010-08-16 13:08 1778Extjs里文件上传需要扩展的组件，自己在做extjs例子，没 ... -
Extjs php fileupload
2010-08-16 13:00 1618upload.html <html> < ... -
ext renderer
2010-08-10 22:04 2326renderer:function(value, cellm ... -
timefield demo
2010-08-09 15:10 1189<mce:script type="text/ ... -
ext datefield timefield and format
2010-08-09 15:06 2164DateField TimeField 日期控件 时间控件 日 ... -
Extjs form
2010-08-07 19:30 3201OK，前面我们已经学过了GridPanel，TabPanel ... -
Extjs 学习
2010-08-07 11:45 722http://blog.csdn.net/lenotang/a ... -
深入浅出Ext_JS：数据存储与传输
2010-07-09 15:44 779附件 -
ext radiogroup
2010-07-06 21:10 2516Ext.onReady(function () { ... -
Ext builder 和ext网站
2010-06-28 09:05 949http://tof2k.com/ext/formbuilde ... -
extjs 打印
2010-06-22 20:56 2549function () { /** * Pr ... -
Extjs提交数据
2010-06-17 17:43 1367Ext JS FormPanel 提交数据 ...
相关推荐
分享这个项目也能帮助其他初学者理解和掌握Ext2.0中的树形控件操作，提升他们使用这个框架的能力。 以上就是关于"ext2.0 树的增删改操作"及其相关知识的详细说明。掌握这些内容，将有助于你在构建Web应用时更熟练地...
总结来说，`Ext树例子`是关于如何使用ExtJS库中的`Ext.tree.Panel`组件来展示和操作层次化数据的一个主题。`tree1.txt`和`tree2.txt`文件提供了创建树的数据源，通过解析这些文件，我们可以构建出具有实际数据的交互...
其中，“Ext树”（Ext Tree）是ExtJS中的一个重要组件，用于展示层级结构的数据，如文件系统、组织架构等。本文将深入探讨如何在ExtJS中创建一个树形视图。 首先，理解Ext树的基本结构至关重要。一个Ext树由节点...
在IT领域，EXT是一个流行的JavaScript库，用于构建富客户端应用程序，尤其在Web应用开发中广泛应用。...通过这种方式，你可以构建一个动态、交互性强的EXT树控件，有效地展示和操作数据库中的层次结构数据。
在本主题中，“ext树的控制选择和撤销”指的是EXT树组件提供的功能，允许用户进行多选、单选，并支持撤销这些操作。 EXT树的核心类是`Ext.tree.TreePanel`，它提供了丰富的配置项和方法来定制和操作树形结构。控制...
1. `tree.htm`：这可能是一个包含下拉树示例的HTML文件，用于展示如何使用Ext JS创建和操作下拉树。 2. `dropTree.htm`：同样，这可能是一个与下拉树相关的HTML页面，可能包含了不同的实现或示例。 3. `MzTreeView...
下拉树（Dropdown Tree）是Ext JS中的一种特殊控件，它结合了下拉列表和树结构的功能，通常用于展示层次化的数据，并让用户从中选择一个或多个项。 下拉树的基本结构由两部分组成：一个文本框和一个关联的下拉面板...
【Ext树】是一种基于Ext JS库的图形用户界面组件，用于呈现层次结构的数据。Ext JS是一个强大的JavaScript框架，主要用于构建富客户端应用。在本案例中，“简单的ext树”是一个为初学者设计的基础教程，旨在帮助那些...
这个类扩展自`Ext.form.field.Select`，因此它具备常规下拉列表的所有特性，同时增加了树形结构的展示和操作。以下是一些关于如何使用Ext下拉列表树的关键知识点： 1. **配置项**：创建下拉列表树时，需要定义一些...
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式，它扩展了基本的树视图，加入了复选框功能。 复选框树（Checked Tree）允许用户通过复选框来选择或取消选择树结构中的节点。这种...
首先，让我们了解EXT树形菜单的基本概念。EXT的TreePanel组件是实现树形结构的主要工具，它能够展示层次化的数据，通常用于导航或展现层级关系。树形菜单支持节点的展开、折叠、添加和删除，以及各种交互操作。 要...
"EXT级联选择的树形控件"是一个实现树形结构并支持级联选择的EXT组件。在实际应用中，它可以帮助用户通过树节点的选择来联动控制其他相关选项的状态。这个控件可能包含以下关键特性： 1. **树形结构**：每个节点...
在给定的标题“Ext树形菜单（我自己做的）”中，我们可以推断出这个压缩包包含了一个由开发者自定义的ExtJS树形菜单组件。树形菜单是用户界面中常用的一种元素，它用于展示层次结构的数据，比如文件系统、组织结构或...
Ext2.0不仅仅实现了复选框的树形菜单，而且使得在选中某个节点时，如果有子节点，那么就能够将所有的字节点全部选中，当然你也可以直接选择你希望的节点。但是，当你第一次选中某个有子节点但是子节点并没有展开的...
本文将深入探讨如何处理无限级JSON数据格式并实现动态加载，以优化EXT树的性能。 首先，我们要理解EXT树的基本结构。EXT树的每个节点都是一个`Ext.tree.Node`对象，包含ID、文本、子节点等属性。无限级树意味着树的...
从给定的文件信息中，我们可以深入探讨“ext树实例代码”这一主题，了解如何在Ext JS中详细应用tree控件。 ### 标题：ext树实例代码 #### 描述：ext中，tree控件的详细应用，实例。 ### 知识点解析： **1. Ext ...
总的来说，EXT实现动态树功能涉及到EXT TreePanel的使用、数据存储的配置、节点操作的实现以及用户交互的处理。通过深入理解和实践这些知识点，你可以创建出功能强大的动态树形视图，满足复杂的数据管理和展示需求。
这个"EXT 树形结构样例"提供了使用JSON格式返回数据类型的具体示例，帮助开发者理解如何有效地构建和操作EXT Tree。 首先，让我们深入理解EXT Tree的基本概念。EXT Tree是由节点（Nodes）组成的，每个节点可以有子...
创建一个基本的EXT树形菜单，首先需要定义一个配置对象，包含`title`（菜单标题）、`store`（存储树形数据的Store）和`rootVisible`（是否显示根节点）等属性。例如： ```javascript var treePanel = Ext.create...
在提供的`动态树例子json`文件中，可能包含了上述提到的JSON数据结构，用于演示EXT如何处理动态树及各种操作。通过实际代码示例，我们可以更深入地理解EXT动态树的操作方式。在实践中，结合EXT的API文档和示例代码，...