BootStrap TreeView使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="/Scripts/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/Scripts/bootstrap/css/bootstrap-treeview.css" rel="stylesheet"> <script src="/Scripts/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap/js/bootstrap-treeview.js" type="text/javascript"></script> </head>
<body>
<div id="tree"></div> <input type="button" id="btn" value="查询" /> <script type="text/javascript">
$(function () {
function getTree() {
// Some logic to retrieve, or generate tree structure var data = [{
text: "p1",
nodes: [{ text: "p1-1", id: '00001', nodeId: '00001' }, { text: "p1-2", id: '00002' }, { text: "p1-3", id: '00003' }, { text: "p1-4", id: '00004', nodes: [{ text: 'p1-1-1', id: '00005'}]}] }]
return data;
}
var obj = {};
obj.text = "123";
$('#tree').treeview({
data: getTree(), // data is not optional
levels: 5,
multiSelect: true }); $("#btn").click(function (e) { var arr = $('#tree').treeview('getSelected'); alert(JSON.stringify(arr));
for (var key in arr) {
alert(arr[key].id);
} }) }) </script>
</body>
</html>
弹窗口+树形菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="/Scripts/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/Scripts/bootstrap/css/bootstrap-treeview.css" rel="stylesheet"> <script src="/Scripts/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap/js/bootstrap-treeview.js" type="text/javascript"></script>
</head>
<body> <p id="c"></p> <!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal">
开始演示模态框
</button> <!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框(Modal)标题
</h4>
</div>
<div class="modal-body">
<div id="tree"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" id="btn">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div> <script type="text/javascript">
$(function () {
function getTree() {
// Some logic to retrieve, or generate tree structure var data = [{
text: "p1",
nodes: [{ text: "p1-1", id: '00001', nodeId: '00001' }, { text: "p1-2", id: '00002' }, { text: "p1-3", id: '00003' }, { text: "p1-4", id: '00004', nodes: [{ text: 'p1-1-1', id: '00005'}]}] }]
return data;
}
var obj = {};
obj.text = "123";
$('#tree').treeview({
data: getTree(), // data is not optional
levels: 5,
multiSelect: true }); $("#btn").click(function (e) { var arr = $('#tree').treeview('getSelected'); for (var key in arr) {
c.innerHTML = c.innerHTML + "," + arr[key].id;
} }) }) </script>
</body>
</html>
BootStrap TreeView使用示例的更多相关文章
- Bootstrap treeview增加或者删除节点
参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.ne ...
- 初始化bootstrap treeview树节点
最近在做启明星图库时,使用了Jquery Bootstrap Treeview插件.但是,遇到了一个初始化的问题.先看效果如下: 当用户打开图库时,左边分类第一个类别是“所有分类”,默认需要选中. ...
- bootstrap treeview 树形数据生成
这个问题还是挺经典的,后台只是负责查出所有的数据,前台js来处理数据展示给treeview;show you the code below:<script> $(function () { ...
- bootstrap treeview实现菜单树
本博客,介绍通过Bootstrap的treeview插件实现菜单树的功能. treeview链接:http://www.htmleaf.com/Demo/201502141380.html ORM框架 ...
- 在vue-cli项目中使用bootstrap的方法示例
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-cli生成的前端项目中如何加入?因为框架不一样了,略微要适应一 ...
- Bootstrap 实现CRUD示例及代码
https://github.com/wenzhixin/bootstrap-table-examples/blob/master/crud/index.html <!DOCTYPE html& ...
- Bootstrap Table 使用示例及代码
http://issues.wenzhixin.net.cn/bootstrap-table/ <!DOCTYPE html> <html> <head> < ...
- Bootstrap导航栏示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap 表单示例
1.打开https://getbootstrap.com/docs/4.3/examples/checkout/复制表单源码 2.清空main标签内容 3.粘贴表单源码 4.示例图
随机推荐
- Video Pooling
Video pooling computes video representation over the whole video by pooling all the descriptors from ...
- Windows编译安装mod_wsgi,配合使用Django+Apahce
编译环境: 均是32位版本 Microsoft Visual Studio 10.0 Microsoft SDKs v7.1 Apache2.4 Python3.4 mod_wsgi-4.5.0 要求 ...
- PAT (Advanced Level) 1099. Build A Binary Search Tree (30)
预处理每个节点左子树有多少个点. 然后确定值得时候递归下去就可以了. #include<cstdio> #include<cstring> #include<cmath& ...
- 使用float和display:block将内联元素转换成块元素的不同点
使用float和display:block将内联元素转换成块元素的不同点 使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联 ...
- IMosaicWorkspaceExtensionHelper
Provides a helper for working with a mosaic dataset workspace extension. Product Availability Availa ...
- tcp 重组原理
原文: http://blog.chinaunix.net/uid-21768364-id-4823449.html 1 .引言TCP/IP 协议现在已经广泛的被应用.数据在网络上应用 TCP/IP ...
- OpenGL学习-------绘制简单的几何图形
本次课程所要讲的是绘制简单的几何图形,在实际绘制之前,让我们先熟悉一些概念. 一.点.直线和多边形我们知道数学(具体的说,是几何学)中有点.直线和多边形的概念,但这些概念在计算机中会有所不同.数学上的 ...
- Python3基础 函数名.__doc__显示一个函数的单行与多行函数文档
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- FatMouse and Cheese 动态化搜索
FatMouse and Cheese Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- 定制化jQuery
毋庸置疑,jQuery很强大,很方便,但是......越来越臃肿,怎么办?,jquery只基于模块化开发的,可以通过工具定制jquery,选择你需要的模块即可. 下面这个网站可以帮你完成定制 http ...