You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.4 KiB
101 lines
2.4 KiB
3 years ago
|
|
||
|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||
|
|
pageEncoding="UTF-8"%>
|
||
|
|
<%@ page import="com.lp.cfg.ProConfig"%>
|
||
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
|
||
|
|
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
|
||
|
|
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="<%=basePath%>/lib/ztree/zTreeStyle.css" type="text/css">
|
||
|
|
<script type="text/javascript" src="<%=basePath%>/lib/ztree/jquery.ztree.core.min.js"></script>
|
||
|
|
<script type="text/javascript" src="<%=basePath%>/lib/ztree/jquery.ztree.excheck.min.js"></script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
.ztree li a:hover {
|
||
|
|
text-decoration: none !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<h1> Tree 树型结构 </h1>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
|
||
|
|
<div id="showAreaTree" style="overflow-y: auto;">
|
||
|
|
<ul id="treeInfo" class="ztree"></ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
var zTreeObj; // 左侧树形结构
|
||
|
|
|
||
|
|
var treeConfig = {
|
||
|
|
view : {
|
||
|
|
showLine : false,
|
||
|
|
showIcon : false
|
||
|
|
},
|
||
|
|
callback : { //回调函数
|
||
|
|
onClick : clickfunc
|
||
|
|
}
|
||
|
|
// ,
|
||
|
|
// data: {
|
||
|
|
// simpleData: {
|
||
|
|
// enable: true
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
};
|
||
|
|
|
||
|
|
// 回调函数
|
||
|
|
function clickfunc(event, treeId, treeNode) {
|
||
|
|
console.log(event);
|
||
|
|
console.log(treeId);
|
||
|
|
console.log(treeNode);
|
||
|
|
}
|
||
|
|
|
||
|
|
// var zNodes = [
|
||
|
|
// {id:1, pId:0, name: "父节点1"},
|
||
|
|
// {id:11, pId:1, name: "子节点1"},
|
||
|
|
// {id:12, pId:1, name: "子节点2"}
|
||
|
|
// ];
|
||
|
|
|
||
|
|
var zNodes = [
|
||
|
|
{name:"test1", children:[
|
||
|
|
{name:"test1_1"}, {name:"test1_2"}, {name:"test1_2" ,children:[
|
||
|
|
{name:"test1_1"}, {name:"test1_2"}, {name:"test1_2" }
|
||
|
|
] }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{name:"test2", children:[
|
||
|
|
{name:"test2_1"}, {name:"test2_2"}
|
||
|
|
]}
|
||
|
|
];
|
||
|
|
|
||
|
|
zTreeObj = $.fn.zTree.init( $("#treeInfo"), treeConfig , zNodes);
|
||
|
|
/* 获取所有树节点 */
|
||
|
|
var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
|
||
|
|
//展开第一级树
|
||
|
|
zTreeObj.expandNode(nodes[0], true);
|
||
|
|
zTreeObj.selectNode(nodes[0]);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|