BootStrapTable获取选中数据值并传参至父页面

前言:近期在做订单管理系统时,需要用到从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 
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值