jquery.ztree.all.min.js 如何使用，这是一个简单的例子；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>角色授权</title>
<link rel="stylesheet" href="__LAYUI__/css/layui.css">
<link rel="stylesheet" href="__ZTREE__/css/ztree-metro-style.css">
</head>
<body>
<div style="padding: 20px;">
<ul id="tree" class="ztree" ></ul>
<input type="hidden" id="role_id" name="id" value="{$id}">
<button class="layui-btn layui-btn-sm" id="auth-btn">确认</button>
</div>
<script src="__JS__/jquery.min.js"></script>
<script src="__LAYUI__/layui.js"></script>
<script src="__ZTREE__/js/jquery.ztree.all.min.js"></script>
<script>
layui.use('layer', function(){
var layer = layui.layer;
$(function(){
//加载树形授权菜单
var role_id = $("#role_id").val();
var tree = $("#tree");
var zTree;
//配置项
var setting = {
check: {
enable: true
},
view: {
dblClickExpand: false,
showLine: true,
showIcon: false,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid",
rootpid: 0
},
key: {
name: "name"
}
}
};
$.ajax({
url: "{:url('admin/role/ajaxGetRoles')}",
type: "post",
dataType: "json",
cache: false,
data: {id: role_id},
success: function (data) {
zTree = $.fn.zTree.init(tree, setting, data);
//zTree.expandAll(true);//默认全部展开
}
});
$("#auth-btn").on("click", function () {
var checked_ids,rules_ids = [];
checked_ids = zTree.getCheckedNodes(); // 获取当前选中的checkbox
$.each(checked_ids, function (index, item) {
rules_ids.push(item.id);
});
$.ajax({
url: "{:url('admin/role/ajaxUpdateRules')}",
type: "post",
data: {
id: role_id,
ids: rules_ids
},
success: function (data) {
layer.msg(data.msg,{icon:1,time:500});
if(data.code === 1){
setTimeout(function () {
parent.location.href = data.url;
}, 1000);
}
}
});
});
})
});
</script>
</body>
</html>