先引入ztree的幾個依賴文件：

<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="lib/zTree/v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.excheck-3.5.js"></script>

html中寫：

<ul id="treeDemo" class="ztree"></ul>

js中配置：

<script type="text/javascript">
	var setting = {
		check: {
           　　　　 enable: true,
            　　　　chkStyle: "radio",
           　　　　 radioType: "all"
       　　　　 },
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onCheck: onCheck //回調選擇
        }
	};

	var zNodes =[
		{ id:1, pId:0, name:"雞鳴寺",nocheck:true}, //表示沒有單選框
		{ id:11, pId:1, name:"地點一",nocheck:true},
		{ id:111, pId:11, name:"二食堂"},
		{ id:112, pId:11, name:"三食堂"},
		{ id:12, pId:1, name:"地點二",nocheck:true},
		{ id:121, pId:12, name:"地點2-1"},
		{ id:122, pId:12, name:"地點2-2"}
	];
	function onCheck(e, treeId, treeNode){
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		nodes = zTree.getCheckedNodes(true);//獲取所選你的id值

　　　　　　　　　var txt = ""; //獲取所有的最底層的葉子節點的id
       　　　　 for (var i = 0; i < nodes.length; i++) {
            　　　　if (nodes[i].isParent) {
            	
           　　 　　} else {
                　　　　txt += nodes[i].id + ",";
            　　　　}
       　　　　 }
      　　　　 // txt = txt.replace("null,", ""); //替換選擇父節點的id
        　　　　txt = txt.substring(0, txt.length - 1);
        　　　　//alert(txt);

　
		selVal = nodes[0].id;
		$("#sel").val(selVal);
	}
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化
		
	});
</script>

最后運行的結果為：

復選框改一個

chkStyle: "checkbox",

總結

以上是生活随笔為你收集整理的ztree使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。