Bootstraptable建立父子表需要一个属性detailView: true, //父子表 这样就可以建立好父子表了
2017-12-18 14:49
501 查看
我自己写的页面代码。需要引入js
<table
id="tb_agentService"
class="tabletable-striped table_list"
style="border-top:1px
solid #cecece
;margin:10px
10px
15px
0px;">
</table>
<script src="../../../js/common/jquery.min.js"></script>
<script src="../../../js/common/bootstrap.min.js"></script>
<script src="../../../js/common/bootstrap-table.js"></script> <script src="../../../js/common/bootstrap-table-zh-CN.js"></script>
<table
id="tb_agentService"
class="tabletable-striped table_list"
style="border-top:1px
solid #cecece
;margin:10px
10px
15px
0px;">
</table>
代码$(function() { var oTableInit = new Object(); var oInit = new Object(); $('#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('<table></table>').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); } }); return oTableInit; }; });
相关文章推荐
- bootstrapTable 行可以展开显示更多信息 detailView:true
- 【OC复合题】之定义一个学生类,需要有姓名,年龄,考试成绩三个成员属性,创建5个对象,属性可以任意值。(Objective-C)
- ListView集合中设置标记 setTag();方法带一个参数和两个参数的区别,以及设置标记时ViewHolder中的每一个属性控件都需要设置一次,否则在Item中每一个控件的点击事件中取出设置的标
- Java中堆内存和栈内存_在建立一个对象时从两个地方都分配内存,在堆中分配的内存实际建立这个对象,而在堆栈中分配的内存只是一个指向这个堆对象的指针(引用)。修改栈指针就可以把栈中的内容销毁.这样最快
- 一个功能强大的 TextView,可以满足日常大部分布局方式,开发者可已自行组合属性配置出属于自己风格的样式!
- 一个类似于环形的 ProgressBar 的,可以自定义 Color,style 等属性的 View,支持 Material 风格.
- 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了;面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为(转)
- 有这样一个需求,一个SlidingPaneLayout里面包裹了一个ViewGroup而他可以被多个Fragment添加
- JPA学习笔记---JPA实体Bean的建立---链接上一个博文:对实体Bean中属性进行操作:保存日期类型,设置字段的长度,名字,是否为空,可以声明枚举字段;可以存放二进制数据,可以存放
- Create一个DataTable时需要创建这样一列,它的结果是根据一定的表达式自动生成的,DataColumn的Expression得属性
- 我为什么需要你来参与这样的一个创意计划?”我自己可以完成它…
- android中,如果使用imageButton可以在drawable 中设置一个selector,但是imageView设置不起作用
- qt之窗口换肤(一个qss的坑:当类属性发现变化时需要重置qss,使用rcc资源文件)
- 果园里有一堆苹果,一共n头(n大于1小于9)熊来分,第一头为小东,它把苹果均分n份后,多出了一个,它扔掉了这一个,拿走了自己的一份苹果,接着第二头熊重复这一过程,即先均分n份,扔掉一个然后拿走一份,以此类推直到最后一头熊都是这样(最后一头熊扔掉后可以拿走0个,也算是n份均分)。问最初这堆苹果最少有多少个。
- C# WinForm窗体的TopMost属性设置为true时,多次点击窗体弹出事件,只会弹出一个窗体
- 让一个Html元素撑满整个屏幕可以这样玩
- c语言程序的一个错误,需要注意下的,大家都可以看看哦
- 可以滚动的View设置padding和scrollbar需要注意
- 建立一个方法的attribute,可以放在任意方法上,可以自动记录方法出错时的信息,就不用写try 。。cacth. 【注意】 不是在asp.net MVC下,是在普通三层结构下写的的特性。
- 带键盘的inputAccessoryView属性,可以做退出键盘操作等等