ztree 自定義控件

ztree 使用基礎的整理

問題的演進過程

1 控件文本化

1.1 控件文本化

(function () {
    window.node = new function () {

        /**
         *  將數據移入節點.
         * @param treeNode 當前操做的是哪一個節點.
         * @param node     操做節點須要追加到哪一個位置上.
         * @param id       html  id名稱.
         * @param operation  須要追加的操做, 是個數組.
         * @returns {boolean}
         * @private
         */
        this.__addHoverDom = function (treeNode, node, id, operation) {

            if (!$.isArray(operation)) {
                return false;
            }
            for (var i = 0; i < operation.length; i++) {
                if ($("#" + id + i + "_" + treeNode.id).length > 0) return;
            }

            var tmp = [];
            for (var i = 0; i < operation.length; i++) {
                tmp.push("<a id='" + id + i + "_" + treeNode.id + "'style='margin:0 0 0 5px;'>" + operation[i] + "</a>");
            }

            node.append(tmp.join(''));

        }

        /**
         *  將鼠標移除節點.
         * @param treeNode
         * @param node
         * @param id
         * @param operation
         * @returns {boolean}
         * @private
         */
        this.__removeHoverDom = function (treeNode, node, id, operation) {
            if (!$.isArray(operation)) {
                return false;
            }
            for (var i = 0; i < operation.length; i++) {
                $("#" + id + i + "_" + treeNode.id).unbind().remove();
            }
        }


        /**
         *  給節點上綁定事件.
         * @param id
         * @param node
         * @param treeNode
         * @param operation
         * @param eventType
         * @param callback
         * @returns {boolean}
         * @private
         */
        this.__bindEvent = function (id, node, treeNode, operation, eventType, callback) {
            var index = $.inArray(node, operation);
            if (-1 === index) {
                return false;
            }
            var btn = $("#" + id + index + "_" + treeNode.id);
            if (btn) btn.unbind(eventType);
            if (btn) btn.bind(eventType, [treeNode], callback);
        }

    }
})();

2 控件圖片化

2.1 控件圖片化

(function () {

    //  <span class="button icon04" id="diyBtn_12" title="按鈕2" onfocus="this.blur();"></span
    window.node_picture = new function () {
        /**
         *  將數據移入節點.
         * @param treeNode 當前操做的是哪一個節點.
         * @param node     操做節點須要追加到哪一個位置上.
         * @param id       html  id名稱.
         * @param operation  須要追加的操做, 是個數組.
         * @returns {boolean}
         * @private
         */
        this.__addHoverDom = function (treeNode, node, id, operation) {

            if (!$.isArray(operation)) {
                return false;
            }
            for (var i = 0; i < operation.length; i++) {
                if ($("#" + id + i + "_" + treeNode.id).length > 0) return;
            }

            var tmp = [];
            for (var i = 0; i < operation.length; i++) {
                tmp.push("<span class='button "+ operation[i] +"'  id='"+id+i+"_"+treeNode.id + "' title='"+operation[i]+ "'></span>");
            }
            node.append(tmp.join(''));
        }


        /**
         *  將鼠標移除節點.
         * @param treeNode
         * @param node
         * @param id
         * @param operation
         * @returns {boolean}
         * @private
         */
        this.__removeHoverDom = function (treeNode, node, id, operation) {
            if (!$.isArray(operation)) {
                return false;
            }
            for (var i = 0; i < operation.length; i++) {
                $("#" + id + i + "_" + treeNode.id).unbind().remove();
            }
        }

        /**
         *  給節點上綁定事件.
         * @param id
         * @param node
         * @param treeNode
         * @param operation
         * @param eventType
         * @param callback
         * @returns {boolean}
         * @private
         */
        this.__bindEvent = function (id, node, treeNode, operation, eventType, callback) {
            var index = $.inArray(node, operation);
            if (-1 === index) {
                return false;
            }
            var btn = $("#" + id + index + "_" + treeNode.id);
            if (btn) btn.unbind(eventType);
            if (btn) btn.bind(eventType, [treeNode], callback);
        }

    }

})();

3 調整顯示問題

3.1 節點上控件的顯示
    該問題須要經過CSS來調整處理,不該該將樣式信息寫道js中,避免修改麻煩

<style>
        .ztree li span.button.add{
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
        }

    </style>

4 處理控件的回調函數

+function () {
// 定義全局的變量.
var tree ,treeSelector='#treeDemo';  // 樹節點
var text,textNode,textSelector="#output"
var selected={};   // 選中的節點.
//var operation =['add','edit','remove','download','truncate'];
var operation =['add','edit','remove'];


    // 添加節點的時候,
var newCount = 1;

// 添加節點的名稱.
var IDMark_Switch = "_switch",
    IDMark_Icon = "_ico",
    IDMark_Span = "_span",
    IDMark_Input = "_input",
    IDMark_Check = "_check",
    IDMark_Edit = "_edit",
    IDMark_Remove = "_remove",
    IDMark_Ul = "_ul",
    IDMark_A = "_a";


// 建立一個鏈表.
var createLinkList = function () {
    var _this = {}, first = null;
    _this.add = function (id, parent) {
        first = {id: id, parent: parent, next: first || null};  //這句比較重要
    };


    _this.show = function (fn) {
        var str = [];
        for (temp = first; temp; temp = temp.next) {
            str.push(temp.id + '<-' + temp.parent);
        }
        fn(str.join(','));

    };
    return _this;
}


var zNodes = [
    {
        id: 1, pId: 0, name: "hover事件顯示控件", open: true,
        children: [
            {id: 11, pId: 1, name: "按鈕1"},
            {id: 12, pId: 1, name: "按鈕2"},
            {id: 13, pId: 1, name: "下拉框"},
            {id: 141, pId: 1, name: "文本1"},
            {id: 142, pId: 1, name: "文本2"},
            {id: 15, pId: 1, name: "超連接"}

        ]
    }];


// 初始化節點
function init()
{
    // 處理事件綁定, 資源查找.
    textNode = $(textSelector);
}

function get() {
    // 處理選中的節點,
    // 處理選中的聯動的節點,
}

function set(sets) {
    // 設置數據的回顯處理,
}

function reset() {
    // 重置全局變量.
}

function select() {
    //

}

/**
 *  鼠標移入後
 */
function  addHoverDom(treeId,treeNode) {
    if (treeNode.parentNode && treeNode.parentNode.id != 1) return;
    {
        var aObj = $("#" + treeNode.tId + IDMark_A);
        window.node_picture.__addHoverDom(treeNode, aObj, 'diyBtn', operation);

    }



    //在父節點上追加特殊.
    if(treeNode.pId ===0 )
    {
        var obj = $("#"+treeNode.tId+IDMark_A);
        if ($("#diyBtn6_" + treeNode.id).length > 0) return;
        if ($("#diyBtn7_" + treeNode.id).length > 0) return;
        var appStr = "<a id='diyBtn6_" + treeNode.id + "'style='margin:0 0 0 5px;'>查看選中</a>" +
            "<a id='diyBtn7_" + treeNode.id + "'style='margin:0 0 0 5px;'>預留</a>";
        aObj.append(appStr);
    }


    /**
     *  添加節點的回調函數.
     * @param event
     * @returns {boolean}
     */
    function addEvent(event) {
        var treeNode = event.data[0];
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.addNodes(treeNode, {id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++)});
        return false;
    }

    /**
     *  編輯節點的回調函數.
     * @param event
     * @returns {boolean}
     */
    function editEvent(event) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var treeNode = event.data[0];
        zTree.selectNode(treeNode);
        setTimeout(function () {
            if (confirm("進入節點 &#45;&#45; " + treeNode.name + " 的編輯狀態嗎？")) {
                setTimeout(function () {
                    zTree.editName(treeNode);
                }, 0);
            }
        }, 0);
        return false;
    }

    /**
     *   移除子節點.
      * @param event
     * @returns {boolean}
     */
    function removeEvent(event){
        var treeNode = event.data[0];
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getSelectedNodes();
        //console.log(treeNode);

        // 單選刪除,
        // data.keep.parent = true 時會保留父節點
        zTree.removeChildNodes(treeNode);    //測試成功
        //zTree.removeNode(treeNode,false);  //測試成功, 從父節點開始進行刪除操做.
        // 多選刪除, 須要配合checkbox進行
        return false;
    }


    var nodeList = new createLinkList();
    /**
     *  下載選中的節點.
     * @param event
     */
    function downloadEvent(event){
        var treeNode = event.data[0];
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getSelectedNodes();
        if (nodes.length < 1) return;
        $.each(nodes, function (i, n) {
            var id = n.id;
            var parentid = n.pId;
            nodeList.add(id, parentid);
        });

        nodeList.show(function (obj) {
            alert(obj);
        })
    }

    var truncateList = new createLinkList();

    /**
     *  清空節點.
     * @param event
     */
    function truncateEvent(event){
        var treeNode = event.data[0];
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeNode.children;
        if (typeof nodes === 'undefined') return;
        // 判斷是否只有子節點
        $.each(nodes, function (i, n) {
            var id = n.id;
            var parent = n.pId;
            truncateList.add(id, parent);
        });
        zTree.removeChildNodes(treeNode);
        truncateList.show(function (obj) {
            alert(obj);
        })
    }


    window.node_picture.__bindEvent('diyBtn','add',treeNode,operation,'click',addEvent);
    window.node_picture.__bindEvent('diyBtn','edit',treeNode,operation,'click',editEvent);
    window.node_picture.__bindEvent('diyBtn','remove',treeNode,operation,'click',removeEvent);
    window.node_picture.__bindEvent('diyBtn','download',treeNode,operation,'click',downloadEvent);
    window.node_picture.__bindEvent('diyBtn','truncate',treeNode,operation,'click',truncateEvent);



    var  see_selected_btn  = $("#diyBtn6_"+treeNode.id);
    if(see_selected_btn)
    {
        see_selected_btn.remove('click').bind('click',function(event){alert("測試給父節點上增長特殊的處理能力");});
    }

}


/**
 * 鼠標移除.
 */
function removeHoverDom(treeId,treeNode) {
    //if (treeNode.parentTId && treeNode.getParentNode().id != 1) return;
    window.node_picture.__removeHoverDom(treeNode, '', 'diyBtn', operation);
}



function initTreeUI(znode,async)
{
    var setting = {
        async: {
            enable: async?true:false,
            url:'index.php',
            autoParam:["id", "checked", "chkDisabled"],
            dataFilter : function(tid, node, data) {
                if (data) {
                    var id, nodes, list = [];
                    for(var i in data) {
                        id = data[i].id;
                        nodes = tree.getNodesByParam("id", id, node);
                        if (nodes.length > 0) {
                            //list.push(nodes[0]);
                        } else {
                            list.push(data[i]);
                        }
                    }
                }
                return list;
            }
        },
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom
        },
        data: {
            keep: {
                parent: false
            }
        },
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: {Y:"", N:""},
            chkDisabled : true
        },
        callback : {
            onAsyncSuccess : function(evt, tid, node, msg) {
                return true;
            },
            onCheck : function(evt, tid, node) {
                if (node.checked)
                {
                    textNode.val('');
                    textNode.val(JSON.stringify(node));
                    selected[node.id] = {'id':node.id,'name':node.name};
                }else{
                    textNode.val('');
                    delete selected[node.id];
                }
                console.log(selected);
            },
            beforeClick : function(tid, node, flag) {
                return true;
            },
            onClick : function(evt, tid, node, flag) {
                console.log("數據的聯動點");
            },
            onCollapse : function(evt, tid, node) {
                return true;
            },
            beforeExpand : function(tid, node) {
                return true;
            },
            onExpand :  function(evt, tid, node) {
                return true;
            }
        }
    };

    if (null !== zNodes && !$.isArray(zNodes)) {
        zNodes = [];
    }
    tree = $.fn.zTree.init($(treeSelector), setting, zNodes);
}


//  命名空間的處理, 將樹上的接口進行暴露處理,
window.tree = {
    init: function(){
        init();
    },
    get:function(){},
    set:function(sets){},
    reset:function(){},
    select : function(){},
    active: function(){},
    initTreeUI:function()
    {
        initTreeUI(zNodes,false);
    }
};
}();

使用過程

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自定義的操做</title>
    <link rel="stylesheet" href="css/demo.css"/>
    <link rel="stylesheet" href="css/zTreeStyle.css"/>
    <script src="js/jquery-1.4.4.min.js"></script>
    <script src="js/jquery.ztree.all.min.js"></script>
    <!--<script src='./js/node.js'></script>-->
    <script src='js/tree.js'></script>
    <script src="js/node__picture.js"></script>
    <style>
        .ztree li span.button.add{
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
        }

    </style>



    <script>
        $(document).ready(
            function(){
                tree.init();

                tree.initTreeUI();
            }
        )
    </script>
    <style>
        ul.ztree {
            width: 500px;
        }
    </style>
</head>
<body>

<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>

<div>
    <textarea id="output" style="width: 500px;height: 200px;margin-top: 25px;"></textarea>
</div>



<!--
    1  文本化
    2  圖片化
    3  調整顯示問題,
    4  處理回調函數的問題.
    5  總結
-->
</body>
</html>