bootstrap-table 父子表入门篇
官方文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#多语言
一、引入js、css
<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
二、html,一个带id的table
<table class="table" id="report"></table>
三、
<script type="text/javascript">
/*用window.onload调用myfun()*/
window.onload = myfun; function myfun() { $("#report").bootstrapTable({
url: '/dashboard', //父表加载数据用到的url
method: 'get',
detailView: true,//父子表,为true会在父数据前添加 “+”
//sidePagination: "server",
pagination: false, //是否翻页
pageSize: 5,
pageList: [10, 25],
columns: [
{ field: 'project_name',
title: '项目名称' },
{ field: 'domnum',
title: '接入域' }],
//注册加载子表的事件。注意下这里的三个参数! row会传递数据到子表
onExpandRow: function (index, row, $detail) {
InitSubTable(index, row, $detail);
}
});
//初始化子表格(无线循环)
InitSubTable = function (index, row, $detail) {
var parentid = row.business_id;
var cur_table = $detail.html('<table></table>').find('table');
$(cur_table).bootstrapTable({
url: '/sec/dashboard/prodatabybusid',
method: 'get',
queryParams: {busid: parentid},
{#ajaxOptions: {strParentID: parentid},#}
clickToSelect: true,
{#detailView: true,//父子表#}
uniqueId: "MENU_ID",
pageSize: 10,
pageList: [10, 25],
columns: [{
field: 'project_name',
title: '项目名称' }, {
field: 'domnum',
title: '接入域'
}],
//无线循环取子表,直到子表里面没有记录
onExpandRow: function (index, row, $Subdetail) {
InitSubTable(index, row, $Subdetail);
}
});
};
}; </script>
bootstrap-table 父子表入门篇的更多相关文章
- bootstrap table 父子表实现【无限级】菜单管理功能
bootstrap table 父子表实现[无限级]菜单管理功能 实现效果 前端代码 <%@ page language="java" import="java.u ...
- bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
- bootstrap table 主子表 局部数据刷新(刷新子表)
1.主表中设置data-detail-view="true",启用主子表模式: <table class="table table-striped" wi ...
- 后台系统组件:一丶bootstrap table
http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- SpringMVC.入门篇《二》form表单
SpringMVC.入门篇<二>form表单 项目工程结构: 在<springmvc入门篇一.HelloWorld>基础上继续添加代码,新增:FormController.ja ...
- Farseer.net轻量级ORM开源框架 V1.x 入门篇:表的数据操作
导航 目 录:Farseer.net轻量级ORM开源框架 目录 上一篇:Farseer.net轻量级ORM开源框架 V1.x 入门篇:表实体类映射 下一篇:Farseer.net轻量级ORM开源框 ...
- Farseer.net轻量级ORM开源框架 V1.x 入门篇:表实体类映射
导航 目 录:Farseer.net轻量级ORM开源框架 目录 上一篇:Farseer.net轻量级ORM开源框架 V1.x 入门篇:数据库上下文 下一篇:Farseer.net轻量级ORM开源框 ...
随机推荐
- INSPIRED启示录 读书笔记 - 第7章 管理产品经理
产品总监的关键职责 1.组建优秀的产品经理团队 如果产品经理不称职,只能退而求其次,请其他团队成员(比如主程序员)越俎代庖 新产品经理必须经过约三个月刻苦学习才能开始管理产品,管理者应该为新人创造学习 ...
- Eclipse4.2安装样式插件
1.插件地址 http://eclipse-color-theme.github.com/update 点击Eclipse菜单 Help>>Install New Software... ...
- spark学习3(sqoop1.4.6安装)
sqoop目前有两个版本sqoop1和sqoop2,这里安装的是sqoop1版本 1)将软件上传到spark1节点 2)修改权限 [root@spark1 sqoop]# chmod u+x sqoo ...
- spark学习2-1(hive1.2安装)
由于前面安装版本过老,导致学习过程中出现了很多问题,今天安装了一个新一点的版本.安装结束启动时遇到一点问题,记录在这里. 第一步:hive-1.2安装 通过WinSCP将apache-hive-1.2 ...
- Flume-NG启动过程源码分析(三)(原创)
上一篇文章分析了Flume如何加载配置文件的,动态加载也只是重复运行getConfiguration(). 本篇分析加载配置文件后各个组件是如何运行的? 加载完配置文件订阅者Application类会 ...
- Guest CPU model configuration in libvirt with QEMU/KVM
每个hypervisor对于guest能看到的cpu model定义都不同,Xen 提供host pass through,所以guest能看到的cpu和host完全相同. QEMU/KVM中gues ...
- Python快速学习-函数
函数定义总结: 1.定义函数时,需要确定函数名和参数个数:2.如果有必要,先对参数的数据类型进行检查:3.函数体内部可以用return随时返回函数结果:4.函数执行完毕没有return语句时,自动re ...
- 1、html(),text(),value()的区别;2、remove() 3、加载完执行函数
1 .html()用为读取和修改元素的HTML标签.2 .text()用来读取或修改元素的纯文本内容.3 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html() ...
- review21
Class是java.lang包中的类,该类的实例可以帮助程序创建其他类的实例或者取得其他类的对象的内部信息. 参考代码如下所示: package pack07; import java.util.D ...
- DP的四边形优化
DP的四边形优化 一.进行四边形优化需要满足的条件 1.状态转移方程如下: m(i,j)表示对应i,j情况下的最优值. w(i,j)表示从i到j的代价. 例如在合并石子中: m(i,j)表示从第i堆石 ...