layui 弹出层中显示table 表格

html:

点击按钮显示弹窗:

 

弹窗模板:

js:

var table2;

function openProductCount(companyId) {
	fkCompanyId = companyId;
	layui.use(['table', 'form'], function() {
		table2 = layui.table;
		var form = layui.form;
		layer.open({
			type: 1,
			title: '开通产品数量',
			area: ['700px', '600px'], //宽高
			content: $('#openProductBox'),
			end: function() {
				vm.query.productName = '';
			},
			success: function() {
				table2.render({
					elem: '#openProductTable',
					id: 'openProductTable',
					height: 480,
					method: 'get', //接口http请求类型,默认:get
					url: baseURL + 'unCompanyAccountInfo/queryCompanyProductMergerList', //?page=1&limit=10(该参数可通过 request 自定义)
					where: {
						fkCompanyId: companyId,
					}, //接口的其它参数
					request: {
						pageName: 'page', //页码的参数名称,默认:page
						limitName: 'rows', //每页数据量的参数名,默认:limit
					},
					response: {
						statusName: 'code', //规定数据状态的字段名称,默认:code
						statusCode: 200, //规定成功的状态码,默认:0
						msgName: 'msg', //规定状态信息的字段名称,默认:msg
						countName: 'count', //规定数据总数的字段名称,默认:count
						dataName: 'resultList', //规定数据列表的字段名称,默认:data
					},
					page: true, //是否分页
					limit: 10, //每页显示的条数
					limits: [10, 20, 30], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
					cols: [
						[{
							field: 'productName', //字段名
							title: '产品名称', //标题
							//width: 200,
							sort: true //是否允许排序 默认:false
							//fixed: 'left' //固定列
						}, {
							field: 'totalNumber', //字段名
							title: '总次数', //标题
							width: 100,
							sort: true //是否允许排序 默认:false
							//fixed: 'left' //固定列
						}, {
							field: 'lastNumber', //字段名
							title: '剩余次数', //标题
							width: 100,
							templet: '#lastNumber',
							sort: true //是否允许排序 默认:false
							//fixed: 'left' //固定列
						}, {
							field: 'channelName', //字段名
							title: '当前渠道', //标题
							width: 165,
							sort: true //是否允许排序 默认:false
							//fixed: 'left' //固定列
						}, {
							field: 'fkCompanyId', //字段名
							title: '状态', //标题
							width: 100,
							templet: function(d) {
								if (d.fkCompanyId == null) {
									return '未激活'
								} else {
									return '已激活'
								}
							},
							sort: true //是否允许排序 默认:false
							//fixed: 'left' //固定列
						}]
					]
				});
			}
		});
	});
}

 

你可能感兴趣的:(layui)