Ext 树操作

最新推荐文章于 2016-12-13 10:42:47 发布
最新推荐文章于 2016-12-13 10:42:47 发布
阅读量107 收藏
点赞数
分类专栏： extjs 文章标签： EXT JSP json 数据结构

 后台 树 节点 定义 

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
    });
}
 

 

 
iteye_4865
关注
专栏目录
ExtJS06：树型Tree相关操作
10-06 578
1.树形代码如下： this.treepanel = new Ext.tree.TreePanel({ title : '指标参数分类', region : 'west', collapsible : true, autoScroll : true, split : true, height : 800, width : 180, id : 'Unim_AssTarPar_Tre
ext TreePanel树节点操作
xiaofeiazi的专栏
04-01 1618
1、全部展开 tree.expandAll(); 2、全部收缩 tree.collapseAll(); 3、得到父节点 node.parentNode 4、判断是否有父节点 node.parentNode==null 5、判断是否有子节点 node.hasChildNodes() 6、获取下一级所有子节点 node.eachChild(function(child) { }) 7、获取
ext js 下拉树
04-09
ext js 下拉树 真正可执行 包括引入的js和css
Ext的tree
下雨天的程序生活专栏
09-22 933
 YUI.ext中的Tree组件可以用来在页面实现树型布局的效果，包括常见的树型菜单等，那么我们怎样才能生成一个Tree呢，主要有以下四个步骤；1.定义一个Tree对象：var tree = new Ext.tree.TreePanel(tree, {                  animate:true,                   loader: new Ext.tree
ext 树
hanweiisjerry1的专栏
06-18 148
[color=blue][size=medium][size=medium]3.1. 真的，我是为了树，才开始学ext的。 之前使用过xtree和dojo中的tree，感觉都是怪怪的，界面简陋，功能也不好上手，待看到ext里的树形真是眼前一亮，在此之前，动态增 添，修改删除节点，拖拽和右键菜单，我一直认为是不可能实现的任务，而在ext上却轻松实现了，而且界面和动画效果相当完美。真是让人爱...
ext树
Y_FQY的博客
12-13 679
[javascript] view plain copy <script type="text/javascript"> Ext.onReady(function() { //树形结构 //创建一棵树：
EXT 树
兰染
03-30 1096
最近项目做完了 没事 就来学习学习EXT JS   ，不过 大部分代码是从网上copy 过来 学习的  我最先学会的就是建树了 ，EXT JS 很强大 ，不过看的我头也大了，能建个树我就很高兴了，以后基础知识慢慢学习吧 ，最主要是能看见效果出来 先建个tree.jsp内容如下： My JSP 'tree.jsp' starting page
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. **配置项**：创建下拉列表树时，需要定义一些...
ExtJs树例子
03-21
NULL 博文链接：https://penghuaiyi.iteye.com/blog/951782
静态ext树
03-24
标题中的“静态ext树”可能是指在计算机编程中，一种特定的数据结构或库，用于构建和操作静态文件系统。在很多编程语言中，文件系统操作是通过某种抽象的数据结构来实现的，比如树形结构，这有助于高效地管理和检索...
Ext动态树详解
weixin_30323961的博客
05-18 101
最近在学习Ext，在园子里也看了好多别人的文章，今天自己动手来实现一个动态树。首先先看效果图吧 效果就如上面所示，接下来一步一步来实现吧！代码只贴关键部分！ 第一 数据库表的设计 还是请大家看图 很简单的表，就不说了。 第二 数据层用Linq 文件是：TreeLinqAccess 代码 public List<...
Ext树-构建
12-22 94
构建Ext 树，总的说来（我自己的经验）有两种 一种是dom拼接，另外种是是给树制定一个节点加载器，可以用来从服务器端动态加载树的节点信息   先来看看 dom拼接： Ext.onReady(function() { var root = new Ext.tree.TreeNode({ id : "root", text : "树的根" })...
EXT树
zhb200621的专栏
03-29 290
<br />http://www.blogjava.net/wangbing/archive/2010/01/03/308071.html
《人人都玩开心网：Ext JS+Android+SSH整合开发Web与移动SNS》销售排名第4，发篇ExtJS的文章(拖放树结点)庆祝下
一个被知识诅咒的人
08-03 2298
    《人人都玩开心网：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 310
Ext.onReady(function(){ var mytree = new Ext.tree.TreePanel({          el : "container",          animate : true, 　　　title:"可增删改的树tree
Ext 权限树
ws_hgo的专栏
12-03 4334
Ext 权限树
EXT动态树形菜单实现
在这个例子中，EXT通过TreeLoader和TreePanel的配合，实现了动态加载和展示树形数据的功能，这在很多需要实时更新或根据用户操作加载更多内容的应用场景中非常有用。EXT的这种灵活性和可扩展性使其成为构建复杂前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值