zTree的使用教程

1、首先去官網下載http://www.ztree.me/v3/main.php#_zTreeInfo

2、之后引入：

<script src="js/jquery.ztree.all-3.5.js"></script>
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">

3、寫js：

<!--樹形結構 JS-->
<script type="text/javascript">
    var setting= {
        data: {
            simpleData: {enable: true}
        },
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
        },
        view: {
            showLine: true
        },
        callback: {
            onClick: onClick,
            onCheck: onCheck,
        }
    };

    var zNodes =[
            <#if selectNewsTypeAll?size gt 0>
                <#list selectNewsTypeAll as sNewsTypeAll>
                    {id:${sNewsTypeAll.id}, pId:${sNewsTypeAll.parentId}, name:"${sNewsTypeAll.name}"},
                </#list>
            </#if>
    ];

    $(document).ready(function() {
        $.fn.zTree.init($("#treeConfig"), setting, zNodes);
    });

    function onClick(e,treeId,treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeConfig");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }

    function onCheck(e,treeId,treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeConfig"),
                nodes = zTree.getCheckedNodes(true);
        var name = "", id = "";
        for (var i = 0, l = nodes.length; i < l; i++) {
            name = nodes[i].name;
            newsTypeId = nodes[i].id;
        }
        $("#treeName").val(name);
        $("#treeId").val(id);
    }

    function showMenu() {
        var dropdownObj = $("#treeName");
        var dropdownOffset = $("#treeName").offset();
        $("#treeContainer").css({
            left: dropdownOffset.left + "px",
            top: dropdownOffset.top + dropdownObj.outerHeight() + "px"
        }).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
        var w = $("#treeName").width();
        var p = $("#treeName").css("padding-left");
        $("#treeConfig").css("width",parseInt(w)+parseInt(p)*2);
    }

    function hideMenu() {
        $("#treeContainer").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }

function onBodyDown(event) {
     if (!(event.target.id == "chooseButton" || event.target.id == "treeName" || event.target.id == "treeContainer" || $(event.target).parents("#treeContainer").length > 0)) {
            hideMenu();
            //以下代碼暫時沒用到 start
            var height = top.$("#mainFrame").contents().find("body").height();
            if (height < 850) {
                height = 850;
            }
            top.$("#mainFrame").height(height);
            //以下代碼暫時沒用到 end
        }
    }
</script>

文本框的代碼：

<input type="text" class="form-control input-sm" id="treeName" onclick="showMenu()">
<input type="hidden" name="newsTypeId" id="treeId"/>

樹狀圖顯示的地方：

<div id="treeContainer" class="treeContainer">
    <ul id="treeConfig" class="ztree"></ul>
</div>

必要的樣式：

.treeContainer{
    display:none; 
    position: absolute;
}

以下是詳解：

數據填充 
重點就在於zNodes的配置。就是要配置好id、pId、name;這三個屬性。

var zNodes =[
   <#if selectNewsTypeAll?size gt 0>
     <#list selectNewsTypeAll as sNewsTypeAll>
         {
         id:${sNewsTypeAll.id},
         pId:${sNewsTypeAll.parentId},
         name:"${sNewsTypeAll.name}"
         },
      </#list>
  </#if>
 ];

setting 中callback是回調函數，我上面寫了兩個

callback: {
            //節點點擊事件
            onClick: onClick, 
            //節點選中事件
            onCheck: onCheck,
}

setting中其他屬性默認，就行。

由於一加載頁面就要把樹狀圖准備好，只不過沒有顯示出來而已！所以需要以下代碼

$(document).ready(function() {
        //初始化
        $.fn.zTree.init($("#treeConfig"), setting, zNodes);
});

節點點擊事件，沒什么說的，這樣配置就可以了：

function onClick(e,treeId,treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeConfig");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
}

節點選擇事件：

function onCheck(e,treeId,treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeConfig"),
                nodes = zTree.getCheckedNodes(true);
        var name = "", id = "";
        for (var i = 0, l = nodes.length; i < l; i++) {
            name = nodes[i].name;
            newsTypeId = nodes[i].id;
        }
        $("#treeName").val(name);
        $("#treeId").val(id);
}

其中：

 $("#treeName").val(name);
 $("#treeId").val(id);

是根據自己的業務來的，我是因為在選擇節點之后，要把，你選擇的名字顯示出來，並且id要寫入隱藏字段，以便保存到數據庫。

樹狀圖是在什么時候顯示出來呢？我設置的是當點擊文本框的時候顯示出來

function showMenu() {
        var dropdownObj = $("#treeName");
        var dropdownOffset = $("#treeName").offset();
        $("#treeContainer").css({
            left: dropdownOffset.left + "px",
            top: dropdownOffset.top + dropdownObj.outerHeight() + "px"
        }).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
        //獲取文本框的寬度
        var w = $("#treeName").width();
        //獲取文本框的內填充
        var p = $("#treeName").css("padding-left");
        //設置樹狀圖的寬度
        $("#treeConfig").css("width",parseInt(w)+parseInt(p)*2);
}

其中：

$("body").bind("mousedown", onBodyDown);

是綁定了一個鼠標點擊事件，當點擊其他區域，會觸發onBodyDown事件。

function onBodyDown(event) {
        if (!(event.target.id == "chooseButton" || event.target.id == "treeName" || event.target.id == "treeContainer" || $(event.target).parents("#treeContainer").length > 0)) {
            hideMenu();
            //以下代碼暫時沒用到 start
            var height = top.$("#mainFrame").contents().find("body").height();
            if (height < 850) {
                height = 850;
            }
            top.$("#mainFrame").height(height);
            //以下代碼暫時沒用到 end
        }
}

這里面又調用hideMenu()把樹狀圖隱藏掉。

需要用到的文本框代碼：

<input type="text" class="form-control input-sm" id="treeName" onclick="showMenu()">
<input type="hidden" name="newsTypeId" id="treeId"/>

而用於顯示樹狀圖的代碼是： 這段代碼不一定要和上面那段文本框代碼放在一起。

<div id="treeContainer" class="treeContainer">
   <ul id="treeConfig" class="ztree"></ul>
</div>

因為，這里面做了位置的偏移。

function showMenu() {
        var dropdownObj = $("#treeName");
        //獲取偏移量
        var dropdownOffset = $("#treeName").offset();
        $("#treeContainer").css({
            left: dropdownOffset.left + "px",
            top: dropdownOffset.top + dropdownObj.outerHeight() + "px"
        }).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
        var w = $("#treeName").width();
        var p = $("#treeName").css("padding-left");
        $("#treeConfig").css("width",parseInt(w)+parseInt(p)*2);
}

由於zTree自帶的樣式不好看，我進行了細微的跳轉，只是讓顯示稍微好看些

/*一定要的*/
.treeContainer{
    display:none; 
    position: absolute;
}
/*根據自己情況而定*/
.treeContainer .ztree{
    background-color:#FFF;
}