实现效果: 可勾选的树

官网传送门

1: 引入 css 样式, 以及js文件

<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet" />

jquery.ztree 是依赖于 jquery的

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>

2:创建一个div标签,配置一下js就ok了

<div class="col-sm-8">
	<!-- 树形插件 -->
	<div id="treeDemo" class="ztree"></div>
</div>


<script type="text/javascript">
			var prefix = ctx + "/system/knowledge";
			$(function () {
				var url = ctx + "/system/category/sheBeiZiDianTreeData?categoryId=109";
				// var url = ctx + "/system/category/sheBeiZiDianTreeData?categoryId=" + $("#categoryId").val();
				var options = {
					id: "treeDemo",
					url: url,
					check: {
						enable: true, // true / false 分别表示 显示 / 不显示 复选框或单选框
						nocheckInherit: true, // 当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 
						autoCheckTrigger:true, // true / false 分别表示 触发 / 不触发 事件回调函数
						chkStyle: "checkbox", // 默认checkbox, 可设置选择框为 radio 
						chkboxType: { "Y": "ps", "N": "ps" } // checkbox 勾选操作，只影响父级节点；取消勾选操作，只影响子级节点
					},
					expandLevel: 1, // 默认展开等级,0 代表不展开,1代表展开一级节点
				};
				$.tree.init(options);
			});

ztree默认自动打开第一级

 // 树结构配置
 var options = {
     callback: {
     // 当点击勾选框时触发点击事件
         onCheck: function (event, treeId, treeNode) {
             if (treeNode.checked) {
                 $('input[name="serviceItemName"]').val(treeNode.name);
                 $('input[name="serviceItem"]').val(treeNode.id);        
             } else {
                 $('input[name="serviceItemName"]').val('');
             }
         },
         // ztree 点击文字选中文字前面的复选框
         onClick: function(event, treeId, treeNode) {
                 treeObj.checkNode(treeNode, !treeNode.checked, true);
             }
     },
     view: {
         dblClickExpand: function (treeId, treeNode) {//父节点双击展开
             return treeNode.level >= 0;
         },
         showIcon: false,
         showLine: true
     },
     data: {
         simpleData: {
             enable: true,
             idKey: "id",
             pIdKey: "pId"
         }
     },
     check: {
         enable: true, // true / false 分别表示 显示 / 不显示 复选框或单选框
         nocheckInherit: true, // 当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 
         autoCheckTrigger: true, // true / false 分别表示 触发 / 不触发 事件回调函数
         chkStyle: "radio", // 默认checkbox, 可设置选择框为 radio  checkbox
         chkboxType: { "Y": "ps", "N": "ps" } // checkbox 勾选操作，只影响父级节点；取消勾选操作，只影响子级节点
     },
 };
 // 选择节点挂载树插件
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
if (nodes.length>0) {
    for(var i=0;i<nodes.length;i++){
    treeObj.expandNode(nodes[i], true, false, false);
    }
}