Ext树操作

最新推荐文章于 2016-12-13 10:42:47 发布
原创 最新推荐文章于 2016-12-13 10:42:47 发布 · 105 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#EXT #JSP #json #数据结构

本文介绍了一种基于ExtJS的后台树形结构实现方法，通过定义树节点的数据结构和操作方式，实现了节点的拖拽、添加、编辑和删除等功能。文章详细展示了如何利用JavaScript和ExtJS框架来维护树形结构的一致性和正确性。

后台树节点定义 

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 js 下拉树
04-09
ext js 下拉树 真正可执行 包括引入的js和css
ExtJs树例子
03-21
NULL 博文链接：https://penghuaiyi.iteye.com/blog/951782
Ext 树操作
{ focus : web }
11-10 146
 后台 树 节点 定义 menu_info { menu_id (0x500), // 本id menu_parent_id (0x501), //父亲id menu_title (0x502), menu_action (0x503), menu_nextId (0x504), //兄弟id menu_isleaf (0x507), // 是否叶子节点 m...
Ext的tree
下雨天的程序生活专栏
09-22 994
 YUI.ext中的Tree组件可以用来在页面实现树型布局的效果，包括常见的树型菜单等，那么我们怎样才能生成一个Tree呢，主要有以下四个步骤；1.定义一个Tree对象：var tree = new Ext.tree.TreePanel(tree, {                  animate:true,                   loader: new Ext.tree
ext 树
hanweiisjerry1的专栏
06-18 196
[color=blue][size=medium][size=medium]3.1. 真的，我是为了树，才开始学ext的。 之前使用过xtree和dojo中的tree，感觉都是怪怪的，界面简陋，功能也不好上手，待看到ext里的树形真是眼前一亮，在此之前，动态增 添，修改删除节点，拖拽和右键菜单，我一直认为是不可能实现的任务，而在ext上却轻松实现了，而且界面和动画效果相当完美。真是让人爱...
ext2.0 树的增删改操作
06-17
分享这个项目也能帮助其他初学者理解和掌握Ext2.0中的树形控件操作，提升他们使用这个框架的能力。 以上就是关于"ext2.0 树的增删改操作"及其相关知识的详细说明。掌握这些内容，将有助于你在构建Web应用时更熟练地...
Ext树例子
01-31
总结来说，`Ext树例子`是关于如何使用ExtJS库中的`Ext.tree.Panel`组件来展示和操作层次化数据的一个主题。`tree1.txt`和`tree2.txt`文件提供了创建树的数据源，通过解析这些文件，我们可以构建出具有实际数据的交互...
Ext下拉列表树
05-18
这个类扩展自`Ext.form.field.Select`，因此它具备常规下拉列表的所有特性，同时增加了树形结构的展示和操作。以下是一些关于如何使用Ext下拉列表树的关键知识点： 1. **配置项**：创建下拉列表树时，需要定义一些...
静态ext树
03-24
标题中的“静态ext树”可能是指在计算机编程中，一种特定的数据结构或库，用于构建和操作静态文件系统。在很多编程语言中，文件系统操作是通过某种抽象的数据结构来实现的，比如树形结构，这有助于高效地管理和检索...
ext树
Y_FQY的博客
12-13 733
[javascript] view plain copy <script type="text/javascript"> Ext.onReady(function() { //树形结构 //创建一棵树：
EXT 树
兰染
03-30 1142
最近项目做完了 没事 就来学习学习EXT JS   ，不过 大部分代码是从网上copy 过来 学习的  我最先学会的就是建树了 ，EXT JS 很强大 ，不过看的我头也大了，能建个树我就很高兴了，以后基础知识慢慢学习吧 ，最主要是能看见效果出来 先建个tree.jsp内容如下： My JSP 'tree.jsp' starting page
Ext动态树详解
weixin_30323961的博客
05-18 137
最近在学习Ext，在园子里也看了好多别人的文章，今天自己动手来实现一个动态树。首先先看效果图吧 效果就如上面所示，接下来一步一步来实现吧！代码只贴关键部分！ 第一 数据库表的设计 还是请大家看图 很简单的表，就不说了。 第二 数据层用Linq 文件是：TreeLinqAccess 代码 public List<...
Ext树-构建
12-22 132
构建Ext 树，总的说来（我自己的经验）有两种 一种是dom拼接，另外种是是给树制定一个节点加载器，可以用来从服务器端动态加载树的节点信息   先来看看 dom拼接： Ext.onReady(function() { var root = new Ext.tree.TreeNode({ id : "root", text : "树的根" })...
EXT树
zhb200621的专栏
03-29 331
<br />http://www.blogjava.net/wangbing/archive/2010/01/03/308071.html
《人人都玩开心网：Ext JS+Android+SSH整合开发Web与移动SNS》销售排名第4，发篇ExtJS的文章(拖放树结点)庆祝下
一个被知识诅咒的人
08-03 2383
    《人人都玩开心网：Ext JS+Android+SSH整合开发Web与移动SNS》一书上架短短几天，就进入了互动网计算机类销售总排名第4的好成绩(见下图）。现发篇Ext JS的技术文章庆祝下。<br /><br /><br /><br /><br />拖放树结点<br /><br /><br /><br />在本文将介绍TreePanel组件非常有意思的一个功能：结点拖放。要使TreePanel组件的结点可以拖放非常简单，只需要将TreePanel类的enableDD选项参数设为true即可
构建EXT树
niuxudong1的专栏
07-30 353
Ext.onReady(function(){ var mytree = new Ext.tree.TreePanel({          el : "container",          animate : true, 　　　title:"可增删改的树tree
Ext 权限树
ws_hgo的专栏
12-03 4376
Ext 权限树
EXT树的实现
pacer123
07-17 157
       项目中用到了书目录管理，需要做成树状结构的管理。下面将部分有用代码写出来，希望能给需要用到的人一些小小的帮助。项目中应用struts2+spring+ext。下面简要介绍几个步骤：        1、前台extjs的展现代码：              xinli.ui.SmsCatalogTreePanel = Ext.extend(Ext.tree.TreePanel, { ...
Ext树实现控制选择与撤销功能
在EXT树控件的上下文中，撤销功能可能包括节点的添加、删除、修改等操作的回退。 要实现撤销功能，通常需要一个机制来记录操作历史，以便在需要的时候可以重新执行之前的步骤。这可以是一个栈（Stack）结构，用来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值