BootStrap-comboTree 个人原创封装

最新推荐文章于 2019-06-06 15:40:16 发布
最新推荐文章于 2019-06-06 15:40:16 发布
阅读量5.4k 收藏 1
点赞数 8
分类专栏： javaScript 文章标签： bootstrap 下拉树
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010506919/article/details/52304142
版权
本文介绍了一位作者对Bootstrap-treeview的原创封装过程，分享了使用gitHub开源项目jonmiles/bootstrap-treeview创建的下拉树效果，并提出在点击树形菜单时下拉列表消失的问题。作者提供了部分代码示例，并承诺在解决问题后进行测试和完善，最后给出了7月23日更新的完整下拉树组件的免费下载链接。
摘要由CSDN通过智能技术生成

首先看效果

这里写图片描述

界面上马马虎虎算的过去，用的是gitHub上的开源项目jonmiles/bootstrap-treeview作为树形结构,链接地址https://github.com/jonmiles/bootstrap-treeview，还没有实现setValue 与 getValue方法，近期周末抽空完成，美中不足的点击树形菜单下拉列表就会消失，跟BootStrap的Select单选框一个效果，查看了下官方API, 有一个事件”hide.bs.dropdown”如果返回false可以阻止下拉框隐藏，我想是除了点击下拉框，其他情况都隐藏，不知道该如何做，如果有大神能完善，欢迎跟帖。
先上代码
index.html

<body>
    <div id="combotree"></div>
最低0.47元/天 解锁文章
绯月魍魉
关注
专栏目录
bootstrap-combotree异步加载子节点数据
qq_27616545的博客
05-20 1067
bootstrap-combotree异步加载子节点数据 小木子第一次写博客，代码基础也不是那么完美，只是分享一下自己的一些自己的想法，如果有什么不对的，希望您留言，ღ( ´･ᴗ･` )比心 在做项目的过程中，前端的框架是bootstrap，想找一个下拉树，就在https://blog.csdn.net/u010506919/article/details/52304142 绯月魍魉 这个博主...
bootstrap_combotree
08-24
BootStrap-combotree BootStrap 下拉树组件
bootstrap-combotree个人封装
07-22
bootstrap-combotree个人封装
ComboTree控件
01-24
【源码】ComboTree控件：是一个类似于ComboBox控件，但它的下拉列表是一个树控件。用来补充VS里自带的控件。
combotree
china165的专栏
12-15 761
这里的url返回的也是json数组 [javascript] view plaincopyprint? $('#inputcategoryId').combotree('getValues')//获取下拉树可多选的值 $('#inputcategoryId').combotree('getText')//获取下拉树可多选的文本，此处为getText不是getTexts，要注意 //昨两
react-bootstrap-icons：用于Bootstrap图标的React组件
01-31
npm install react-bootstrap-icons --save 要么 yarn add react-bootstrap-icons 用法 import React from ' react ' ; import { ArrowRight } from ' react-bootstrap-icons ' ; export default function App () {...
jquery-easyui的combotree组合树结合bootstrap的tagsinput
潇潇土鳖的博客
06-01 1417
1.情景介绍：最近使用到一个小功能，就是需要一个下拉框，支持多选的树结构，在选中后，会在输入框中生成标签块。描述不多说，上图： 注：原bootstrap中的tagsinput框是支持直接在输入框中删除和添加的（不支持直接点击标签块进行修改的，有其他的版本tagsinput插件支持，这里不多说），我改了源码，支持屏蔽这两个功能，达到只通过下拉框控制删除和添加的目的，当然，只要不设置我自己添加的那两个...
适用于bootstrap风格的easyUI树形下拉框
06-30
下载之前请看好，不是所有都适用，只是树形下拉框的风格比较贴近bootstrap <link rel="stylesheet" type="text/css" href="easyUI/css/easyui.css"> <link rel="stylesheet" type="text/css" href="easyUI/css/icon.css"> <link rel="stylesheet" type="text/css" href="easyUI/css/demo.css"> <input id="test" class="easyui-combotree" ></input>
bootstrap树形下拉框
05-25
<html> <head> <title>Bootstrap Tree View</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-treeview.css" rel="stylesheet"> </head> <body> Bootstrap Tree View - DOM Tree 所属部门 <input type="text" id="depName" name="depName" class="form-control" value="" > <input type="hidden" id="deptId" name="deptId" value="36"> <div id="treeview" [removed][removed] [removed][removed] [removed] function buildDomTree() { var data = []; function walk(nodes, data) { if (!nodes) { return; } $.each(nodes, function (id, node) { var obj = { id: id, text: node.nodeName + " T_T " + (node.innerText ? node.innerText : ''), tags: [node.childElementCount > 0 ? node.childElementCount + ' child elements' : ''] }; if (node.childElementCount > 0) { obj.nodes = []; walk(node.children, obj.nodes); } data.push(obj); }); } walk($('html')[0].children, data); return data; } $(function() { var options = { bootstrap2: false, showTags: true, levels: 5, showCheckbox:true, checkedIcon:"glyphicon glyphicon-check", data: buildDomTree(), onNodeSelected:function(event, data){ $("#depName").val(data.text); $("#treeview").hide(); } }; $('#treeview').treeview(options); }); [removed] </body>
bootstrap树形下拉框 下拉框树形菜单
11-15
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示，带树形的下拉框
树形下拉框控件源码 TreeView In Combox
07-30
下拉框 下拉列表中显示 树 作为选择对象，方便选择一些树形结构的数据
bootstrap树形下拉框 下拉框树形菜单
07-26
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示，带树形的下拉框
comboxTree下拉树，实现单选功能
07-08
本代码实现ext combox tree 单选填充功能
ComboxTree（C#下拉框是树形结构)
12-05
这是一个C#下拉框是树形结构源码，实现简单。
jquery.combotree 多选下拉树
06-02
bootstrap风格的多选下拉树，基于jquery、ztree，混点下载积分
combotree 下拉框只选择最下级子节点
故梦-阿梓
01-30 1101
$('#DepartmentId').combotree({  url:'/AJAX/EasyUiListComm.ashx?funcid=BPMS_Organization&field=OrganizationId,OrganizationId as id,FullName as text,ParentId,SortCode&action=treeQuery&sort=SortCode&ord
ComboTree( 树型下拉框) 组件
12-03 321
本节课重点了解EasyUI中Tree(树)组件的使用方法， 这个组件依赖于Combo(下拉框)和 Tree(树)组件。一． 加载方式//class 加载方式<select id="cc" class="easyui-combotree" style="width:200px;"data-options="url:'tree.json',required:true"></...
easyui combotree组合树的使用
馍馍菜的博客
06-06 1161
jsp <select id="cc" class="easyui-combotree" style="width:200px;" data-options="url:'tree_data1.json',required:true"> </select> js $('#cc').combotree({ url: 'tree_data1.json', requ...
bootstrap select插件 下拉框 、复选框 、使用详解、附.重置 bootstrap-select下拉框复选框中的值/easyui树的复选框中的值。
Rootone的博客
02-02 7323
jsp代码    action="${path}/workorder/workListStatistics/${branchCode}"> 坐席工号：   selected>${agents.agentEmpcode} 座席姓名：
Bootstrap-fileinput组件封装与使用指南
在AdminEAP框架中，BaseFile组件是基于Bootstrap-fileinput进行封装的，目的是为了在Java开发环境中更便捷地使用这个组件。BaseFile组件添加了额外的功能，如： - **弹出窗口上传**：允许在单独的窗口中打开附件...
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值