layui嵌套下拉框(亲测可以)效果图
1. 我们设置一下下拉框的样式,进行美化一下
/* 设置下拉框的高度与表格单元相同 */
td .layui-form-select {
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
}
2. 我们在表单的状态字段那一栏设置下拉框 在cols里添加
,{field:'logins', title:'考勤状态', templet: function (d) {
return '<select name="logins" class="sel_xlk" lay-filter="stateSelect" lay-verify="required" data-state="' + d.logins + '" data-value="' + d.id + '" >' +
' <option value="0">请选择</option>' +
' <option value="1">出勤</option>' +
' <option value="2">迟到</option>' +
' <option value="3">旷工</option>' +
' <option value="4">待服务</option>' +
' <option value="5">出勤</option>' +
' </select>';
}
, width: 100}
/**
不了解的话可以去layui官网查看表格示例
*/
3*选择完下拉框把值带到列表中
//考勤状态改变
form.on('select(stateSelect)', function (data) {//修改类型
let id = data.elem.dataset.value; //当前数据的id
let logins = data.elem.value; //当前字段变化的值
//修改状态
//....这里省略一个ajax请求...
// 传值:表单变化后的值传递到后台数据库进行实时修改,例如,根据id修改这条数据的状态。
});
我们要刷新表格,并且去掉数据表格对select的隐藏,把select浮现在最外层 在table.render中添加
, done: function (res, curr, count) {
//设置下拉框样式在表格之上 不会遮挡下拉框
$(".layui-table-body").css('overflow','visible');
$(".layui-table-box").css('overflow','visible');
$(".layui-table-view").css('overflow','visible');
var tableElem = this.elem.next('.layui-table-view');
count || tableElem.find('.layui-table-header').css('overflow', 'auto');
layui.each(tableElem.find('select[name="logins"]'), function (index, item) {
var elem = $(item);
elem.val(elem.data('state')).parents('div.layui-table-cell').css('overflow', 'visible');
});
form.render();//刷新表单
}
注意
如果出现下图情况
//设置下拉框样式在表格之上 不会遮挡下拉框
$(".layui-table-body").css('overflow','visible');
$(".layui-table-box").css('overflow','visible');
$(".layui-table-view").css('overflow','visible');