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开源框 ...
随机推荐
- canvas 视频音乐播放器
canvas 视频音乐播放器 var play_nor_img_path = 'images/play_btn_n.png'; //播放按钮 正常时 60x60 px var play_sec_img ...
- MySQL-重做日志 redo log -原理
[redo log buffer][redo log file]-原理 目录: 1.重做日志写入过程图 2.相关知识点汇总图 3.redo_log_buffer 原理 4.redo_log_file ...
- JavaWeb Cookie
1. Cookie 1.1. Cookie概述 Cookie译为小型文本文件或小甜饼,Web应用程序利用Cookie在客户端缓存服务器端文件.Cookie是以键值对形式存储在客户端主机硬盘中,由服务器 ...
- 斯坦福机器学习视频笔记 Week8 无监督学习:聚类与数据降维 Clusting & Dimensionality Reduction
监督学习算法需要标记的样本(x,y),但是无监督学习算法只需要input(x). 您将了解聚类 - 用于市场分割,文本摘要,以及许多其他应用程序. Principal Components Analy ...
- RDLC 微软报表 自定义函数
报表的空白处点右键,报表属性,CODE,按下面的格式输入自定义函数: Shared Function ShowDate(value as DateTime) as string if value< ...
- html文件转换成pdf和word
1.html文件转成pdf 采用jar包有itext-asian.jar.itextpdf-5.5.5.jar.itext-pdfa-5.5.5.jar.itext-xtra-5.5.5.jar,为了 ...
- /var/spool/clientmqueue 爆满问题
当你使用简单的sendmail发邮件的时候,或者系统默认要发一些邮件(比如cron发的邮件)的时候,首先会把邮件拷贝到这个目录里,然后等待MTA(mail transfer agent) 来处理,MT ...
- spark总结3
cd 到hadoop中 然后格式化 进入到 bin下 找到 hdfs 然后看看里面有哈参数: ./hdfs namenode -format 格式化 然后启动 sbin/start-d ...
- 算法总结之 构造数组MaxTree
一个数组的MaxTree定义如下: 数组必须没有重复元素 MaxTree是一颗二叉树,数组的每一个值对应一个二叉树的节点 包括MaxTre树在内且在其中的每一颗子树上,值最大的节点都是树的头 给定一个 ...
- springcloud-搭建服务注册中心
创建服务注册中心 1.创建一个springboot 命名为eureka-server 1)添加Eureka依赖 pom.xml <?xml version="1.0" enc ...