JSP中 layui 弹出层中显示table 表格
1、先引入对应的layui.js 、 layui.css
2、body中 定义 以下DIV 注意 要隐藏,不然查询后 会将表格再次显示上层界面中
3、注意:先加载table,再去弹出界面,否则 第一次查询 会不显示数据
var table2;
function queryInfo(id){
layui.use(['table'], function() {
table2 = layui.table;
var high = 150; //表头高度
table2.render({
elem: '#displayBoxTable',
id: 'displayPoolBoxTable',//生成layui table 的标识id,必须提供,用于后文刷新操作,
method: 'post', //接口http请求类型,默认:get
url:'${ctx}/queryInfo', //?page=1&limit=10(该参数可通过 request 自定义)
where:{id:id},
page: true, //是否分页
limit: 10, //每页显示的条数
limits: [10, 20, 30], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
smartReloadModel:true,
cols: [
[{
title: 'id',
field: 'id',
align : 'center',
valign : 'middle',
width:100
},{
title: '名称',
field: 'name',
align : 'center',
valign : 'middle',
width:100
},{
title: '单价',
field: 'price',
align : 'center',
valign : 'middle',
width:100,
templet:function(row){
return ''+(row.price * 1024.0 / row.flow).toFixed(2)+'元每G';
}
}]
],
done: function(count){
$("table").css("width", "100%");//宽度
high = high + count * 40;//一条数据的高度是40
layer.open({
type: 1,
title: '详情:',
area: ['600px', high+'px'], //宽高
content: $('#displayBox')
});
}
});
});
};