ztree插件的使用

 在bootstrap中使用ztree插件做樹形架構，由於覺得原始的樹形不夠美觀，所以改了其中的css插件

    demo演示,以及各種屬性的用法網站：  http://www.treejs.cn/v3/demo.php#_107                 

    修改頁面風格網站：  http://www.lai18.com/content/2450914.html?from=cancel

     增刪改查以及拖拽功能網站：   http://www.cnblogs.com/lori/archive/2013/07/04/3171655.html

參考以上網站，可根據的自己的需要進行修改

下面貼出我在做項目時的代碼（前端用的是bootstrap框架，對默認的css進行了修改）

   1）先引入文件（一個css，一個js文件）

<link rel="stylesheet" href="${contextPath}/static/assets/css/zTreeStyle/metro.css"/>

"${contextPath}/static/assets/js/ztree-3.5/jquery.ztree.all-3.5.js"
2）頁面

   //注意這個地方的引入，否則頁面不會顯示任何東西

<div id="organizationTree" class="ztree" style="width:560px; overflow:auto;"></div>  
3) js代碼

    var zTree;
    var setting = {
        check: {
            enable: true
        },
        async: {
            enable: true,  //開啟異步加載處理
            contentType: "application/json;charset=utf-8",
            // dataFilter: filter,//用於對 Ajax 返回數據進行預處理的函數
            dataType: "json",
            url: "${contextPath}/organization/getOrganizations/list",    //加載后台數據
            //autoParam: ["id", "name"],
            type: "post",
            //autoParam:[]
            otherParam: []
            // dataFilter: filter     //用於對 Ajax 返回數據進行預處理的函數
        },
        view: {
            expandSpeed: "",//zTree 節點展開、折疊時的動畫速度，設置方法同 JQuery 動畫效果中 speed 參數。

            addHoverDom: addHoverDom,  //用於當鼠標移動到節點上時，顯示用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕

            removeHoverDom: removeHoverDom,   //設置鼠標移到節點上，在后面顯示一個按鈕
            selectedMulti: false,   // 禁止多點同時選中的功能
            fontCss: setFontCss_ztree      //樣式設置
        },
        edit: {
            enable: true,   //設置 zTree 進入編輯狀態
            editNameSelectAll: true,
            removeTitle: '刪除',
            renameTitle: '編輯',
            showRemoveBtn: true,

            showRenameBtn: true,

        },
        data: {
            keep: {
                parent: true,
                leaf: false
            },
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeRemove: beforeRemove,   //點擊刪除時觸發，用來提示用戶是否確定刪除
            beforeEditName: beforeEditName,   //點擊編輯時觸發，用來判斷該節點是否能編輯
            // beforeRename:beforeRename,//編輯結束時觸發，用來驗證輸入的數據是否符合要求
            // onRemove:onRemove,//刪除節點后觸發，用戶后台操作
            // onRename:onRename,//編輯后觸發，用於操作后台
            // beforeDrag:beforeDrag,//用戶禁止拖動節點
            // onClick:clickNode//點擊節點觸發的事件
            // onNodeCreated: zTreeOnNodeCreated
            onAsyncSuccess: zTreeOnAsyncSuccess,   //默認展開所有節點
            /*拖動回調*/
            beforeDrag: beforeDrag,
//          beforeDrop: beforeDrop,
//          beforeDragOpen: beforeDragOpen,
//          onDrag: onDrag,
            onDrop: onDrop
        }
    };

//設置鼠標移到節點上，在后面顯示一個按鈕
function removeHoverDom(treeId, treeNode) {
    $("#addBtn_" + treeNode.tId).unbind().remove();
}

//加載樹結構
function loadTreeData() {
    zTree = $.fn.zTree.init($("#organizationTree"), setting);
}


function reloadTree() {
    loadTreeData();
}

function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
    zTree.expandAll(true);
}

//實現拖拽
var log, className = "dark";
var treeID = "treeDemo";
var curDragNodes, autoExpandNode;
var newCount = 1;

function beforeDrag(treeId, treeNodes) {
    className = (className === "dark" ? "" : "dark");
    for (var i = 0, l = treeNodes.length; i < l; i++) {
        if (treeNodes[i].drag === false) {
            curDragNodes = null;
            return false;
        } else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
            curDragNodes = null;
            return false;
        }
    }
    curDragNodes = treeNodes;
    return true;
}

function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {

    if (moveType == "inner") {
        $.ajax({
            contentType: "application/json",
            url: "${contextPath}/organization/operateOrg",
            //傳送請求數據
            data: JSON.stringify({
                oper: "changeParent",
                primaryKey: targetNode.id,
                primaryKeys: [treeNodes[0].id]
            }),
            // data: { id: treeNodes[0].id, pid: targetNode.id, name: treeNodes[0].name, moveType: moveType, isCopy: isCopy },
            dataType: "json",
            method: 'post',
            success: function (data) {

                alert('拖拽成功！');
            }
        });
    } else {
        $.ajax({
            contentType: "application/json",
            url: "${contextPath}/organization/operateOrg",
            //傳送請求數據
            data: JSON.stringify({
                oper: "setSameParent",
                primaryKey: targetNode.id,
                primaryKeys: [treeNodes[0].id]
            }),
            // data: { id: treeNodes[0].id, pid: targetNode.id, name: treeNodes[0].name, moveType: moveType, isCopy: isCopy },
            dataType: "json",
            method: 'post',
            success: function (data) {

                alert('拖拽成功！');
            }
        });
    }
}

function keydownInput() {
    var event = event || window.event;
    if (event.keyCode == 13) {
        searchOrg();
    }
}
function searchOrg() {
    //searchByFlag_ztree(treeId, search_orgainzation, "");
    searchByFlag_ztree('organizationTree', 'search_orgainzation', "");
    /*var searchName = $("#search_orgainzation").val();
     $.ajax({
     url: "
    ${contextPath}/organization/getOrganizations/list?keyword="+searchName,
     type : 'POST',
     dataType : 'json',
     success : function(data) {

     }
     });*/

}

/**
 * 收起樹：只展開根節點下的一級節點
 * @param treeId
 */
function close_ztree(treeId) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    var nodes = treeObj.transformToArray(treeObj.getNodes());
    var nodeLength = nodes.length;
    for (var i = 0; i < nodeLength; i++) {
        if (nodes[i].id == '0') {
            //根節點：展開
            treeObj.expandNode(nodes[i], true, true, false);
        } else {
            //非根節點：收起
            treeObj.expandNode(nodes[i], false, true, false);
        }
    }
}

/**
 * 搜索樹，高亮顯示並展示【模糊匹配搜索條件的節點s】
 * @param treeId
 * @param search_orgainzation 文本框的id
 */
function searchOrganization(treeId, search_orgainzation) {
    searchByFlag_ztree(treeId, search_orgainzation, "");
}

/**
 * 搜索樹，高亮顯示並展示【模糊匹配搜索條件的節點s】
 * @param treeId
 * @param searchConditionId     搜索條件Id
 * @param flag                  需要高亮顯示的節點標識
 */
function searchByFlag_ztree(treeId, search_orgainzation, flag) {
    //<1>.搜索條件
    var searchCondition = $("#search_orgainzation").val();
    //<2>.得到模糊匹配搜索條件的節點數組集合
    var highlightNodes = new Array();
    if (searchCondition && searchCondition != "") {



        // var treeObj = $.fn.zTree.init($("#organizationTree"), setting,treeId);
        //  var treeObj=reloadTree(treeId);

        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
        //<3>.高亮顯示並展示【指定節點s】
        highlightAndExpand_ztree(treeId, highlightNodes, flag);
    }


}

/**
 * 高亮顯示並展示【指定節點s】
 * @param treeId
 * @param highlightNodes 需要高亮顯示的節點數組
 * @param flag           需要高亮顯示的節點標識
 */
function highlightAndExpand_ztree(treeId, highlightNodes, flag) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    //<1>. 先把全部節點更新為普通樣式
    var treeNodes = treeObj.transformToArray(treeObj.getNodes());
    for (var i = 0; i < treeNodes.length; i++) {
        treeNodes[i].highlight = false;
        treeObj.updateNode(treeNodes[i]);
    }
    //<2>.收起樹, 只展開根節點下的一級節點
    close_ztree(treeId);
    //<3>.把指定節點的樣式更新為高亮顯示，並展開
    if (highlightNodes != null) {
        for (var i = 0; i < highlightNodes.length; i++) {
            if (flag != null && flag != "") {
                if (highlightNodes[i].flag == flag) {
                    //高亮顯示節點，並展開
                    highlightNodes[i].highlight = true;
                    treeObj.updateNode(highlightNodes[i]);
                    //高亮顯示節點的父節點的父節點....直到根節點，並展示
                    var parentNode = highlightNodes[i].getParentNode();
                    var parentNodes = getParentNodes_ztree(treeId, parentNode);
                    treeObj.expandNode(parentNodes, true, false, true);
                    treeObj.expandNode(parentNode, true, false, true);
                }
            } else {
                //高亮顯示節點，並展開
                highlightNodes[i].highlight = true;
                treeObj.updateNode(highlightNodes[i]);
                //高亮顯示節點的父節點的父節點....直到根節點，並展示
                var parentNode = highlightNodes[i].getParentNode();
                var parentNodes = getParentNodes_ztree(treeId, parentNode);
                treeObj.expandNode(parentNodes, true, false, true);
                treeObj.expandNode(parentNode, true, false, true);
            }
        }
    }
}

/**
 * 遞歸得到指定節點的父節點的父節點....直到根節點
 */
function getParentNodes_ztree(treeId, node) {
    if (node != null) {
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var parentNode = node.getParentNode();
        return getParentNodes_ztree(treeId, parentNode);
    } else {
        return node;
    }
}

/**
 * 設置樹節點字體樣式
 */
function setFontCss_ztree(treeId, treeNode) {
    if (treeNode.id == 0) {
        //根節點
        return {color: "#333", "font-weight": "bold"};
    } else if (treeNode.isParent == false) {
        //葉子節點
        return (!!treeNode.highlight) ? {color: "#ff0000", "font-weight": "bold"} : {
            color: "#660099",
            "font-weight": "normal"
        };
    } else {
        //父節點
        return (!!treeNode.highlight) ? {color: "#ff0000", "font-weight": "bold"} : {
            color: "#333",
            "font-weight": "normal"
        };
    }
}

//添加新的節點
function addHoverDom(treeId, treeNode) {
    $("#priorityTip").hide();
    var sObj = $("#" + treeNode.tId + "_span");
    if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_" + treeNode.tId);
    if (btn) btn.bind("click", function () {
        var zTree = $.fn.zTree.getZTreeObj("organizationTree");
        // if (confirm("確認為 " + treeNode.name + " 添加子節點嗎？")) {

        $("#modal-table").modal("show");
        //設置新增窗口的一些屬性，重置表單中的值
        document.getElementById("title1").innerHTML = "新增組織架構";
        $("#editOrganization").addClass("hidden");
        $("#addOrganization").removeClass("hidden");
        $("#form_organizationform")[0].reset();

        $("#form_organizationParent").val(treeNode.id);
        $("#form_organizationParentName").val(treeNode.name);
    });
}

//編輯前的驗證
function beforeEditName(treeId, treeNode) {
    $("#priorityTip").hide();
    document.getElementById("title1").innerHTML = "編輯組織架構";
    $("#addOrganization").addClass("hidden");
    $("#editOrganization").removeClass("hidden");

    var parentId = treeNode.pId;
    $.ajax({
        url: "${contextPath}/organization/getOrganizations/query?id=" + parentId,
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            $("#form_organizationParentName").val(data.orgname);
        }
    });
    $("#form_organizationORG_ID").val(treeNode.id);
    $("#form_organizationName").val(treeNode.name);
    $("#form_organizationParent").val(treeNode.pId);
    $("#form_organizationORG_BRIEF").val(treeNode.orgbrief);
    $("#form_organizationORG_CODE").val(treeNode.orgcode);
    if (treeNode.isactive) {
        $("#form_organizationIsactive").val("true");
    } else {
        $("#form_organizationIsactive").val("false");
    }

    $("#form_organizationPRIORITY").val(treeNode.priority);
    $("#form_organizationADDWAY").val(treeNode.addway);
    $("#form_organizationDesc").val(treeNode.description);

    $("#modal-table").modal("show");
}

//刪除節點信息
function beforeRemove(treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("organizationTree");
    zTree.selectNode(treeNode);
    var selectNodeId = treeNode.id;
    var selectNodeParentId = treeNode.pId;

    bootbox.confirm({
        title: "提示",
        message: "刪除組織架構[<font class='red'>" + treeNode.name + "</font>]" +
        "<br/><input type='radio' id='delOneorg' name='delOrg' checked/>如有下級架構,將會自動並入本級架構中" +
        "<br/><input type='radio' id='delPartOrg' name='delOrg'/>如有下級架構,將會一起被刪除",
        buttons: {
            confirm: {
                label: "確認",
                //className: "btn-success",
            },
            cancel: {
                label: "取消",
                //className: "btn-success",
            }
        },
        callback: function (result) {
            if (result) {//OK
                if ($('#delOneorg').is(':checked')) {
                    //開始發送數據
                    $.ajax({
                        contentType: "application/json",
                        url: "${contextPath}/organization/operateOrg",
                        dataType: "json",
                        method: 'post',
                        //傳送請求數據
                        data: JSON.stringify({
                            oper: "delMerge",
                            entry: {
                                id: selectNodeId,
                                parentid: selectNodeParentId
                            }
                        }),
                        success: function (data_) {
                            alert('刪除成功!');
                            //重載tree數據
                            reloadTree();
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert('刪除失敗!');
                        }
                    });
                } else {
                    $.ajax({
                        contentType: "application/json",
                        url: "${contextPath}/organization/operateOrg",
                        dataType: "json",
                        method: 'post',
                        //傳送請求數據
                        data: JSON.stringify({
                            oper: "del",
                            primaryKey: selectNodeId
                        }),
                        success: function (data_) {
                            alert('刪除成功!');
                            //重載tree數據
                            reloadTree();
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert('刪除失敗!');
                        }
                    });
                }

            }
        }
    });

    return false;

}

function addOrganization() {
    if ($("#form_organizationName").val().length == 0) {
        $("#form_organizationName").focus();
        return false;
    }
    if ($("#form_organizationIsactive").val().length == 0) {
        $("#form_organizationIsactive").focus();
        return false;
    }
    if ($("#form_organizationPRIORITY").val().length == 0||!isNumber($("#form_organizationPRIORITY").val())) {
        if(!isNumber($("#form_organizationPRIORITY").val()))
        $("#form_organizationPRIORITY").focus();
        $("#priorityTip").show();
        return false;
    }


    //開始發送數據
    $.ajax
    ({
        contentType: "application/json",
        url: "${contextPath}/organization/operateOrg",
        dataType: "json",
        method: 'post',
        //傳送請求數據
        data: JSON.stringify({
            oper: "update",
            entry: {
                id: -1,
                parentid: $("#form_organizationParent").val(),
                orgname: $("#form_organizationName").val(),
                orgbrief: $("#form_organizationORG_BRIEF").val(),
                orgcode: $("#form_organizationORG_CODE").val(),
                isactive: $("#form_organizationIsactive").val(),
                priority: $("#form_organizationPRIORITY").val(),
                addway: $("#form_organizationADDWAY").val(),
                description: $("#form_organizationDesc").val()
            }
        }),
        success: function (data_) {
            //alert(data_);
            alert(data_.message);
            //重載grid數據
            reloadTree();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("error:" + textStatus);
        }
    });
    //$("#add_proj").modal("show");
    $("#modal-table").modal("hide");
}


function editOrganization() {
    if ($("#form_organizationName").val().length == 0) {
        $("#form_organizationName").focus();
        return false;
    }
    if ($("#form_organizationIsactive").val().length == 0) {
        $("#form_organizationIsactive").focus();
        return false;
    }
    if ($("#form_organizationPRIORITY").val().length == 0||!isNumber($("#form_organizationPRIORITY").val())) {
        if(!isNumber($("#form_organizationPRIORITY").val()))
            $("#form_organizationPRIORITY").focus();
        $("#priorityTip").show();
        return false;
    }
    //開始發送數據
    $.ajax
    ({
        contentType: "application/json",
        url: "${contextPath}/organization/operateOrg",
        dataType: "json",
        method: 'post',
        //傳送請求數據
        data: JSON.stringify({
            oper: "update",
            entry: {
                id: $("#form_organizationORG_ID").val(),
                parentid: $("#form_organizationParent").val(),
                orgname: $("#form_organizationName").val(),
                orgbrief: $("#form_organizationORG_BRIEF").val(),
                orgcode: $("#form_organizationORG_CODE").val(),
                isactive: $("#form_organizationIsactive").val(),
                priority: $("#form_organizationPRIORITY").val(),
                description: $("#form_organizationDesc").val()
            }
        }),
        success: function (data_) {
            //alert(data_);
            alert(data_.message);
            //重載grid數據
            reloadTree();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("error:" + textStatus);
        }
    });
    //$("#add_proj").modal("show");
    $("#modal-table").modal("hide");
}