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

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

$('#tb_agentService').bootstrapTable({

data: [

{"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'},

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;

};

});

bootstrapr表格父子框_使用Bootstrap Table建立父子表相关推荐

bootstrap table 实现父子表
在进行项目时,用到了bootstrap table的父子表,现在记录下使用过程中遇到的坑. <!DOCTYPE html> <html> <head> <me ...
bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...
bootstrap表格插件php,深入了解Bootstrap table表格插件（一）
这篇文章主要为大家介绍了第一次学习Bootstrap table表格插件的笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下第一次使用Bootstrap-table这个表格插件,记录一下使用过程 ...
表格合并行_合并行table表格
组件<template><div class="fy-table-diy-wrap"><table cla ...
excel表格内容拆分_一键批量拆分Excel工作表【模板下载】
今年5月份我们在Excel表哥微信公众号平台首发了一系列工作表.工作簿合并的文章. 从合并相同内容的单元格到合并多个工作表直至批量合并多个Excel工作簿,所有的操作只需要一键! 专辑如下,也可以在表 ...
bootstrapr表格父子框_JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】...
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
bootstrapr表格父子框_JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）...
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
【JS组件系列】——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
二、bootstrap table 父子表和行列调序
http://blog.csdn.net/yin767833376/article/details/52153443 前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍 ...

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

bootstrapr表格父子框_使用Bootstrap Table建立父子表相关推荐

最新文章

热门文章