工作需求,需要在 layui 的每一条数据中增加一个下拉框,提供用户选择;其中遇到几个问题,特此记录
//监听下拉框操作
form.on('select(selectDemo)', function (obj) {
//数据表格对应字段赋值
table.cache['selectDemo-table'][obj.elem.getAttribute('dataId')]["partCd"] = obj.value;
});
function tableDemo(datas){
table.render({
elem: '#selectDemo-table',
id: 'selectDemo-table',
title: '数据表',
cols: [[
{field: 'id', title: '编号'},
{
field: 'partCd', title: '部位', templet: function (d) {
//dataId:是为了知道点击的下拉框在第几行;data-state:为了后面解决遮挡
var select = "<select name='partCd' dataId='" + d.LAY_TABLE_INDEX + "' data-state='" + d.partCd + "' lay-filter='selectDemo'>";
//当从后台返回的数据有值时,做判断回显
if (d.partCd === '0') {
select += "<option selected value='0'>无</option><option value='1'>上部</option>" +
"<option value='2'>中部</option><option value='3'>下部</option>";
} else if (d.partCd === '1') {
select += "<option value='0'>无</option><option selected value='1'>上部</option>" +
"<option value='2'>中部</option><option value='3'>下部</option>";
} else if (d.partCd === '2') {
select += "<option value='0'>无</option><option value='1'>上部</option>" +
"<option selected value='2'>中部</option><option value='3'>下部</option>";
} else {
//无值,代表是新增数据
select += "<option value='0'>无</option><option value='1'>上部</option>" +
"<option value='2'>中部</option><option selected value='3'>下部</option>";
}
select += "</select>";
return select;
}, minWidth: 115
},
]],
limit: datas.length,//当不分页时,重新渲染需要加上数据长度,不然显示的数据条数还是第一次默认加载的10条
data: datas,
done: function (res, curr, count) {
if (res.data.length !== 0) {
//解决下拉框被表格遮挡;
var tableElem = this.elem.next('.layui-table-view');
//数据表格字段设置了fixed 属性导致下拉框被遮挡,没有设置可以注释
$("[lay-id='rm-bs-procPlan-scheme-table'] .layui-table-box").find(".layui-table-fixed").children('.layui-table-body').css('overflow', 'visible');
//这两条解决数据表格高度不足,下拉框导致表格出现滚动条,前提是你没有设置fixed
// $("[lay-id='bs-store-add-prodMaterial-main-table'] .layui-table-box").css('overflow', 'visible');
// $("[lay-id='bs-store-add-prodMaterial-main-table'] .layui-table-box").find('.layui-table-body').css('overflow', 'visible');
//下拉框被遮挡解决
layui.each(tableElem.find('select[name="partCd"]'), function (index, item) {
var elem = $(item);
//特定下拉框遮挡解决
elem.val(elem.data('state')).parents('div .layui-table-cell').css('overflow', 'visible');
});
form.render();//刷新表单
}
}
});
}