作者也是首次使用layui,因为要让layui table直接可编辑并且需要下拉框,所以参考网上的教程,开始的代码是这样的:
<style>
td .layui-form-select {
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
}
.layui-table-cell {
overflow:visible;
text-overflow:inherit;
}
.layui-table-header .layui-table th {
overflow: hidden;
}
</style>
<table id="TableList" lay-filter="jsTabel" class="layui-hide"></table>
<script>
table.render({
elem: '#TableList'
, height: 'full-153'
, cellMinWidth: '80'
, url: "@Url.Action("getlist")"//数据接口
, page: true
//, even: true //开启隔行背景
, toolbar: true
, defaultToolbar: ['filter', 'print', 'exports']
, cols: [[
{ type: 'checkbox', fixed: 'left' },
{ field: 'DJBH', title: '序号', width: 60, templet: function (obj) { return obj.LAY_INDEX; } },
{
field: 'LB', title: '类别', width: 100, templet: function (d) {
var opt = '<select name="LB" lay-filter="LB" id="LB">';
if (d.LB == "正常订单") {
opt += '<option value="正常订单" selected="selected">正常订单</option>' +
'<option value = "重裁单" > 重裁单</option >' +
'<option value="补裁单">补裁单</option>' +
'<option value="加单">加单</option>';
} else if (d.LB == "重裁单") {
opt += '<option value="正常订单">正常订单</option>' +
'<option value = "重裁单" selected="selected"> 重裁单</option >' +
'<option value="补裁单">补裁单</option>' +
'<option value="加单">加单</option>';
} else if (d.LB == "补裁单") {
opt += '<option value="正常订单">正常订单</option>' +
'<option value = "重裁单"> 重裁单</option >' +
'<option value="补裁单" selected="selected">补裁单</option>' +
'<option value="加单">加单</option>';
} else if (d.LB == "加单") {
opt += '<option value="正常订单">正常订单</option>' +
'<option value = "重裁单"> 重裁单</option >' +
'<option value="补裁单">补裁单</option>' +
'<option value="加单" selected="selected">加单</option>';
}
opt += '</select>';
return opt;
}
},
{ field: 'DDBH', title: '内部订单号', width: 120, event: 'collapse', templet: function (d) { return '<div style="position: relative;\n' + 'padding: 0 10px 0 20px;">' + d.DDBH + '<i style="left: 0px;" lay-tips="展开" class="layui-icon layui-colla-icon layui-icon-right"></i></div>' } },
{ field: 'DJRQ', title: '制单日期', width: 110, sort: true, templet: function (d) { var time = parseInt(d.DJRQ.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } },
{ field: 'KSBH', title: '款号', width: 110 },
{ field: 'SSGJ', title: '国家', edit: true },
{ field: 'HTBH', title: '订单PO号', width: 100, edit: true },
{ field: 'DDPOH', title: '客户PO号', width: 100, edit: true },
{ field: 'YWRQ', title: '接单日期', width: 110, edit: 'text', event: 'datebox', sort: true, templet: function (d) { if (d.YWRQ.toString().substring(0, 2) == "/D") { var time = parseInt(d.YWRQ.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } else { return d.YWRQ.toString() } } },
{ field: 'KHDM', title: '客户代码', width: 100, edit: true },
{ field: 'KHMC', title: '客户名称', width: 135, edit: true },
{ field: 'YWY', title: '业务员', edit: true },
{ field: 'FHRQ', title: '离场日期', width: 110, edit: 'text', event: 'datebox', templet: function (d) { if (d.FHRQ.toString().substring(0, 2) == "/D") { var time = parseInt(d.FHRQ.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } else { return d.FHRQ.toString() } } },
{ field: 'JHRQ', title: 'IN HOUSE DATE', width: 110, edit: 'text', event: 'datebox', templet: function (d) { if (d.JHRQ.toString().substring(0, 2) == "/D") { var time = parseInt(d.JHRQ.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } else { return d.JHRQ.toString() } } },
{ field: 'FOB', title: 'FOB DATE', width: 110, edit: 'text', event: 'datebox', templet: function (d) { if (d.FOB.toString().substring(0, 2) == "/D") { var time = parseInt(d.FOB.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } else { return d.FOB.toString() } } },
{ field: 'ZWLCRQ', title: '最晚离厂日期', width: 120, edit: 'text', event: 'datebox', templet: function (d) { if (d.ZWLCRQ.toString().substring(0, 2) == "/D") { var time = parseInt(d.ZWLCRQ.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } else { return d.ZWLCRQ.toString() } } },
{ field: 'DDSL', title: '数量' },
{ field: 'HJJE', title: '金额', width: 100 },
{ field: 'CZPOH', title: '参照订单PO号', width: 130, edit: true },
{
field: 'HBBH', title: '结算方式', width: 90, templet: function (d) {
var opt = '<select name="HBBH" lay-filter="HBBH" id="HBBH">';
if (d.HBBH == "美金") {
opt += '<option value = "美金" selected="selected"> 美金</option >' +
'<option value="人民币">人民币</option>';
} else if (d.HBBH == "人民币") {
opt += '<option value = "美金"> 美金</option >' +
'<option value="人民币" selected="selected">人民币</option>'
}
opt += '</select>';
return opt;
}
},
{ field: 'YHHL', title: '汇率', edit: true },
{ field: 'ZDR', title: '制单人', edit: 'text' },
{ field: 'DJZT', title: '订单状态', width: 90 },
{ title: '操作', toolbar: '#tool', fixed: 'right', width: 270 }
]]
, done: function (res, curr, count) {
}
, where: { Keyword: $("#keyword").val(), startdate: $("#startdate").val(), enddate: $("#enddate").val() }
});
</script>
我们可以看到,其它列的字段超出范围了
后来打开F12发现laytable-cell-1-0-2可以单独设置为visible,于是我就设置了
.laytable-cell-1-0-2{overflow:visible} ,但发现每次重新table.render()后,这个1-0-2就变成x-0-2,最前面的数会随着render()次数增加,除非重新刷新整个页面才会变成1-0-2,后来发现这个data-key是和这个laytable-cell这个后缀数字一样的,于是在done:function(res, curr, count)里加入了{
$(".layui-table-main tr").each(function (index, val) {
var datakey = $(".layui-table tbody tr[data-index='" + index + "'] td[data-field='LB']").attr("data-key");
$(".laytable-cell-" + datakey + "").css('overflow', 'visible');
});
},然后再去运行我们就可以看到,这列超出的内容隐藏在cell里了