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 一目了然
