Bootstrap Table 父子表应用 (detaileView 二级表格)
必要属性 :
detailView: true,
detailFormatter: function (index, row) {var html = [];$.each(row, function (key, value) {html.push('' + key + ': ' + value + '
');})
},
icons: {detailOpen: 'glyphicon-plus icon-plus',detailClose: 'glyphicon-minus icon-minus',refresh: 'glyphicon-refresh icon-refresh',toggle: 'glyphicon-list-alt icon-list-alt',columns: 'glyphicon-th icon-th'
},
当展开时触发的方法;
onExpandRow: function (index, row, $detail) {console.log(index, row, $detail);oTableInit.InitSubTable(index, row, $detail);
}
定义二级表格方法 (子表格);
oTableInit.InitSubTable = function (index, row, $detail) {var cur_table = $detail.html('
').find('table');$(cur_table).bootstrapTable({url: '../server/bootstrapTableDataChild.json',queryParams: function () {console.log(row.id);return {uuid: row.id}},// 这里查看返回的数据// responseHandler: function (data) {// console.log(data);// },columns: [{field: 'changeField',title: '变化字段',valign: "middle",align: "center",visible: true}, {field: 'beforeChangeVal',title: '变化前的值',valign: "middle",align: "center",visible: true}, {field: 'afterChangeVal',title: '变化后的值',valign: "middle",align: "center",visible: true}],});return oTableInit;};
话不多说上全面的代码:
Document
查看历史版本
最后展示效果图
看~~~ 是否很简单?
坑点描述: detailView 属性添加后, 还需指定
icons: {detailOpen: 'glyphicon-plus icon-plus',detailClose: 'glyphicon-minus icon-minus',refresh: 'glyphicon-refresh icon-refresh',toggle: 'glyphicon-list-alt icon-list-alt',columns: 'glyphicon-th icon-th'
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！