学习springboot 和前端插件ztree的学习笔记,记录备忘:
1、引入css和js,这里的/目录对应src/main/resources/static目录
<link rel="stylesheet" type="text/css" th:href="@{/zTreeStyle.css}">
<script type="text/javascript" src="/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/jquery.ztree.all.js"></script>
2、添加如下 HTML 代码
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
3、第三步:初始化zTree
function zTreeOnRightClick(event, treeId, treeNode) {
alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
};
var zTreeObj;
//此处定义鼠标右键方法
var setting = {
callback: {
onRightClick: zTreeOnRightClick
}
};
//此处定义节点信息及鼠标左键方法
var zNodes = [
{name:"test1",
open:true, "click":"alert('test');",children:[
{name:"test1_1"}, {name:"test1_2"}]},
{name:"test2", open:true, children:[
{name:"test2_1"}, {name:"test2_2"}]}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});