博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
treeview demo
阅读量:4127 次
发布时间:2019-05-25

本文共 8345 字,大约阅读时间需要 27 分钟。

。。。。。。。。。。。。。。。。。。。。.。。js。。。。。.。.。。。。。。。。.。。。。

$(function(){var e=[{text:"父节点 1",href:"#parent1",tags:["4"],nodes:[{text:"子节点 1",href:"#child1",tags:["2"],nodes:[{text:"孙子节点 1",href:"#grandchild1",tags:["0"]},{text:"孙子节点 2",href:"#grandchild2",tags:["0"]}]},{text:"子节点 2",href:"#child2",tags:["0"]}]},{text:"父节点 2",href:"#parent2",tags:["0"]},{text:"父节点 3",href:"#parent3",tags:["0"]},{text:"父节点 4",href:"#parent4",tags:["0"]},{text:"父节点 5",href:"#parent5",tags:["0"]}],o=[{text:"父节点 1",tags:["2"],nodes:[{text:"子节点 1",tags:["3"],nodes:[{text:"孙子节点 1",tags:["6"]},{text:"孙子节点 2",tags:["3"]}]},{text:"子节点 2",tags:["3"]}]},{text:"父节点 2",tags:["7"]},{text:"父节点 3",icon:"glyphicon glyphicon-earphone",href:"#demo",tags:["11"]},{text:"父节点 4",icon:"glyphicon glyphicon-cloud-download",href:"/demo.html",tags:["19"],selected:!0},{text:"父节点 5",icon:"glyphicon glyphicon-certificate",color:"pink",backColor:"red",href:"http://www.tesco.com",tags:["available","0"]}],t='[{"text": "父节点 1","nodes": [{"text": "子节点 1","nodes": [{"text": "孙子节点 1"},{"text": "孙子节点 2"}]},{"text": "子节点 2"}]},{"text": "父节点 2"},{"text": "父节点 3"},{"text": "父节点 4"},{"text": "父节点 5"}]';$("#treeview1").treeview({data:e}),$("#treeview2").treeview({levels:1,data:e}),$("#treeview3").treeview({levels:99,data:e}),$("#treeview4").treeview({color:"#428bca",data:e}),$("#treeview5").treeview({color:"#428bca",expandIcon:"glyphicon glyphicon-chevron-right",collapseIcon:"glyphicon glyphicon-chevron-down",nodeIcon:"glyphicon glyphicon-bookmark",data:e}),$("#treeview6").treeview({color:"#428bca",expandIcon:"glyphicon glyphicon-stop",collapseIcon:"glyphicon glyphicon-unchecked",nodeIcon:"glyphicon glyphicon-user",showTags:!0,data:e}),$("#treeview7").treeview({color:"#428bca",showBorder:!1,data:e}),$("#treeview8").treeview({expandIcon:"glyphicon glyphicon-stop",collapseIcon:"glyphicon glyphicon-unchecked",nodeIcon:"glyphicon glyphicon-user",color:"yellow",backColor:"purple",onhoverColor:"orange",borderColor:"red",showBorder:!1,showTags:!0,highlightSelected:!0,selectedColor:"yellow",selectedBackColor:"darkorange",data:e}),$("#treeview9").treeview({expandIcon:"glyphicon glyphicon-stop",collapseIcon:"glyphicon glyphicon-unchecked",nodeIcon:"glyphicon glyphicon-user",color:"yellow",backColor:"purple",onhoverColor:"orange",borderColor:"red",showBorder:!1,showTags:!0,highlightSelected:!0,selectedColor:"yellow",selectedBackColor:"darkorange",data:o}),$("#treeview10").treeview({color:"#428bca",enableLinks:!0,data:e}),$("#treeview11").treeview({color:"#428bca",data:e,onNodeSelected:function(e,o){$("#event_output").prepend("

您单击了 "+o.text+"

")}}),$("#treeview12").treeview({data:t})});

、、、、、、、、、、、、、、、、、、、、、、、html、、、、、、、、、、、、、、

**

    
H+ 后台主题UI框架 - 树形视图
Bootstrap Tree View 简介

Bootstrap Tree View 是一个简单而优雅的Bootstrap树形视图解决方案。

您可以访问作者的 GitHub页面 了解其用法及更多信息。

蓝色主题
自定义图标
使用徽章作为标签
节点覆盖
使用链接
事件输出:

**

转载地址:http://ppepi.baihongyu.com/

你可能感兴趣的文章
【JavaScript 教程】浏览器—History 对象
查看>>
还不会正则表达式?看这篇!
查看>>
100道+ JavaScript 面试题,助你查漏补缺
查看>>
JavaScript深入理解之闭包
查看>>
这才是学习Vite2的正确姿势!
查看>>
7 个适用于所有前端开发人员的很棒API,你需要了解一下
查看>>
25个构建Web项目的HTML建议,你需要了解一下!
查看>>
【web素材】02-10款大气的购物商城网站模板
查看>>
6种方式实现JavaScript数组扁平化(flat)方法的总结
查看>>
如何实现a===1 && a===2 && a===3返回true?
查看>>
49个在工作中常用且容易遗忘的CSS样式清单整理
查看>>
20种在学习编程的同时也可以在线赚钱的方法
查看>>
隐藏搜索框:CSS 动画正反向序列
查看>>
12 个JavaScript 特性技巧你可能从未使用过
查看>>
127个超级实用的JavaScript 代码片段,你千万要收藏好(上)
查看>>
【视频教程】Javascript ES6 教程27—ES6 构建一个Promise
查看>>
【5分钟代码练习】01—导航栏鼠标悬停效果的实现
查看>>
127个超级实用的JavaScript 代码片段,你千万要收藏好(中)
查看>>
8种ES6中扩展运算符的用法
查看>>
【视频教程】Javascript ES6 教程28—ES6 Promise 实例应用
查看>>