ztree文档http://www.treejs.cn/v3/main.php#_zTreeInfo
<div class="layui-form-item">
<label class="layui-form-label">菜单名称:</label>
<div id="menuContentCall" style="position:auto">
<ul id="tree" class="ztree" ></ul>
</div>
</div>
导入以下文件
<script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.excheck.js"></script>
js
var mycars=new Array();
<script th:inline="javascript">
function inittree() {//初始化树
$.ajax({
crossDomain: true,
xhrFields: {
withCredentials: true
},
async:false,//同步执行
type:"post",
url:[[@{/getmenus}]],
datatype:"json",
success:function(data){
$.fn.zTree.init($("#tree"), setting, data);//#tree为ul的id
},
error:function(data){
alert("error!")
}
});
}
var setting = {
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClickCall,
onCheck: zTreeOnCheck,
beforeCheck: zTreeBeforeCheck
},
check:{
autoCheckTrigger: true,
chkboxType: { "Y": "ps", "N": "ps" },
chkStyle: "checkbox",//复选框类型
enable: true //每个节点上是否显示 CheckBox
}
}
function beforeClickCall(treeId, treeNode) {
var checkCall = (treeNode || treeNode.isParent);
return checkCall;
}
function zTreeBeforeCheck(treeId, treeNode) {
var treeObj=$.fn.zTree.getZTreeObj("tree");
nodes=treeObj.getCheckedNodes(true);
for(var i=0;i<nodes.length;i++){
if( !mycars.includes(nodes[i].id)) {//includes 检测数组是否有某个值
mycars.push(nodes[i].id);
}
}
return true;
};
function zTreeOnCheck(event, treeId, treeNode) {
/* alert(treeNode.id + ", " + treeNode.name + "," + treeNode.checked); */
if(treeNode.checked==true){//被选中且之前没被选中,就添加到数据库中,否则会有重复
//mycars.push(treeNode.id);
if(!mycars.includes(treeNode.id)) {//includes 检测数组是否有某个值
mycars.push(treeNode.id);
}
}else{
mycars.remove(treeNode.id)
}
};
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
</script>
后台数据格式
@ResponseBody
@RequestMapping("/getmenus")
public List<JSONObject> getroles() {
List<RsysMenu> menus = sysParamService.listMenus();
List<JSONObject> jsons = new ArrayList<JSONObject>();
for (int j = 0; j < menus.size(); j++) {
RsysMenu menu = menus.get(j);
if (!Toolkit.isEmpty(menu)) {
JSONObject json = new JSONObject();
json.put("id",menu.getMenuId());
json.put("pId", menu.getParentId());
json.put("name", menu.getMenuName());
jsons.add(json);
}
}
return jsons;
}