标签:数据 属性 参考 asc file node ref styles new
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/yzyh/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/yzyh/demo.css">
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/yzyh/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script src="https://blog-static.cnblogs.com/files/yzyh/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<script src="https://blog-static.cnblogs.com/files/yzyh/jquery.ztree.exhide-3.5.min.js" type="text/javascript"></script>
<script src="https://blog-static.cnblogs.com/files/yzyh/MtrSearchZTree.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
<script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://www.jq22.com/newjs/testData.js" type="text/javascript"></script>
<script src="http://49.234.125.132/myjswj/testData.js"></script>
</head>
<body>
<div class="row" style="margin: 50px;">
<div class="col-md-3">
<ul id="tree" class="ztree">
</ul>
</div>
</div>
<script>
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
var zNodes = [{
name: "test1",
open: true, // 设置为true渲染时自动展开
children: [{
name: "test1_1"
}, {
name: "test1_2"
}, {
name: "test1",
open: true,
children: [{
name: "asdf"
}, {
name: "vrsa"
}]
}]
},
{
name: "test2",
open: true,
children: [{
name: "test2_1"
}, {
name: "test2_2"
}]
}
];
$(function () {
$.fn.zTree.init($("#tree"), setting, zNodes);
// 增加输入框和输入查询逻辑
new MtrSearchZTree();
});
</script>
</body>
</html>
标签:数据 属性 参考 asc file node ref styles new
原文地址:https://www.cnblogs.com/yzyh/p/12019667.html