bootstratreeview树形下拉框
2024-05-30 06:04:04
话不多说直接上代码
效果图
HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap/css/bootstrap.css"><script type="text/javascript" src="bootstrap/js/jquery.min.js"></script><script type="text/javascript" src="bootstrap/js/bootstrap-treeview.min.js"></script>
</head>
<style type="text/css">.treeStyle {opacity: 80%;height: 300px;overflow:auto;position: absolute;top: 37px;left: 0;z-index: 4;width: 95%;margin: 0 15px 0 15px;/* margin-left: 15px;margin-right: 17px;*/}.treeStyle::-webkit-scrollbar {/*滚动条整体样式*/width: 2px; /*高宽分别对应横竖滚动条的尺寸*/}.treeStyle::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgb(64, 64, 64);background: #cbcbcb;}.treeStyle::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background: #EDEDED;}
</style>
<body>
<div class="container " style="margin-top: 50px"><div class="row"><div class="col-sm-4"><div class="input-group"><input type="text" class="form-control" id="ipt" readonly aria-describedby="size1"><span class="input-group-addon" id="size1"><i class="glyphicon glyphicon-chevron-up"></i></span></div><div hidden class="treeStyle" id="tree"></div></div></div>
</div><script type="text/javascript" src="bootstrap/js/selectTree.js"></script>
<script>$(".input-group").click(function(event){$("#tree").show();//切换图标$("i").toggleClass("glyphicon glyphicon-chevron-down").toggleClass("glyphicon glyphicon-chevron-up");//阻止事件传播 防止传到document的点击事件中event.stopPropagation();})$(function () {$(document).click(function () {$("#tree").hide();});})
</script>
</body>
</html>
treeview JS
$(function () {let $optionTree = $("#tree");$optionTree.treeview({levels: 3,//默认显示情况下 树显示到2级深度 默认是2data: getTree(),showCheckbox: 1,//复选框设置，也可以是trueshowIcon: false,onhoverColor: 'rgba(67,143,207,0.3)',selectedColor: '#000000',selectedBackColor: '#EEEEEE',collapseIcon:"",showTags: 0,//节点的右边显示附加信息 一般要在数据 加tags：[] 属性//enableLinks:1,//能给节点附加URL 要与数据里的 href 连用showBorder: false,onNodeSelected: function (evetn, node) {$("#ipt").val(node.text);//$("#tree").hide();$("i").toggleClass("glyphicon glyphicon-chevron-down").toggleClass("glyphicon glyphicon-chevron-up");}});function getTree() {//节点上的数据遵循如下的格式：return [{text: '角色 1',href: '#parent1',tags: ['4'],state: {selected: false,expanded: true,},nodes: [{text: 'Child 1',href: '#child1',tags: ['2'],nodes: [{text: "ZChild1",tags: [10],}, {text: "ZChild2",tags: [11]}]},{text: 'Child 2',href: '#child2',tags: ['3']},{text: 'Grandchild 1',href: '#grandchild1',tags: ['4']},{text: 'Grandchild 2',href: '#grandchild2',tags: ['5']},{text: 'Grandchild 2',href: '#grandchild2',tags: ['5']},{text: 'Grandchild 2',href: '#grandchild2',tags: ['5']},{text: 'Grandchild 2',href: '#grandchild2',tags: ['5']}]},/*{text: 'Parent 2',href: '#parent2',tags: ['0']},{text: 'Parent 3',href: '#parent3',tags: ['0']},{text: 'Parent 4',href: '#parent4',tags: ['0']},{text: 'Parent 5',href: '#parent5',tags: ['0']}*/];}}
)
bootstratreeview树形下拉框相关推荐
- ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
- iview 下拉select样式_Vue.js相关：iview实现select tree树形下拉框的示例代码
Vue.js相关:iview实现select tree树形下拉框的示例代码 发布于 2020-3-16| 复制链接 摘记: 本文介绍了iview实现select tree树形下拉框的示例代码,分享给大 ...
- treeselect只选了分支节点全选_vue Treeselect 树形下拉框:获取选中节点的ids和lables操作...
API: https://vue-treeselect.js.org/#events 1.ids: 即value 1.lable: 需要用到方法:@select(node,instanceId) 和 ...
- JavaScript树形下拉框
js库地址:https://github.com/hzwy23/Hselect 这个JS文件是对select标签的一个扩展,使得select能够支持树形下拉框 1.依赖关系: 使用这段js代码之前,请 ...
- easyui复杂表单_jQuery EasyUI 表单 – 创建树形下拉框（ComboTree） | 菜鸟教程
jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
- element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...
- element做树形下拉_一个基于 elementUi 的树形下拉框组件vue
wl-vue-select,wl-tree-select 简介 用于vue框架的树形下拉框及带全选的普通下拉框. Tree drop-down box for vue framework and or ...
- 树形下拉框字体变粗问题
树形下拉框点击选中后,选中的字体颜色变粗,再次打开下拉框,未选中的字体也会变粗,解决方法: <style lang='less'> // el-tree 字体不加粗 .el-tree .e ...
- EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
在开发过程中遇到的小案例 效果展示 未处理之前的效果: 处理之后的效果: 需求详情 combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值,但是子节点的状态是选中的. 当所有子节 ...
最新文章
- Deactivate .NET refector
- 一个面试官对JVM面试问题的分析
- Vijos 1197 - 费解的开关
- 【SCOI2005】【BZOJ1087】互不侵犯King（状压dp）
- java编写静态工具类_Java编程中静态内部类与同步类的写法示例
- 你是农村人吗，小时候放过牛吗，都有哪些好玩的趣事？
- sqlrelay mysql_sql relay 使用
- 我的IT之路2012（一）
- 合宙Air105 + GC032A摄像头驱动显示教程说明
- php增加横排文字的间距,html段落内文字设置字间距间隔
- https://jingyan.baidu.com/article/c45ad29cd06453051753e2e9.html
- Redis-5.0.5集群配置
- Sublime插件安装与提高Verilog编写效率插件推荐
- 链路追踪（Tracing）的前世今生（上）
- C++STL详解（一）string类的使用及其模拟实现
- Python自动化办公太难？学这些就够用了
- c语言矩阵作用,C语言矩阵的运算
- 杨辉三角形详解（倒立or正立）
- 黑马程序员——Java String类 and 正则表达式（第七篇）
- Kotlin学习笔记（黑马2018教程）002--面向对象