前言:近期在做订单管理系统时,需要用到从BootStrapTable子页面获取选中数据值并传参至父页面。今天写一个,作为笔记。有需要的朋友参考下。
如何实现以下效果呢?
首先,我们先要了解一下BootStrapTable如何获取选中数据的具体值。
如下图所示,怎样选择任意一行,获取其中的数据。
首先想要选择任意一行,就得必须先有选择框,选择框是BootStrapTable自带的:
<script type="text/javascript">
$(function(){//jquery的加载事件
$('#exampleTable').bootstrapTable({
url: '${pageContext.request.contextPath}/skd/selectAllSupplier.action',
method : 'get',
pagination: true,//允许分页
search: true,//可以搜索
toolbar: '#toolbar', //工具按钮用哪个容器
pageSize:10,//每页显示5条数据
pageList:[10,12],//每页显示的条数列表
showColumns:true,//选择显示的列
showRefresh:true,//允许刷新
showExport:true,//允许导出
singleSelect: true,//单选
exportDataType:'all',
exportTypes:['txt','doc','excel'],
queryParams : function(params) {
return {
limit : params.limit,
offset : params.offset
};
},
columns: [
{
checkbox: true,
width : '3%'
},
{
field: 'id',//字段名称 对应json中的key
align: 'center',
valign:'middle',
visible: false,
title: 'id',
width : '10%'
},
{
field: 'supplier',
align: 'center',
valign:'middle',
title: '供应商'
},
{
field: 'supplierShort',
align: 'center',
valign:'middle',
title: '简称'
},
{
field: 'tel',
align: 'center',
valign:'middle',
title: '电话'
},
{
field: 'fax',
align: 'center',
valign:'middle',
title: '传真'
},
{
field: 'paymentTerm',
align: 'center',
valign:'middle',
title: '付款方式'
},
{
field: 'deliveryTerm',
align: 'center',
valign:'middle',
title: '交货期限'
},
],
//bootstrapTable事件:onCheck(单选)、onUncheck(取消单选)、onCheckAll(全选)、onUncheckAll(全选反选)
onCheck: function(row) {//单选事件
//调用获取的方法
getSelections();
},
});
});
/* 获取选择的数据 */
function getSelections() {
//使用getSelections即可获得,row是json格式的数据
var row = $.map($('#exampleTable').bootstrapTable('getSelections'),function (row) {
return row;
});
//将选中的值传入父页面的input中
parent.$("#addSupplier").val(row[0].supplier);
}
</script