- 浏览: 509983 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (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 1459Ext.onReady(function() { // 树 ... -
Ext动态grid
2010-08-24 23:54 1572在做报表的时候,需要 ... -
Extjs 工具
2010-08-19 12:24 808调试工具:调试ExtJs利器 - Firebug( ... -
Extjs upload(ext官网例子)
2010-08-16 14:08 8976http://dev.sencha.com/deploy/de ... -
Extjs uploadDialog
2010-08-16 13:08 1743Extjs里文件上传需要扩展的组件,自己在做extjs例子,没 ... -
Extjs php fileupload
2010-08-16 13:00 1572upload.html <html> < ... -
ext renderer
2010-08-10 22:04 2299renderer:function(value, cellm ... -
timefield demo
2010-08-09 15:10 1163<mce:script type="text/ ... -
ext datefield timefield and format
2010-08-09 15:06 2133DateField TimeField 日期控件 时间控件 日 ... -
Extjs form
2010-08-07 19:30 3166OK,前面我们已经学过了GridPanel,TabPanel ... -
Extjs 学习
2010-08-07 11:45 688http://blog.csdn.net/lenotang/a ... -
深入浅出Ext_JS:数据存储与传输
2010-07-09 15:44 751附件 -
ext radiogroup
2010-07-06 21:10 2462Ext.onReady(function () { ... -
Ext builder 和ext网站
2010-06-28 09:05 924http://tof2k.com/ext/formbuilde ... -
extjs 打印
2010-06-22 20:56 2516function () { /** * Pr ... -
Extjs提交数据
2010-06-17 17:43 1332Ext JS FormPanel 提交数据 ...
相关推荐
该项目实现了树的增删改操作,还有下拉树;该项目的使用说明在压缩包中, 我也是ext的初学者,为了在以后的项目中使用,此处做已备份,希望对大家也有所帮助
Ext2.0不仅仅实现了复选框的树形菜单,而且使得在选中某个节点时,如果有子节点,那么就能够将所有的字节点全部选中,当然你也可以直接选择你希望的节点。但是,当你第一次选中某个有子节点但是子节点并没有展开的...
由于项目的需要最近在学习ext,在项目中必不可少用到了tree,并且要对tree进行增、改、删的操作。上网找了很多不错的学习资料把这些功能组织在一起。在学习ext的过程中花了不少时间,我想很多网友刚开始学习ext的...
ext 关于树目录的函数,关键对象,方法的操作说明,和相关ECLIPSE上的插件安装。
ext开发的动态树的生成,里面还有对树的各种增删改操作
一个基于Ext4.2可增删树的例子,解决了Ext不能动态改变leaf属性的问题。该树可自动判断当增删操作后,重新更新自我状态以便显示为叶节点或者非叶节点。
8.5.5. 反向操作,ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选,菜单里搞这套 8.7.4. 小把戏,定制好的菜单 8.7.5. SplitButton...
第5~9章分别讲解了ext js的事件及其应用、选择器与dom操作、数据交互、模板与组件、容器、面板、布局与视图;第10章和第11章分别详细介绍了重构后的gird和与gird同源的树;第12~16章分别讲解了表单、窗口、按钮、...
8.5.5. 反向操作,ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选,菜单里搞这套 8.7.4. 小把戏,定制好的菜单 8.7.5. SplitButton...
ext的树的实例.通过右键菜单操作树节点对数据库进行增删改查.
8.5.5. 反向操作,ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选,菜单里搞这套 8.7.4. 小把戏,定制好的菜单 8.7.5. ...
全书由一个可以引领读者快速入门的“hello world”示例开篇,紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后以一...
全书由一个可以引领读者快速入门的“hello world”示例开篇,紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后以一...
实现的树的增删改操作,并且添加了权重,及树节点的排列顺序, 备以后使用,同时希望能为用的的兄弟姐妹提供以下帮助,不足之处希望多多指点
7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...
全书由一个可以引领读者快速入门的“hello world”示例开篇,紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后以一...
第5~9章分别讲解了ext js的事件及其应用、选择器与dom操作、数据交互、模板与组件、容器、面板、布局与视图;第10章和第11章分别详细介绍了重构后的gird和与gird同源的树;第12~16章分别讲解了表单、窗口、按钮、...
包括布局、事件、grid的绑定(包含增删改)以及数据库分页还有表单绑定取值和dateview控件的使用,树的使用,包含拖拉,修改等操作 dll文件为extnet3.5,可自行下载黏贴到要目录下的net35文件夹里即可
例子包括对GWT-EXT的对表格,树,面板操作。对与IBATIS数据结合使用。包括客户端与服务器端,此例子在netbeans6.5下面可以正常运行 整个工程文件太大,这里只能上传源代码,如果需要整个工程的可以发邮件给我 ...
全书由一个可以引领读者快速入门的“Hello World”示例开篇,紧接着对Ext JS的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后一个...