xntree树形插件实现多级目录节点效果代码
代码语言：html
所属分类：其他
代码描述：xntree树形插件实现多级目录节点效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/xntree.min.js"></script>
<style>
body {
background: #fff;
}
.tree {
width: 430px;
max-height: 500px;
overflow: auto;
border: 1px solid #ccc;
background: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.xntree-ope {
font-size: 12px;
display: none;
}
.xntree-ope a {
margin-left: 4px;
}
.xntree-item:hover .xntree-ope {
display: flex;
}
input {
width: 430px;
height: 32px;
line-height: 32px;
border: 1px solid #ccc;
outline: none;
padding: 0 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 0;
}
.xn-tree-container {
padding: 20px;
}
.btns a {
font-size: 14px;
background: #4a9bfe;
color: #fff;
padding: 0 10px;
line-height: 32px;
margin-bottom: 10px;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<div class="xn-tree-container">
<h3>完整功能（设置容器最大高度500px）</h3>
<div class="btns">
<a id="checkAll">全选</a>
<a id="checkAllSearch">全选(仅搜索结果项)</a>
<a id="clearAll">全清</a>
<a id="addRoot">添加根节点</a>
</div>
<input id="keyword" autocomplete="off" placeholder="请输入关键词回车搜索,搜索结果包含子节点">
<div class="tree" id="tree"></div>
</div>
<div class="xn-tree-container">
<h3>单选框-显示内容为text字段（设置容器固定高度300）</h3>
<div class="btns">
</div>
<!-- <input id="keyword" autocomplete="off" placeholder="请输入关键词回车搜索,搜索结果包含子节点">-->
<div class="tree" id="tree1" style="height: 300px;"></div>
</div>
<div class="xn-tree-container">
<h3>无复选框和单选框</h3>
<div class="btns">
</div>
<!-- <input id="keyword" autocomplete="off" placeholder="请输入关键词回车搜索,搜索结果包含子节点">-->
<div class="tree" id="tree2"></div>
</div>
<div class="xn-tree-container">
<h3>自定义显示内容，不显示默认图标</h3>
<div class="btns">
</div>
<!-- <input id="keyword" autocomplete="off" placeholder="请输入关键词回车搜索,搜索结果包含子节点">-->
<div class="tree" id="tree3"></div>
</div>
<script type="module">
let data=[
{
"id": "-",
"text": "支出功能分类",
"state": null,
"checked": false,
"attributes": {
"stopflag": 0,
"objectcode": "-",
"parents": "-"
},
"parentid": "-",
"hasParent": false,
"hasChildren": true,
"icon": null
}
]
let data1=[
{
"id": "-",
"text": "项目",
"state": null,
"checked": false,
"parentid": "-",
"hasParent": false,
"hasChildren": true,
"icon": null
}
]
let data2=[
{
"id": "-",
"text": "项目",
"state": null,
"checked": false,
"attributes": {
"stopflag": 0,
"objectcode": "-",
"parents": "-"
},
"parentid": "-",
"hasParent": false,
"hasChildren": true,
"icon": null
}
]
let bigdata=[
{
"text": "1000个子节点",
"id": 1,
"parentid": null,
"children": [
{
"text": "卢静",
"id": 3,
"parentid": 1
},
{
"text": "程艳",
"id": 6,
"parentid": 1
},
{
"text": "丁娜",
"id": 9,
"parentid": 1
},
{
"text": "熊娜",
"id": 12,
"parentid": 1
},
{
"text": "韩静",
"id": 15,
"parentid": 1
},
{
"text": "周霞",
"id": 18,
"parentid": 1
},
{
"text": "卢勇",
"id": 21,
"parentid": 1
},
{
"text": "邵静",
"id": 24,
"parentid": 1
},
{
"text": "邓娜",
"id": 27,
"parentid": 1
},
{
"text": "薛芳",
"id": 30,
"parentid": 1
},
{
"text": "钱桂英",
"id": 33,
"parentid": 1
},
{
"text": "万娜",
"id": 36,
"parentid": 1
},
{
"text": "秦丽",
"id": 39,
"parentid": 1
},
{
"text": "蔡洋",
"id": 42,
"parentid": 1
},
{
"text": "徐超",
"id": 45,
"parentid": 1
},
{
"text": "白敏",
"id": 48,
"parentid": 1
},
{
"text": "龙霞",
"id": 51,
"parentid": 1
},
{
"text": "秦平",
"id": 54,
"parentid": 1
},
{
"text": "康芳",
"id": 57,
"parentid": 1
},
{
"text": "方娟",
"id": 60,
"parentid": 1
},
{
"text": "朱杰",
"id": 63,
"parentid": 1
},
{
"text": "杜娜",
"id": 66,
"parentid": 1
},
{
"text": "谢洋",
"id": 69,
"parentid": 1
},
{
"text": "马超",
"id": 72,
"parentid": 1
},
{
"text": "萧静",
"id": 75,
"parentid": 1
},
{
"text": "常伟",
"id": 78,
"parentid": 1
},
{
"text": "于明",
"id": 81,
"parentid": 1
},
{
"text": "赵秀兰",
"id": 84,
"parentid": 1
},
{
"text": "薛强",
"id": 87,
"parentid": 1
},
{
"text": "曾丽",
"id": 90,
"parentid": 1
},
{
"text": "任静",
"id": 93,
"parentid": 1
},
{
"text": "刘平",
"id": 96,
"parentid": 1
},
{
"text": "万勇",
"id": 99,
"parentid": 1
},
{
"text": "马霞",
"id": 102,
"parentid": 1
},
{
"text": "孔杰",
"id": 105,
"parentid": 1
},
{
"text": "孟艳",
"id": 108,
"parentid": 1
},
{
"text": "常刚",
"id": 111,
"parentid": 1
},
{
"text": "龚丽",
"id": 114,
"parentid": 1
},
{
"text": "孙艳",
"id": 117,
"parentid": 1
},
{
"text": "于涛",
"id": 120,
"parentid": 1
},
{
"text": "万杰",
"id": 123,
"parentid": 1
},
{
"text": "杨霞",
"id": 126,
"parentid": 1
},
{
"text": "叶敏",
"id": 129,
"parentid": 1
},
{
"text": "高刚",
"id": 132,
"parentid": 1
},
{
"text": "杨军",
"id": 135,
"parentid": 1
},
{
"text": "蔡霞",
"id": 138,
"parentid": 1
},
{
"text": "邹娟",
"id": 141,
"parentid": 1
},
{
"text": "宋丽",
"id": 144,
"parentid": 1
},
{
"text": "戴秀英",
"id": 147,
"parentid": 1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0