layui.dtree的學習，自定義擴展toolbar按鈕（toolbarExt）

學習layui.dtree請前往 http://www.wisdomelon.com/DTreeHelper/

記錄一下dtree的自定義擴展toolbar按鈕（toolbarExt）

html代碼：

            <div style="width:40%;display: inline-block">
                <table id="LAY-user-back-serconfig" lay-filter="LAY-user-back-serconfig" class="layui-hidden"></table>
            </div>

js代碼：

dtree.render({
    elem: "#LAY-user-back-serconfig",
    data: dataArr, // 使用data加載
    width:'280px',
    height: "543px",
    toolbar: true,
    ficon:"3" / ["0", "6"] / "-1" / ["-1", "2"],
    icon:"3" / ["0", "6"] / "-1" / ["-1", "2"],
    toolbarWay: "follow", // "contextmenu"：右鍵菜單（默認），"fixed"："固定在節點后","follow"："跟隨節點動態呈現"
    toolbarShow: []
    ,toolbarFun:{
        loadToolbarBefore: function(buttons, param, $div){
            // console.log(buttons);
            // console.log(param);
            // console.log($div);
            if(param.level == 1){
                buttons.testEdit = "";
                buttons.testDel = "";
            }
            else if(param.level == 3){ // 如果是葉子節點
                buttons.testAdd = "";  // 取消新增功能
            }
            return buttons; // 將按鈕對象返回
        }
    }
    ,toolbarExt: [
        {
            toolbarId: "testAdd", icon: "dtree-icon-add-circle", title: "新增", handler: function (node, $div) {
            console.log(node.nodeId);
            var content, title, url;
            if (node.level == 1) {
                url = '/monitor/system-info'
                content = './serConfigform.html';
                title = '新增服務資源信息'
            }
            if (node.level == 2) {
                url = '/monitor/service-resources-info'
                content = './serCofigformtwo.html';
                title = '新增服務資源系統信息'
            }
            else if (node.level == 3) {
                return false
            }
            add(node, content, title, url);//調用添加函數
        }
    },
        {
            toolbarId: "testEdit", icon: "dtree-icon-bianji", title: "編輯", handler: function (node, $div) {

                var content, title, url;
                var id = node.nodeId;
                if (node.level == 1) {
                    return false
                }
                else if (node.level == 2) {
                    url = '/monitor/system-info/';
                    content = './serConfigform.html#/id=' + id;
                    title = '修改服務資源系統信息';

                } else if (node.level == 3) {
                    url = '/monitor/service-resources-info/';
                    content = './serCofigformtwo.html#/id=' + id
                    title = '修改服務資源信息'
                }
                update(node, content, title, url);//調用更新函數
            }
        },
        {
            toolbarId: "testDel",
            icon: "dtree-icon-roundclose",
            title: "刪除",
            handler: function (node, $div) {
                var url;
                if (node.level == 1) {
                    return false
                }
                else if (node.level == 2) {
                    url = "/monitor/system-info/";
                } else if (node.level == 3) {
                    url = "/monitor/service-resources-info/"
                }
                del(node, url);//調用刪除函數
                // DTree5.partialRefreshDel($div); // 這樣即可刪除節點
            }
        }]


});



渲染之后的效果圖，規定一級節點只能添加，二級節點可以增、刪、改，三級節點可以刪除、修改，不能添加。

通過toolbarFun來控制返回的toolbar按鈕