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
},
{
"text": "徐平",
"id": 150,
"parentid": 1
},
{
"text": "胡秀兰",
"id": 153,
"parentid": 1
},
{
"text": "郝娜",
"id": 156,
"parentid": 1
},
{
"text": "赵娜",
"id": 159,
"parentid": 1
},
{
"text": "万娟",
"id": 162,
"parentid": 1
},
{
"text": "卢明",
"id": 165,
"parentid": 1
},
{
"text": "郑敏",
"id": 168,
"parentid": 1
},
{
"text": "邹娟",
"id": 171,
"parentid": 1
},
{
"text": "石明",
"id": 174,
"parentid": 1
},
{
"text": "石磊",
"id": 177,
"parentid": 1
},
{
"text": "龙娜",
"id": 180,
"parentid": 1
},
{
"text": "董超",
"id": 183,
"parentid": 1
},
{
"text": "龚娜",
"id": 186,
"parentid": 1
},
{
"text": "潘敏",
"id": 189,
"parentid": 1
},
{
"text": "汪静",
"id": 192,
"parentid": 1
},
{
"text": "许明",
"id": 195,
"parentid": 1
},
{
"text": "韩静",
"id": 198,
"parentid": 1
},
{
"text": "冯敏",
"id": 201,
"parentid": 1
},
{
"text": "黎磊",
"id": 204,
"parentid": 1
},
{
"text": "谭芳",
"id": 207,
"parentid": 1
},
{
"text": "傅静",
"id": 210,
"parentid": 1
},
{
"text": "贺涛",
"id": 213,
"parentid": 1
},
{
"text": "韩艳",
"id": 216,
"parentid": 1
},
{
"text": "赖平",
"id": 219,
"parentid": 1
},
{
"text": "杨敏",
"id": 222,
"parentid": 1
},
{
"text": "邹霞",
"id": 225,
"parentid": 1
},
{
"text": "廖秀英",
"id": 228,
"parentid": 1
},
{
"text": "叶艳",
"id": 231,
"parentid": 1
},
{
"text": "孔秀英",
"id": 234,
"parentid": 1
},
{
"text": "冯芳",
"id": 237,
"parentid": 1
},
{
"text": "潘平",
"id": 240,
"parentid": 1
},
{
"text": "黎芳",
"id": 243,
"parentid": 1
},
{
"text": "胡丽",
"id": 246,
"parentid": 1
},
{
"text": "萧秀兰",
"id": 249,
"parentid": 1
},
{
"text": "郑敏",
"id": 252,
"parentid": 1
},
{
"text": "熊芳",
"id": 255,
"parentid": 1
},
{
"text": "陆秀兰",
"id": 258,
"parentid": 1
},
{
"text": "吕伟",
"id": 261,
"parentid": 1
},
{
"text": "郑静",
"id": 264,
"parentid": 1
},
{
"text": "邹桂英",
"id": 267,
"parentid": 1
},
{
"text": "谢霞",
"id": 270,
"parentid": 1
},
{
"text": "杨娟",
"id": 273,
"parentid": 1
},
{
"text": "龙霞",
"id": 276,
"parentid": 1
},
{
"text": "许芳",
"id": 279,
"parentid": 1
},
{
"text": "熊霞",
"id": 282,
"parentid": 1
},
{
"text": "江艳",
"id": 285,
"parentid": 1
},
{
"text": "王敏",
"id": 288,
"parentid": 1
},
{
"text": "范霞",
"id": 291,
"parentid": 1
},
{
"text": "曾霞",
"id": 294,
"parentid": 1
},
{
"text": "丁超",
"id": 297,
"parentid": 1
},
{
"text": "邓秀英",
"id": 300,
"parentid": 1
},
{
"text": "罗军",
"id": 303,
"parentid": 1
},
{
"text": "范军",
"id": 306,
"parentid": 1
},
{
"text": "孙明",
"id": 309,
"parentid": 1
},
{
"text": "冯娟",
"id": 312,
"parentid": 1
},
{
"text": "郝桂英",
"id": 315,
"parentid": 1
},
{
"text": "吴秀英",
"id": 318,
"parentid": 1
},
{
"text": "顾超",
"id": 321,
"parentid": 1
},
{
"text": "林芳",
"id": 324,
"parentid": 1
},
{
"text": "姚平",
"id": 327,
"parentid": 1
},
{
"text": "郑杰",
"id": 330,
"parentid": 1
},
{
"text": "侯强",
"id": 333,
"parentid": 1
},
{
"text": "秦静",
"id": 336,
"parentid": 1
},
{
"text": "李桂英",
"id": 339,
"parentid": 1
},
{
"text": "白刚",
"id": 342,
"parentid": 1
},
{
"text": "冯静",
"id": 345,
"parentid": 1
},
{
"text": "金娟",
"id": 348,
"parentid": 1
},
{
"text": "苏静",
"id": 351,
"parentid": 1
},
{
"text": "叶涛",
"id": 354,
"parentid": 1
},
{
"text": "曾娜",
"id": 357,
"parentid": 1
},
{
"text": "郭刚",
"id": 360,
"parentid": 1
},
{
"text": "金强",
"id": 363,
"parentid": 1
},
{
"text": "姜芳",
"id": 366,
"parentid": 1
},
{
"text": "周超",
"id": 369,
"parentid": 1
},
{
"text": "邱杰",
"id": 372,
"parentid": 1
},
{
"text": "尹超",
"id": 375,
"parentid": 1
},
{
"text": "许静",
"id": 378,
"parentid": 1
},
{
"text": "夏娜",
"id": 381,
"parentid": 1
},
{
"text": "叶伟",
"id": 384,
"parentid": 1
},
{
"text": "丁刚",
"id": 387,
"parentid": 1
},
{
"text": "沈芳",
"id": 390,
"parentid": 1
},
{
"text": "吴娟",
"id": 393,
"parentid": 1
},
{
"text": "白涛",
"id": 396,
"parentid": 1
},
{
"text": "姜明",
"id": 399,
"parentid": 1
},
{
"text": "唐明",
"id": 402,
"parentid": 1
},
{
"text": "孟娜",
"id": 405,
"parentid": 1
},
{
"text": "许勇",
"id": 408,
"parentid": 1
},
{
"text": "郭秀兰",
"id": 411,
"parentid": 1
},
{
"text": "梁强",
"id": 414,
"parentid": 1
},
{
"text": "方敏",
"id": 417,
"parentid": 1
},
{
"text": "徐杰",
"id": 420,
"parentid": 1
},
{
"text": "董磊",
"id": 423,
"parentid": 1
},
{
"text": "范娟",
"id": 426,
"parentid": 1
},
{
"text": "龚艳",
"id": 429,
"parentid": 1
},
{
"text": "廖秀英",
"id": 432,
"parentid": 1
},
{
"text": "高丽",
"id": 435,
"parentid": 1
},
{
"text": "邱秀英",
"id": 438,
"parentid": 1
},
{
"text": "邵杰",
"id": 441,
"parentid": 1
},
{
"text": "贺丽",
"id": 444,
"parentid": 1
},
{
"text": "文军",
"id": 447,
"parentid": 1
},
{
"text": "邵秀英",
"id": 450,
"parentid": 1
},
{
"text": "彭丽",
"id": 453,
"parentid": 1
},
{
"text": "康杰",
"id": 456,
"parentid": 1
},
{
"text": "袁明",
"id": 459,
"parentid": 1
},
{
"text": "史涛",
"id": 462,
"parentid": 1
},
{
"text": "程霞",
"id": 465,
"parentid": 1
},
{
"text": "侯秀英",
"id": 468,
"parentid": 1
},
{
"text": "武芳",
"id": 471,
"parentid": 1
},
{
"text": "孙勇",
"id": 474,
"parentid": 1
},
{
"text": "易艳",
"id": 477,
"parentid": 1
},
{
"text": "万艳",
"id": 480,
"parentid": 1
},
{
"text": "杜涛",
"id": 483,
"parentid": 1
},
{
"text": "龙涛",
"id": 486,
"parentid": 1
},
{
"text": "汤秀英",
"id": 489,
"parentid": 1
},
{
"text": "高桂英",
"id": 492,
"parentid": 1
},
{
"text": "罗静",
"id": 495,
"parentid": 1
},
{
"text": "杨敏",
"id": 498,
"parentid": 1
},
{
"text": "萧杰",
"id": 501,
"parentid": 1
},
{
"text": "贾艳",
"id": 504,
"parentid": 1
},
{
"text": "徐敏",
"id": 507,
"parentid": 1
},
{
"text": "廖平",
"id": 510,
"parentid": 1
},
{
"text": "徐霞",
"id": 513,
"parentid": 1
},
{
"text": "何洋",
"id": 516,
"parentid": 1
},
{
"text": "乔秀英",
"id": 519,
"parentid": 1
},
{
"text": "彭平",
"id": 522,
"parentid": 1
},
{
"text": "夏丽",
"id": 525,
"parentid": 1
},
{
"text": "谭平",
"id": 528,
"parentid": 1
},
{
"text": "郝强",
"id": 531,
"parentid": 1
},
{
"text": "邱超",
"id": 534,
"parentid": 1
},
{
"text": "易静",
"id": 537,
"parentid": 1
},
{
"text": "万静",
"id": 540,
"parentid": 1
},
{
"text": "梁桂英",
"id": 543,
"parentid": 1
},
{
"text": "马艳",
"id": 546,
"parentid": 1
},
{
"text": "董敏",
"id": 549,
"parentid": 1
},
{
"text": "黎丽",
"id": 552,
"parentid": 1
},
{
"text": "黄超",
"id": 555,
"parentid": 1
},
{
"text": "崔秀英",
"id": 558,
"parentid": 1
},
{
"text": "胡静",
"id": 561,
"parentid": 1
},
{
"text": "王军",
"id": 564,
"parentid": 1
},
{
"text": "廖丽",
"id": 567,
"parentid": 1
},
{
"text": "林艳",
"id": 570,
"parentid": 1
},
{
"text": "史强",
"id": 573,
"parentid": 1
},
{
"text": "汪秀兰",
"id": 576,
"parentid": 1
},
{
"text": "阎霞",
"id": 579,
"parentid": 1
},
{
"text": "江刚",
"id": 582,
"parentid": 1
},
{
"text": "杜军",
"id": 585,
"parentid": 1
},
{
"text": "常霞",
"id": 588,
"parentid": 1
},
{
"text": "康洋",
"id": 591,
"parentid": 1
},
{
"text": "顾静",
"id": 594,
"parentid": 1
},
{
"text": "孔明",
"id": 597,
"parentid": 1
},
{
"text": "卢静",
"id": 600,
"parentid": 1
},
{
"text": "姜洋",
"id": 603,
"parentid": 1
},
{
"text": "谢娟",
"id": 606,
"parentid": 1
},
{
"text": "罗平",
"id": 609,
"parentid": 1
},
{
"text": "乔军",
"id": 612,
"parentid": 1
},
{
"text": "萧娜",
"id": 615,
"parentid": 1
},
{
"text": "许勇",
"id": 618,
"parentid": 1
},
{
"text": "毛敏",
"id": 621,
"parentid": 1
},
{
"text": "黄秀英",
"id": 624,
"parentid": 1
},
{
"text": "姚芳",
"id": 627,
"parentid": 1
},
{
"text": "程静",
"id": 630,
"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