如何动态设置弹出框 table的大小,最好美观

提问 已结 9 371
fly小胖
fly小胖 2019-10-16
悬赏:50飞吻
版本:layuiAdmin 2.5.x 浏览器:谷歌
问题如下图所示,如何动态设置弹出框的大小最好可以使整个表格铺满不出现空白



js1: 点击修改按钮

 //修改
Contract.onEdit = function () {
var checkRows = table.checkStatus(Contract.tableId);
if (checkRows.data.length === 0) {
Feng.error("请选择要编辑的信息!");
}else if(checkRows.data.length > 1){
Feng.error("每次只能编辑一条信息,请重新选择!");
}else {
admin.putTempData('formOk', false);
//url传递参数出现中文乱码,先采用这种方式
admin.putTempData('contractName', checkRows.data[0].contractName);
top.layui.admin.open({
type: 2,
title: '合同所需物料详情',
area: ['1300px', '1000px'],
content: Feng.ctxPath + '/contract/contract_detail',
end: function () {
admin.getTempData('formOk') && Contract.initTable(Contract.tableId,null,Contract.url);
}
});
}
};

//点击修改按钮
$('#update').click(function () {
Contract.onEdit();
});
弹出框的页面

@layout("/common/_container.html",{plugins:["ztree"],js:["/assets/modular/scheduling/contract/contract_detail.js"]}){

<div class="layui-body-header">
<span class="layui-body-header-title">合同名称: </span>
</div>

<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-sm12 layui-col-md9 layui-col-lg10">
<div class="layui-card">
<div class="layui-card-body">
<table class="layui-table" id="contractDetailTable" lay-filter="contractDetailTable"></table>
</div>
</div>
</div>
</div>
</div>

<script type="text/html" id="tableBar">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">排产</a>
</script>
弹出框的js文件

layui.use(['table', 'admin', 'ax', 'soulTable', 'ztree','layer', 'form',  'laydate',  'table', 'treetable','upload'], function () {
var $ = layui.$;
var table = layui.table;
var $ax = layui.ax;
var admin = layui.admin;
var $ZTree = layui.ztree;
var layer = layui.layer;
var form = layui.form;
var laydate = layui.laydate;
var treetable = layui.treetable;
var upload = layui.upload;
var soulTable = layui.soulTable;


var ContractDetail = {
tableId: "contractDetailTable",
url:Feng.ctxPath + "/contract/detail/"
};

/**
* 初始化表格的列
*/
ContractDetail.initColumn = function () {
return [[
//{type: 'checkbox'},
{type: 'numbers'},
{field: 'id', hide: true, sort: false, title: 'id'},
{field: 'materialCode', sort: false, title: '物料代码'},
{field: 'materialName', sort: false, title: '物料名称'},
{field: 'model', sort: false,title: '规格型号'},
{field: 'need', sort: false, title: '合同需求'},
{field: 'allotTotalNum', sort: false, title: '已分配'},
{field: 'status', sort: false,templet: statusName,title: '状态'},
{align: 'center', toolbar: '#tableBar', title: '操作', minWidth: 280}
]];
};

/**
* 初始化表格内容
*/
ContractDetail.initTable = function (tableId,queryData,url){
return table.render({
elem: '#' + tableId,
url: url,
where: queryData,
cols: ContractDetail.initColumn(),
page: true,
height: "full-158",
totalRow: true,
loading:true,
title:"合同管理清单",
//skin: 'row', //边框风格
even: false ,//开启隔行背景
size: 'lg', //表格尺寸
done: function (res, curr, count) {
//exportData=res.data; //重写接口选择全部数据即可
soulTable.render(this); //双击右边列边线即可自适应
console.log(res);
//$(this.elem).next().children('.layui-table-total').find('[data-field="contractName"] .layui-table-cell').html("共 " + count + " 个");
//点击行操作checkbox
// $("#" + ContractDetail.tableId).next().on("click", "tr", function (e) {
// var evtTarget = e.target || e.srcElement;
// if (!$(evtTarget).is('i')) {
// $(this).find(".layui-form-checkbox i").trigger("click");
// }
// });
}
});
}

// 渲染表格
var contractName = admin.getTempData('contractName');
$('.layui-body-header-title').append("<strong>" + contractName + " </strong>");
var tableInit = ContractDetail.initTable(ContractDetail.tableId,null,ContractDetail.url + contractName);

//设置字段颜色
function statusName(data) {
var statusNum = data.status;
if (statusNum == 0) {
return '<a style="color:#009688">待排产</a>';
}else if(statusNum == 1){
return '<a style="color:#5FB878">排产中</a>';
}else if(statusNum == 2){
return '<a style="color:#1E9FFF">已排产</a>';
}else {
return '<a style="color:#FF5722">未知</a>';
}
}

//点击排产
ContractDetail.Scheduling = function (materialCode,materialName,need) {
admin.putTempData('materialName',materialName);
top.layui.admin.open({
type: 2,
title: '物料分配详情',
area: ['500px', '600px'],
content: Feng.ctxPath + '/contract/contract_allot?materialCode=' + materialCode+'&need=' + need,
success: function(layero, index){ // 层弹出后的成功回调方法
console.log(layero, index);
},
yes: function(index, layero){ //确定按钮回调方法
//do something
//layer.close(index); //如果设定了yes回调,需进行手工关闭
},
cancel: function(index, layero){ //右上角关闭按钮触发的回调
// if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
// layer.close(index)
// }
// return false;
},
end: function () { //层销毁后触发的回调
//admin.getTempData('formOk') && Contract.initTable(Contract.tableId,null,Contract.url);
}
});
};




// 工具条点击事件
table.on('tool(' + ContractDetail.tableId + ')', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'edit') {
var materialCode = data.materialCode;
var materialName = data.materialName;
var need = data.need;
ContractDetail.Scheduling(materialCode,materialName,need);
}
});



});
@贤心 @岁月小偷


回帖
  • c299
    2019-10-16
    table本来就是自动铺满的,是你自己设置了选项卡的宽度。看你第一张效果图留空的哪里。背景颜色跟你表格背景颜色都不一样。看你第二段代码 layui-col-sm12 layui-col-md9 layui-col-lg10 这个改成 layui-col-sm12 layui-col-md12 layui-col-lg12 这个就可以了。还有你的代码不要翻译成中文。格式也很奇怪。不知道你怎么弄的
    1 回复
  • IDyun
    2019-10-16
    如果是指弹出框的大小设置的话,我试过不写 area: ['1300px', '900px'], 这个值,结果只会显示的很小。
    可以设置 表格父容器的 最小宽度
    min-width:
    1 回复
  • 梓潼
    2019-10-16
    table组件中,cols 参数里面每一项至少设置一个minWidth:number(最小宽度)
    0 回复
  • 梓潼
    2019-10-16
    请忽略上贴中的“每一项”[生病]
    0 回复
  • whvcse
    2019-10-16
    把你的这段代码删掉就可以了:



    0 回复
  • fly小胖
    2019-10-16
    你好,通过我的测试,我想回答下几个问题:
    1、table本来就是自动铺满的,是你自己设置了选项卡的宽度。

    如果是指弹出框的大小设置的话,我试过不写 area: ['1300px', '900px'], 这个值,结果只会显示的很小。

    2、layui-col-sm12 layui-col-md9 layui-col-lg10 这个改成 layui-col-sm12 layui-col-md12 layui-col-lg12 这个就可以了

    按照这么做的确可以

    3、还有你的代码不要翻译成中文。格式也很奇怪
    前半句我不大理解你的意思,可以明示嘛?至于后半句,我是复制前面那个表格的样式,然后删除搜索框这些class得来的
    0 回复
  • fly小胖
    2019-10-16
    @梓潼 我问的不是这个哈[太开心]
    0 回复
  • c299
    2019-10-16
    @fly小胖 选项卡说的是layui-card,也就是让你改的那里。你把layui-card的父元素设置成10/12所以就会留空。layui-col-lg10。把他改成12就可以了。至于中文。中文那个是我浏览器的原因[嘻嘻] 没注意到
    0 回复
  • fly小胖
    2019-10-16
    @IDyun 哦哦
    0 回复