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开源框 ...
随机推荐
- 摊铺机基本参数介绍(鼎盛天工WTD9501A)
柴油水冷发动机,马力强劲,功率储备系数大,低噪音.低污染,经济性好,低温起动性能好.微电子控制,分别实现刮板输送.螺旋供料左右独立驱动,可实现自动供料,保持熨平板前物料均匀,调平系统响应速度快,调平精 ...
- h => h(App)解析
在创建Vue实例时经常看见render: h => h(App)的语句,现做出如下解析: h即为createElement,将h作为createElement的别名是Vue生态系统的通用管理,也 ...
- google Json
gradle仓库地址: // https://mvnrepository.com/artifact/com.google.code.gson/gsoncompile group: 'com.googl ...
- RHCE学习笔记 管理1 (第三~五章)
第三章 红帽企业linux 获取帮助 (略) man .pinfo. 第四章 编辑文件 1.输出重定向到文件和程序 >file 定向文件(覆盖) >>file 定向文件(附 ...
- Tensorflow 从零开始
1.安装pip pip是一个用于管理和安装Python包的工具,类似于LINUX 的yum命令一样! 命令(Ubuntu系统):sudo apt-get install python-pip 验证安装 ...
- HBase-存储-KeyValue格式
HBase-存储-KeyValue格式 本质上,HFile中的每个KeyValue都是一个低级的字节数组,它允许零复制访问数据. KeyValue格式如下 该结构以两个分别表示键长度(Key Leng ...
- java的一些基本格式
书写方法的格式: 修饰符 返回值 方法名 方法体 public int/void addNumber(参数) { ...
- 新手学逆向,调试abexcm1过程
写在前面的话:在下完全就是一个新手,现在目前在学16位汇编,偶尔用OD调试看看程序,主要就是为了学习,今天写这个帖子,完全就是笔记用,然后拿出来和大家一起讨论交流. 因为刚开始接触,文章可能一些地方有 ...
- makefile下$(wildcard $^),$^,$@,$?,$<,$(@D),$(@F) 含义
makefile下$(wildcard $^),$^,$@,$?,$<,$(@D),$(@F)代表的不同含义 $(filter-out $(PHONY) $(wildcard $^),$^) 常 ...
- Qt QFileSystemModel QDirModel 示例代码, 使用方法
1. QFileSystemModel 查看,添加 和 删除目录 2. 实现代码 dialog.h #ifndef DIALOG_H #define DIALOG_H #include <QD ...