EXT 做的导航树 可以调整节点顺序

最新推荐文章于 2023-03-20 16:52:51 发布
最新推荐文章于 2023-03-20 16:52:51 发布
阅读量1.3k 收藏
点赞数
分类专栏： EXTJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenkeqin_2012/article/details/21077771
版权

jsp页面

<input type="button"
                                            value='<s:text name="msg.portalMS.category.ordetcategory"/>' id="button"
                                            οnclick="javascript:NavTree.show();layerMaskShow();" title="<s:text name="msg.portalMS.category.ordetcategory"/>"/>
                                            <s:hidden name="cloneCategory.terminalType" id="category_terminalType" value="1"></s:hidden>
                                       

exttree.js

var basePath = "http://localhost:8080/portalMS";
if(typeof(glbRootPath) != "undefined"){
    basePath = glbRootPath;
}
// 扩展窗体
FormEditWin = function(){
    var curFormWin;
    return {
        width : 600,
        height : 400,
        showAddDirWin : function(parentNode) {
            // 显示添加子目录窗口
            var number = parentNode.indexOf(parentNode.lastChild) + 1;
            var editpage = 'resource/jsonData.action';
            var window = this.createWin("windirnew",$CON.AIMDIRECTORY_NEWNODE, editpage, function() {
                parentNode.reload();
            });
            window.show();
        },
        showAddLeafWin : function(parentNode) {
            // 显示添加子叶子节点窗口
            var number = parentNode.indexOf(parentNode.lastChild) + 1;
            var editpage = basePath
                    + "/treeAction!modifyNode.action?extTree.parentId="
                    + parentNode.id + "&extTree.leaf=1&extTree.number=" + number;
            var window = this.createWin("winleafnew", $CON.LEAF_NEWNODE, editpage, function() {
                parentNode.reload();
            });
            window.show();
        },
        showEditDirWin : function(node) {
            // 显示目录编辑窗口
            var editpage = basePath
                    + "/treeAction!modifyNode.action?extTree.id=" + node.id;
            var window = this.createWin("win" + node.id, node.text, editpage, function() {
                var nodeparent = node.parentNode;
                var tree = node.getOwnerTree();
                nodeparent.on("expand", function(pnode) {
                    tree.getNodeById(node.id).select();
                }, this, {
                    single : true
                });
                node.parentNode.reload();
            });
            window.show();
        },
        showEditLeafWin : function(node) {
            // 显示叶子节点编辑窗口
            var editpage = basePath
                    + "/treeAction!modifyNode.action?extTree.id=" + node.id;
            var window = this.createWin("win" + node.id, node.text, editpage, function() {
                var nodeparent = node.parentNode;
                var tree = node.getOwnerTree();
                nodeparent.on("expand", function(pnode) {
                    tree.getNodeById(node.id).select();
                }, this, {
                    single : true
                });
                node.parentNode.reload();
            });
            window.show();
        },
        createWin : function(winId, winTitle, iframePage, closeFun) {
            // 供各类型窗口创建时调用
            var win = Ext.getCmp(winId);
            if (!win) {
                win = new Ext.Window({
                    id : winId,
                    title : $CON.MENU_EDIT + winTitle,
                    width : this.width,
                    height : this.height,
                    maximizable : true,
                    modal : true,
                    html : "<iframe width='100%' height='100%' frameborder='0' src='"
                            + iframePage + "'></iframe>"
                });
                this.reloadNavNode = closeFun;
            }
            curFormWin = win;
            return win;
        },
        reloadNavNode : function() {
        },
        close : function() {
            if(curFormWin){
                curFormWin.close();
            }
        }
    }
}();

// 导航树
NavTree = function(){
    var nav;
    var formWindow;
    var navEditor;
    var leafMenu;
    var dirMenu;
    var loader;
    var root;
    var removeFlag = false;
    var titleChangeFlag = false;
    var nodeSelected;
    var mgr;
    var title;
    var cateType;
    var terminalType;
    return {
        init : function(){
            if(!mgr){
                Ext.Msg.alert($CON.WARM_TIP,$CON.CHECK_CONFIG+"NavTree.setMgr()"+CHECK_CONFIG_ONE+"mgr");
                return;
            }
            if(!loader){
                if(!Ext.get("cate_type"))
                {
                    return;
                }
                if(!Ext.get("category_terminalType"))
                {
                    return;
                }
                var siteId="";
                if(Ext.get("siteId"))
                {
                    siteId=Ext.get("siteId").dom.value;
                }
                terminalType = Ext.get("category_terminalType").dom.value;
                cateType =Ext.get("cate_type").dom.value;
                loader = new Ext.tree.TreeLoader({
                    url : '/portalMS/resource/jsonData.action?cateType='+cateType+'&terminalType='+terminalType+'&site.siteID='+siteId
                });
                loader.on('beforeload', function(treeloader, node) {
                    treeloader.baseParams = {
                        id : node.id        
                    };
                }, this);
            }
            if(!root){
                    if(Ext.get("category_firstNodeName")){
                        title=Ext.get("category_firstNodeName").dom.value;
                    }else{
                        title="";
                    }
               root = new Ext.tree.AsyncTreeNode({
                    id : Ext.get("category_firstNodeId").dom.value,
                    text : title,
                    expanded: true
                });
            }
            if(!nav){
                  
                nav = new Ext.tree.TreePanel({
                    width : 232,
                    height: 600,
                    autoScroll : true,
                    animate : true,
                    loader : loader,
                    root : root,
                    enableDD:true,
                    border:false,
                    listeners : {
                        'click' : function(node, event) {
                            if (node.isLeaf()) {
                                // 为叶子节点时，点击不进入链接
                              //  event.stopEvent();
                              //  alert(node.url);
                              //   window.open('http://www.google.com');
                            }
                        }
                    }
                });
                // 添加右键菜单
               // nav.on("contextmenu", this.showTreeMenu);
                // 当节点文本改变时触发事件
                nav.on("textchange", function(node, newText, oldText) {
                    if (!titleChangeFlag && newText != oldText) {
                        mgr.ajaxModifyTitle(node.id, newText, function(success) {          
                        });
                    }
                });
           
                // 当节点移动时触发事件
                nav.on("movenode", function(tree, node, oldParent, newParent, index) {  
                    mgr.updateMoveNode(node.id, oldParent.id, newParent.id, index+1, cateType, getReslut);
                });
                function getReslut(data)
                {
                    if(data == "error"){
                        Ext.Msg.alert($CON.WARM_NOTE,$CON.COLUMN_NOEXISTE);
                        
                    }
                    if(data == "false"){
                        Ext.Msg.alert($CON.WARM_NOTE,$CON.COLUMN_NOCHANGE);
                        
                    }
                }
                
                // 当节点移动前触发事件
                nav.on("beforemovenode", function(tree, node, oldParent, newParent, index) {
                    if(oldParent!=newParent){   
                        Ext.Msg.alert($CON.WARM_NOTE,$CON.COLUMN_NOCHANGE);
                    return false;
                    }
                });
               
                // 当节点删除时触发事件
                nav.on("remove", function(tree, parentNode, node) {
                    if (removeFlag) {
                        
                        mgr.ajaxRemoveParentById(node.id);
                    }
                });
                
                
            }
          
//            if(!navEditor){
//                navEditor = new Ext.tree.TreeEditor(nav, {
//                    allowBlank : false,
//                    ignoreNoChange : true,
//                    blankText : '标题不能为空',
//                    selectOnFocus : true
//                });
//            }
            this.setLeafMenu();
            this.setDirMenu();
        },
        setMgr : function(manager){
            mgr = manager;
        },
        getMgr : function(){
            return mgr;
        },
        setLeafMenu: function(){
            // 设置叶子菜单
            if(!leafMenu){
                leafMenu = new Ext.menu.Menu({
                    items : [{
                        text : $CON.TITLE_EDIT,
                        handler : function() {
                            navEditor.triggerEdit(nodeSelected);
                        }
                    }, "-", {
                        text : $CON.EDIT,
                        handler : function() {
                            FormEditWin.showEditLeafWin(nodeSelected);
                        }
                    }, "-", {
                        text : $CON.DELETE_ONE,
                        handler : this.delTreeItemComfirm
                    }]
                });
            }
        },
        setDirMenu: function(){
            // 设置目录菜单
            if(!dirMenu){
                dirMenu = new Ext.menu.Menu({
                    items : [{
                        text : $CON.TITLE_EDIT,
                        handler : function() {
                            navEditor.triggerEdit(nodeSelected);
                        }
                    }, "-", {
                        text : $CON.EDIT,
                        handler : function() {
                            FormEditWin.showEditDirWin(nodeSelected);
                        }
                    }, "-", {
                        text : $CON.LEAF_CHILDNODE_ADD,
                        handler : function() {
                            FormEditWin.showAddLeafWin(nodeSelected);
                        }
                    }, "-", {
                        text : $CON.AIMDIRECTORY_ADDNODE,
                        handler : function() {
                            FormEditWin.showAddDirWin(nodeSelected);
                        }
                    }, "-", {
                        text : $CON.DELETE_ONE,
                        handler : this.delTreeItemComfirm
                    }]
                });
            }
        },
        showTreeMenu : function(node, e){
            nodeSelected = node;
            nodeSelected.select();
            if (node.isLeaf()) {
                // 显示叶子节点菜单
                leafMenu.showAt(e.getPoint());
            } else {
                // 显示目录节点菜单
                dirMenu.showAt(e.getPoint());
            }
        },
        delTreeItemComfirm : function(){
            Ext.Msg.confirm($CON.DELETE_SURE, $CON.NODE_SUREDELETE, function(btn) {
                if (btn == "yes") {
                    NavTree.delTreeItem();
                }
            });
        },
        delTreeItem : function(){
            if (nodeSelected != nav.getRootNode()) {
                removeFlag = true;
                nodeSelected.remove();
                removeFlag = false;
            } else {
                Ext.Msg.alert($CON.WARM, $CON.NODE_NODELETE);
            }
        },
        show : function(){
        
            formWindow = new Ext.Window({
            modal:true,
            layout:'fit',     
            width:250,
            height: 400,
            resizable:true,   
            closeAction:'hide',  
            shim:false,  // 关键，设置此项为 false ，则最大化时 window不会撑破 tabPanel
            autoScroll:true,
              constrainHeader:true,  // 关键，设置此项为 true ，指定此 window 不会超过 tabPanel 的上面和左边
              style:"padding:0px;",                                       
            plain: true,   
            listeners:{  
                "hide":function(){  
                window.parent.lFrame.location.reload();
                }},
               items: [            
                   nav
               ]
        });

        formWindow.on('beforeclose',function(){Ext.Msg('sa');})
        formWindow.show();
        nav.getRootNode().toggle();
           
        }
    }
}();

// 文档加载完毕执行
Ext.onReady(function(){
    //Ext.BLANK_IMAGE_URL = "../scripts/ext/resources/images/default/s.gif";
    if(typeof(TreeDWR)=="undefined"){
         Ext.Msg.alert($CON.WARM_TIP,$CON.WRONG);
    }else{
         NavTree.setMgr(TreeDWR);
         NavTree.init();
         Text:$CON.LOADING;
    }
    
});


绿源2008
关注
专栏目录
如何有效地使用强化学习技术训练神经网络架构呢？如何利用强化学习自动优化神经网络结构，并逐渐适应目标任务呢？本文试图通过对相关算法的讲解，从理论与实践两方面，揭开这项前沿研究的面纱
AI天才研究院
08-05 1739
深度学习和强化学习近年来得到越来越多的关注，但同时也受到越来越多学者们的质疑，其原因很多，但是不可否认的是，近些年来人工智能领域最热门的方向之一就是建立具有高度抽象能力和智能性的神经网络系统，而深度学习的发明则是在这个基础上做出的重大贡献，而强化学习则可以为这一进程提供必要的控制因素。近年来，强化学习已经被应用到许多重要的任务中，例如在游戏领域，AlphaGo使用强化学习技术成功地战胜了人类顶尖围棋选手李世乭；在医疗保健领域，医生根据患者的病情，采用强化学习技术规划出最佳治疗方案；
vc节点拖动排序树
03-14
树叉可拖动。修改兄弟节点之间拖动排序！
完成 Ext 树的拖拽后保存节点顺序，现贡献源代码。。
rain的专栏
03-24 889
   http://topic.csdn.net/u/20090311/09/33F662CA-F476-4AED-8244-8C52F8CA5BA8.html#top  上一篇帖子的路径：http://topic.csdn.net/u/20090309/17/0c009b76-996f-443b-b88c-34000a37bf18.html   在上一篇帖子中，我提到除了
extjs的导航树的简单例子
lspgdut的博客
03-21 157
Ext.onReady(function(){   Ext.QuickTips.init();     var tree=new   Ext.tree.TreePanel({    //   el:"tree"   });     var root=new Ext.tree.TreeNode({text:'项目信息'});    var node=new Ext.tree.TreeNode({ ...
ext tree节点要排序该怎么办？
ysm1850
04-25 212
我实现树的代码： Ext.BLANK_IMAGE_URL Ext.BLANK_IMAGE_URL='public/ext-2.0.2/s2.gif'; var tree; var Tree = Ext.tree; var xt = Ext.tree; var n; var tree; var TreeTest = function(){ // shorth...
Ext的Dom操作——节点替换
清风小阁
04-18 2463
<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> "> My JSP 'index.j
Ext_JS应用系统中的智能树形菜单
02-13
4. **拖放功能**：EXT JS的TreeDragDropPlugin可以实现节点的拖放，用户可以通过拖放来调整节点的顺序或层级。 5. **事件监听**：通过监听TreePanel的事件，如`itemclick`、`beforeload`等，我们可以对用户的交互...
ext.net Menu + TreePanel
12-28
TreePanel支持拖放操作，允许用户重新组织节点顺序。每个节点都可以包含子节点，并且可以通过点击节点来执行特定操作。Ext.NET的TreePanel还支持异步加载，这样在处理大量数据时可以提高性能。 结合使用Menu和...
B树(B-树)详解
nO0b
12-03 3647
B-树，即为B树。因为B树的原英文名称为B-tree，而国内很多人喜欢把B-tree译作B-树，B-tree就是指的B树。 B-树容易让人误解,建议大家用B树称呼, 本文以下直称B树 这篇介绍概念, 优点应用等, B树的描述和增删改查请到隔壁我写的另一篇(篇幅较长,和这篇分开了): https://blog.csdn.net/q5706503/article/details/84729052...
GWT-ext 布局示例
05-02
总的来说，GWT-Ext提供了一套丰富的布局选项，帮助开发者轻松地构建复杂的用户界面，同时其对树结构的支持使得数据组织和导航变得更加便捷。通过熟练掌握这些工具，可以大大提高开发效率并提升应用的用户体验。
ext4异步树控制点击某个节点前加号不展开下级节点
lzq0107的博客
08-05 182
ext4异步树控制点击某个节点前加号不展开下级节点，代码如下： Ext.require([ 'Ext.tree.*', 'Ext.data.*', 'Ext.tip.*' ]); Ext.onReady(function() { Ext.QuickTips.init(); var store = Ext.create('Ext...
EXTJS动态树，非常完整的一个例子
请叫我
12-08 1万+
这个是我从ITeye里看到的，最近也在做这个例子，觉得那边的写的非常的不错，现在拿过来分享下，等自己的例子写好，也会拿上来分享的   EXTJS动态树的实现举例 一、描述：通过dwr实现JS与后台的交互，从而实现动态树中叶子节点和目录节点的增加和编辑、以及节点的拖曳，节点的增删和拖曳都会改变自身以及它所在的目录节点下的相关节点的序号，能使得后台与前台同步。这个序号借助了tree中node的
ext grid 添加行序号，勾选框
hustchenshu的专栏
07-14 8430
为表格添加列都是在grid的定义的colunms中添加对象实现的： 1.行序号      { header: '序号', xtype: 'rownumberer', width: 60, align: 'center', sortable: false } 若还要做表格的增删，并且刷新行列号： 增加不用管，表格序列会自动实现自增； 若是删除，则需要调用刷新视图实现： Ext.eac
Ext的开发技巧 - 从修改tree.panel的column的默认排序想到的
jcx5083761的专栏
01-15 2176
今天开发Ext的tree.panel控件时，需要tree内部的column默认就有排序，并且包含排序后的箭头显示，但是找遍了Ext的Column和Field的属性也没有找到，后来想用Column的headerclick方式主动触发一下，但是当用Ext.getCmp('id').fireEvent('headerclick')触发时发现并没有排序和产生箭头图片。         经过几番思考后来找
EXTJS 4 树形表格组件使用示例
蜗牛跑的快
09-30 5226
TreeStore中使用了一个 Ext.data.NodeInterface来表示数的节点;在TreeStore的setRootNode方法中会调用NodeInterface的decorate方法向TreeStore的model增加一些属性,这些属性是在展示树时必须使用的.这些属性详见如下:
Ext tree 动态生成、拖动排序、右键菜单
老李 技术 专栏
10-29 3779
我仅提供了一种方法，还会有很多实现的方法，不多说上代码！test_tree.jsExt.onReady(function() { var Tree = Ext.tree; var loader = new Tree.TreeLoader({ dataUrl: 'test.aspx', listeners: { "beforeload": function(treeLoader, node) {
extjs中treepanel属性和方法
最新发布
weixin_44500762的博客
03-20 505
树控件由Ext.tree.TreePanel类定义，TreePanel类继承自Panel面板。TreePanel是ExtJS中最多能的组件之一，它非常适合用于展示分层的数据。树的使用是很频繁的，对树节点的各种操作已经和数据库的互动操作，这些都是需要掌握的。
Ext列表展现--普通排序sortable--全局排序remoteSort(EXTJS 全局排序问题)
热门推荐
Java高知社区
08-01 2万+
关于Ext的排序问题，一般涉及到两种方式。 A。一种是默认的客户端排序机制，对当前页进行排序。sortable 这种排序模式不用多说，是人都会： 1.可以在Ext.grid.ColumnModel列模式中，设置sortable:false，此列为可排序。 var cm = new Ext.grid.ColumnModel([//定义列显示模式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值