ztree樹形下拉選

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;
	}