bootstrapr表格父子框_使用Bootstrap Table建立父子表

最新推荐文章于 2023-09-26 17:19:11 发布
最新推荐文章于 2023-09-26 17:19:11 发布
阅读量298 收藏
点赞数
文章标签： bootstrapr表格父子框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42515120/article/details/111980137
版权
这篇博客介绍了如何利用Bootstrap Table库来实现一个具有父子表格功能的表格。展示了如何初始化主表格，并在展开每一行时动态加载对应的子表格数据，详细配置了表格的各项参数，包括排序、分页和列设置。
摘要由CSDN通过智能技术生成

代码$(function() {var oTableInit = newObject();var oInit = newObject();

$('#tb_agentService').bootstrapTable({

data: [

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 35},

],

paginationPreText:'

paginationNextText:'>',

detailView:true, //父子表

striped:true, //是否显示行间隔色

pagination:true, //是否显示分页(*)

sortOrder:"asc", //排序方式

pageNumber:1, //初始化加载第一页，默认第一页

height:400,

pageSize:10, //每页的记录行数(*)

pageList: [10, 20], //可供选择的每页的行数(*)

columns: [{

title:"序号",

formatter:function(value, row, index) {return index + 1;

},

rowspan:1,

align:'center',

width:'50px'},{

field:'no',

title:'位号',

align:'left',

}, {

field:'type',

title:'生产单元',

align:'left',

}, {

field:'name',

title:'报警标识',

align:'center',

}, {

field:'money',

title:'数量',

align:'right',

}

],

onExpandRow:function(index, row, $detail) {

oTableInit.InitSubTable(index, row, $detail);

}

});

oTableInit.InitSubTable= function(index, row, $detail) {var parentid =row.MENU_ID;var cur_table = $detail.html('

').find('table');

$(cur_table).bootstrapTable({

data: [{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05'},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05'},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05'},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05'},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05'},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05'},

{"no": "FF21135", "type": "生产单元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05'},

],

method:'get',

queryParams: { strParentID: parentid },

ajaxOptions: { strParentID: parentid },

clickToSelect:true,

pagination:true, //是否显示分页(*)

sortOrder:"asc", //排序方式

pageNumber:1, //初始化加载第一页，默认第一页

height:260,

pageSize:6, //每页的记录行数(*)

pageList: [6, 12, 24, 48], //可供选择的每页的行数(*)

paginationPreText:'

paginationNextText:'>',

columns: [{

title:"序号",

formatter:function(value, row, index) {return index + 1;

},

rowspan:1,

align:'center',

width:'50px'},{

field:'no',

title:'子位号',

align:'left',

}, {

field:'type',

title:'生产单元',

align:'left',

}, {

field:'name',

title:'报警标识',

align:'center',

}, {

field:'money',

title:'报警数',

align:'right',

},

{

field:'time',

title:'可预测性(%)',

align:'right',

},

{

field:'matter',

title:'重要的(%)',

align:'right',

}

],//无线循环取子表，直到子表里面没有记录

onExpandRow:function(index, row, $Subdetail) {

oInit.InitSubTable(index, row, $Subdetail);

}

});returnoTableInit;

};

});

燭台
关注
Bootstraptable建立父子表
04-13
Bootstraptable建立父子表 detailView: true 的折叠使用
JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
weixin_34323858的博客
11-25 832
前言：上篇 JS组件系列——表格组件神器：bootstrap table 简单介绍了下Bootstrap Table的基础用法，没想到讨论还挺热烈的。有园友在评论中提到了父子表的用法，今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。 bootstrap table系列： JS组件系列——表格组件神器：bootstrap table JS组件系...
BootstrapTable父子表
最新发布
clearlovel的博客
09-26 1152
3-2、在要增加了一个新表的时候，直接清空表的数据，添加新数据就使用sppend就行了，清空数据使用removeAll方法。对比使用create方法的话，removeAll比create方法性能优化方面强很多，不建议使用create方法创建表。这两行代码不能少，这样就在父表下创建了子表，子表的数据就是row，index，$detail，对应着子表可以去取数据。1-2、在父表的每一行的最前面显示一个加号，点开就是子表信息。2-3、css部分可以自己随意发挥。
bootstrap-table父子表
mwp5212的博客
11-21 5723
function initTable() { $('#prjLogBookProblemParentTable').bootstrapTable('destroy').bootstrapTable({ columns : [ {
bootstrapTable父子表
qq_37514029的博客
05-06 1577
创建父表 $('#atptable').bootstrapTable({ url: '/Pm/statistics_finance/get_confirm_income?station_id=' + station_id, //请求后台的URL（*） method: 'get', //请求...
bootstrapr表格父子框_bootstrap-table 父子表入门篇
06-08
Bootstrap-table 是一款基于Bootstrap的... $('table').bootstrapTable({ data: data }); }); ``` 这样，我们就成功地实现了一个父子表的展示效果。当我们点击父表格的某一行时，就会展示出它所对应的子表格。
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
10-22
$("#tb_powerset").bootstrapTable({ url: '/api/MenuApi/GetParentMenu', method: 'get', detailView: true, // ...其他配置项 onExpandRow: function (index, row, $detail) { oInit.InitSubTable(index, ...
完美解决bootstraptable父子表子表渲染问题
11-29
"完美解决bootstraptable父子表子表渲染问题"的标题表明我们将探讨如何处理子表无法正确渲染或调用初始化方法的常见问题。 首先，让我们理解父子表的基本概念。在BootstrapTable中，父子表通常通过点击父表格的某一...
bootstrapTable使用示例.rar
04-14
本示例压缩包包含了一系列关于BootstrapTable的使用示例，包括父子表、treegrid（树形表格）以及与KnockoutJS的集成，这些都是在实际开发中非常实用的场景。 1. **BootstrapTable基本使用** BootstrapTable的核心...
bootstrapr表格父子框_JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】...
weixin_39617702的博客
12-18 201
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列,固定标题滚动表,响应式设计，Ajax加载JSON数据，点击排序的列，卡片视图等。今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。bootstrap table系列：一、效果展示今天稍微改变下方式，先来看看实现效果，后面再介绍代码实现及...
bootstrap table组件实现父子表【菜单管理】
ccyy
04-09 1660
实现的效果： 前端代码： <!DOCTYPE HTML> <html lang="zh-cn" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi
bootstrap 操作 父子表,bootstrap-table 父子表入门篇
weixin_31569663的博客
03-18 1457
/*用window.onload调用myfun()*/window.onload=myfun;functionmyfun() {$("#report").bootstrapTable({url:'/dashboard',//父表加载数据用到的urlmethod:'get',detailView:true,//父子表，为true会在父数据前添加 “+”//sidePagination: "serve...
bootstrap table父子表
热门推荐
菜鸟笔记
09-06 1万+
前台代码如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> String path = request.getC
bootstrapr表格父子框_Bootstrap 表格父子表
weixin_39948111的博客
12-18 227
【实例简介】【实例截图】【核心代码】$(function () {//1.初始化Tablevar oTable = new TableInit();oTable.Init();//2.初始化Button的点击事件var oButtonInit = new ButtonInit();oButtonInit.Init();});var TableInit = function () {var oTab...
bootstrap-table 实现父子表
weixin_30716725的博客
03-28 904
1、引入相关的css和js <link type="text/css" href="/components/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link type="text/css" href="/components/bootstrap-table/1.11.1/dist/bootst...
Bootstrap Table 父子表应用 (detaileView 二级表格)
weixin_43959963的博客
01-06 2422
必要属性 : detailView: true, detailFormatter: function (index, row) { var html = []; $.each(row, function (key, value) { html.push('<p><b>' + key + ':</b> ' + value + '</p>'); }) }, icons: { detailOpen: 'glyphico
bootstraptable ( bootstrap 中的表格)
zhang_zan
12-04 1408
使用 bootstraptable创建表格 一、初始化 1、HTML编写 引人css和js <link rel="stylesheet" href="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.css' %}"> <script src="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.js' %}"></script> &l
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值