ztree是一個使用度很高的，功能很齊全的 javascript 樹形菜單插件。今天我主要想給大家介紹的是他的 選擇框 勾選功能。這個功能在我們做 權限 分配等，需要選擇的功能時，很有用。
首先到官網[http://www.treejs.cn/v3/main.php#\_zTreeInfo](http://www.treejs.cn/v3/main.php#_zTreeInfo)，點擊下載，也可以到 github[https://github.com/zTree/](https://github.com/zTree/)去下載。
下載完成之后，解壓到項目的 static 中
ztree所需要的格式很簡單，只需要將數據按照如下的格式組織：
~~~
[
{ id:1, pId:0, name:"隨意勾選 1", open:true},
{ id:11, pId:1, name:"隨意勾選 1-1", open:true},
{ id:111, pId:11, name:"隨意勾選 1-1-1"},
{ id:112, pId:11, name:"隨意勾選 1-1-2"},
{ id:12, pId:1, name:"隨意勾選 1-2", open:true},
{ id:121, pId:12, name:"隨意勾選 1-2-1"},
{ id:122, pId:12, name:"隨意勾選 1-2-2"},
{ id:2, pId:0, name:"隨意勾選 2", checked:true, open:true},
{ id:21, pId:2, name:"隨意勾選 2-1"},
{ id:22, pId:2, name:"隨意勾選 2-2", open:true},
{ id:221, pId:22, name:"隨意勾選 2-2-1", checked:true},
{ id:222, pId:22, name:"隨意勾選 2-2-2"},
{ id:23, pId:2, name:"隨意勾選 2-3"}
];
~~~
主要的數據 是 id，pId 和 name。
> 請注意大小寫，嚴格區分。
**open**：是用來控制 樹的菜單是否展開，如果是 true 默認展開，否則會收起。
**checked**: 控制該節點可選或者不可選
新建 application\\index\\controller\\Ztree.php
~~~
<?php
namespace app\index\controller;
use think\Controller;
class Ztree extends Controller
{
// ztree 的基本操作
public function index()
{
$area = db('area')->field('id,name,pid as pId')->select();
$this->assign([
'zNodes' => json_encode($area)
]);
return $this->fetch();
}
}
~~~
我們將準備好的數據，渲染到前臺就可以了，不需要我們像使用 laytree 那樣自己去組織好數據格式。這一點很是方便。
新建 application\\index\\view\\ztree\\index.html
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ztree編輯選擇</title>
<link href="/static/zTree/zTreeStyle.css" rel="stylesheet">
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="zTreeDemoBackground left" id="role">
<input type="hidden" id="nodeid">
<div class="form-group">
<div class="col-sm-5 col-sm-offset-2">
<ul id="treeType" class="ztree"></ul>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4" style="margin-bottom: 15px">
<input type="button" value="確認分配" class="btn btn-primary" id="postform"/>
</div>
</div>
</div>
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/zTree/jquery.ztree.core-3.5.js"></script>
<script src="/static/zTree/jquery.ztree.excheck-3.5.js"></script>
<script src="/static/zTree/jquery.ztree.exedit-3.5.js"></script>
<script>
//設置zetree
var setting = {
check:{
enable:true
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes = {$zNodes};
$(function(){
$.fn.zTree.init($("#treeType"), setting, zNodes);
var zTree = $.fn.zTree.getZTreeObj("treeType");
});
</script>
</body>
</html>
~~~
訪問[http://www.phper.com/index/ztree/index](http://www.phper.com/index/ztree/index)可見
數據渲染出來了，那勾選了哪個選項，我們該如何得知呢？
~~~
// 獲取選中的節點
$("#postform").click(function(){
var zTree = $.fn.zTree.getZTreeObj("treeType");
var nodes = zTree.getCheckedNodes(true);
var NodeString = '';
$.each(nodes, function (n, value) {
if(n>0){
NodeString += ',';
}
NodeString += value.id;
});
alert(NodeString);
})
~~~
點擊缺人分配，可以通過
~~~
zTree.getCheckedNodes(true);
~~~
得到選中節點的信息，組裝一下選中節點的數據
選中的 id 一目了然
