Ext.tree.Panel Extjs 在表格中添加樹結構，並實現節點移動功能

最近在用Extjs 做后台管理系統，真的非常好用。總結的東西分享一下。

先展示一下效果圖

好了，開始吧！

首先說一下我的創建結構：

一、構造內容

這個函數中包括store的創建，treePanel的創建

一個treePanel必須綁定一個Ext.data.TreeStore.

function constructor(config){

//創建一個treeStore 數據(我的用ajax取的，你們隨意~)
        var store = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url: 'http://localhost/data/aa.txt',
                reader: {
                    type: "json",
                    rootProperty: "children",
                    transform: function (data) {
                        if (data.code === 1) console.log("error");
                        return data;
                    }
                }
            },
            folderSort: true
        });

          //   創建treePanel了
        var $tree = Ext.create('Ext.tree.Panel', {
            width: '100%',
            height: 600,
            store: store,
            useArrows: true,
            rootVisible: false,
            multiSelect: true,    // 多選
            //singleExpand: true,   //單展開
            autoScroll: true,    // 自動滾屏
            columns: [{          // 列項
                xtype: 'treecolumn',
                text: '菜單名稱',
                width: 250,
                sortable: true,
                menuDisabled: true,
                dataIndex: 'text'
            },{
                text: '節點類型',
                width: 150,
                dataIndex: 'user',
                menuDisabled: true,
                align: 'center',
                sortable: true
            },{
                text: '新增',
                width: 70,
                align: 'center',
                menuDisabled: true,
                renderer: function (value, metaData) {
                    return "<a href='#" + Math.random() + "'>新增</a>";
                }
            },{
                text: '修改',
                width: 100,
                menuDisabled: true,
                xtype: 'actioncolumn',
                align: 'center',
                icon: '/images/edit.png'
            }, {
                xtype: 'actioncolumn',
                text: '刪除',
                width: 100,
                menuDisabled: true,
                align: 'center',
                icon: '/images/delete.png',
                handler: function(grid, rowIndex,colIndex,record) {
                    var rec = store.getAt(rowIndex);
                    if(rec.get('children') === null){
                        Ext.MessageBox.confirm(
                            "刪除"
                            ,"確定刪除嗎？"
                            ,function( button,text ){
                                if( button == 'yes'){
                                    rec.remove();
                                }
                            }
                        );
                    }else{
                        Ext.MessageBox.alert("刪除","當前元素含有子節點，不能被刪除");
                    }
                }
            }, {
                text: '上移',
                width: 50,
                menuDisabled: true,
                align: 'center',
                renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
                    return  "<a href='#" + Math.random() + "'>上移</a>";
                }
            },{
                text: '下移',
                width: 50,
                menuDisabled: true,
                align: 'center',
                renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
                    return  "<a href='#" + Math.random() + "'>下移</a>";
                }
            },{
                text: '升級',
                width: 50,
                menuDisabled: true,
                align: 'center',
                renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
                    return  "<a href='#" + Math.random() + "'>升級</a>";
                }
            },{
            text: '降級',
                width: 50,
                menuDisabled: true,
                align: 'center',
                renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
                return  "<a href='#" + Math.random() + "'>降級</a>";
            }
        }],
            listeners:{     //監聽事件
                cellclick: function (view, td, cellIndex, record, tr, rowIndex, e, eOpts){   // 單元格點擊，賊好用
　　　　　　　　　　　　//判斷點擊的第幾列（索引從0開始）
                    if(cellIndex === 2)  return display$WindowAddNode(rowIndex,record, store);   
                    if(cellIndex === 5)  return moveEvent(rowIndex,record,store);
                    if(cellIndex === 6)  return downEvent(rowIndex,record, store);
                    if(cellIndex === 7)  return upgradeEvent(rowIndex,record, store);
                    if(cellIndex === 8)  return downgradeEvent(rowIndex,record, store);
                }
            }

        });

        config.parent.add($tree);

        return $tree;
    }

面板創建完了，下面該實現功能了。

二、新增節點

  看圖說話。

在行內點擊新增，只會作用到當前行。

//增加節點
    function display$WindowAddNode(rowIndex,record,store){

        //創建單選框
        var $radioAdd = Ext.create('Ext.form.RadioGroup',{
            xtype: 'radiogroup',
            defaultType: 'radiofield',
            layout: 'vbox',
            margin: '10 0 0 20',
            items: [
                {
                    boxLabel  : '增加子節點',
                    name      : 'addNode',
                    inputValue:'childNode'
                }, {
                    boxLabel  : '在該節點前新增節點',
                    name      : 'addNode',
                    inputValue:'frontNode'
                }, {
                    boxLabel  : '在該節點后新增節點',
                    name      : 'addNode',
                    inputValue:'afterNode'
                }
            ]
        });

        //創建面板 單選框 -輸入框
        var form = Ext.create('Ext.form.Panel', {
            layout: 'absolute',
            defaultType: 'textfield',
            border: false,
            defaults: {
                anchor: '90%',
                labelStyle: 'padding-left:4px;'
            },
            fieldDefaults: {
                labelAlign: "right",
                labelWidth: 70
            },
            items: [$radioAdd,{
                id:'inputNode',
                fieldLabel: '輸入標題',
                fieldWidth: 80,
                margin: '110 0 0 0'
            }]
        });

        //創建窗口
        var win = Ext.create('Ext.window.Window', {
            title: '增加節點',
            width: 300,
            height: 230,
            layout: 'fit',
            plain: true,
            items: form,
            buttons: [{
                text: '確定',
                handler:function(){
                    return addNodeYes();
                }
            }, {
                text: '取消',
                handler : function(){
                    win.close();
                }
            }]
        });

        win.show();

        //確定增加節點
        function addNodeYes(){

            //獲得單選鈕的選項
            var radioText = $radioAdd.getValue();

            //輸入框內容
            var inputNode = Ext.getCmp('inputNode').getValue();

            //新節點
            var newNode={
                text:inputNode,
                duration:6.5,
                user:'Tommy Maintz',
                leaf:true,
                iconCls:'text'
            };

            //當前節點父節點
            var parentNode = record.parentNode;

            //判斷 單選鈕是否選中
            if(inputNode !== ''){
                if(radioText.addNode === 'childNode'){
                    record.appendChild(newNode);
                    win.close();
                }else if(radioText.addNode === 'frontNode'){
                    parentNode.insertBefore(newNode,record);
                    win.close();
                }else if(radioText.addNode === 'afterNode'){
                    for(var i = 0; i < parentNode.childNodes.length; i++){
                        if(parentNode.childNodes[i] === record){
                            parentNode.insertBefore(newNode,parentNode.childNodes[i+1]);
                        }
                    }
                    win.close();
                }
            }else{
                alert('請輸入標題');
            }

        }

    }

三、上移功能也是作用當前行的

這個沒圖，不用找了，直接上代碼

//上移
    function moveEvent(rowIndex,record,store){

        //當前節點父節點
        var parentNode = record.parentNode;
        var length = parentNode.childNodes.length;
        var currentIndex = 0;

        //獲取當前節點
        for(var i =0; i < length; i++){
            if(parentNode.childNodes[i] === record){
                currentIndex = i;
            }
        }

        //操作
        if(currentIndex <=0){
            currentIndex = 1;
        }else{
            currentIndex = currentIndex - 1;
        }

        parentNode.insertChild(currentIndex,record);

    }

四、下移

//下移
    function downEvent(rowIndex,record,store){

        //當前節點父節點
        var parentNode = record.parentNode;
        var length = parentNode.childNodes.length;
        var currentIndex= 0;

        // 獲取當前節點的索引
        for(var i = 0; i < length; i++){
            if(parentNode.childNodes[i] === record){
                currentIndex = i;
            }
        }

        // 計算移除當前節點后，插入的目標節點索引
        var targetIndex = (currentIndex>=(length-2))? (length-1) : currentIndex+1;

        // 刪除當前節點
        parentNode.childNodes[currentIndex].remove();

        // 插入當前節點，至計算的目標位置
        parentNode.insertChild(targetIndex,record);

    }

五、升級

 //升級
    function upgradeEvent(rowIndex,record,store){

        //當前節點父節點的父節點
        var parentPNode = record.parentNode.parentNode;

        parentPNode.appendChild(record);

    }

六、降級

//降級
    function downgradeEvent(rowIndex,record,store){

        //當前節點父節點
        var parentNode = record.parentNode;

        for(var i = 0; i < parentNode.childNodes.length; i++){
            if(parentNode.childNodes[i] === record){
                parentNode.childNodes[i-1].appendChild(record);
            }
        }

    }

　　Srong前端小白：自己寫的東西，寫的不知道是否清楚，不一定都對，歡迎指正⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

最后，贈送一個福利：

 modal:true   //只可操作當前窗口，在彈出窗口中必不可少的屬性