在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' οnfοcus='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");}