使用layui 表格 下拉框 的实现
1： 想要实现的 效果 ：
2：使用 templet 模版 （代码如下 前提 ：接口正常 能获取到数据并展示）
table.render({
elem: '#munu-table'
, url: 'xxx.com/xxxx'
,id:"table"
,page:{
limit: 15
, limits: [15, 20, 30, 40, 50, 100, 150, 200, 250, 300, 400, 500, 800, 1000]
// ,curr:localStorage.getItem('spgl_curr') ? localStorage.getItem('spgl_curr') : 1
}
,totalRow: true //开启合计行
, cols: [[
{type: 'checkbox', width: 40, sort: true},
{field: 'id', width: 140, title: 'id',hide:true},
{field: 'image', width: 70, title: '图片',templet:function (d) {
return '
';
}},
{field: 'list_number', width: 100, title: '清单编号'},
{field: 'storage_id', width: 100, title: '入库编号'},
{field: 'batch_number', width: 80, title: '批次号'},
{field: 'sku', width: 80, title: 'sku'},
{field: 'storage_quantity', width: 90, title: '入库数量'},
{field: 'sample_quantity', width: 90, title: '留样数量'},
{field: 'actual_packing_quantity', width: 115, title: '实际装箱数量'},
{field: 'purchaser', width: 80, title: '采购人'},
{field: 'outbound_date', width: 100, title: '出库日期'},
{field: 'pending_days', width: 100, title: '待处理天数'},
{field: 'processing_status', width: 100, title: '处理进度'},
{field: 'processor', width: 80, title: '处理人'},
{field: 'created_time', width: 100, title: '创建时间'},
{field: 'modified_time', width: 100, title: '修改时间'},
{
field: 'processing_method',
title: '处理方式',
align: 'center',
width: 200,
templet: function (d) {
var selectHtml = '';
return d.processing_method + selectHtml;
}
},
]]
, done: function(res, curr, count) {
console.log(res); // 在控制台打印获取到的数据
$(".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="paid"]'), function (index, item) {
var elem = $(item);
elem.val(elem.data('state')).parents('div.layui-table-cell').css('overflow', 'visible');
});
form.render();//刷新表单
}
});
注意：templet 的用法 在手册中 只是简单的举了几个例子 。
文档：参考链接
3：注意done 里面的回调 ：
done: function(res, curr, count) {
console.log(res); // 在控制台打印获取到的数据
$(".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="paid"]'), function (index, item) {
var elem = $(item);
elem.val(elem.data('state')).parents('div.layui-table-cell').css('overflow', 'visible');
});
form.render();//刷新表单
}
layui.each(tableElem.find('select[name="paid"]') pid 是 field: 'pid', 的值。
上面的代码 加上后才能正常的展示 下拉 数据 如果没有 这段代码 点击 下拉图标 不会起作用。
4：修改数据：
form.on('select(stateSelect)', function (data) {//修改类型
let id = data.elem.dataset.value; //当前数据的id
let processing_method = data.elem.value; //当前字段变化的值
// 传值：表单变化后的值传递到后台数据库进行实时修改，例如，根据id修改这条数据的状态。
console.log(id);
console.log(processing_method);
$.ajax({
type: 'post',
url:'xxx.com/xxx', // ajax请求路径
data: {
id: id,
processing_method: processing_method
},
success: function(data){
var data = JSON.parse(data)
layer.msg(data.msg);
// layer.msg('修改成功');
// console.log(data);
//执行重载
//table.reload('bizInvoiceTable');
//window.location.href = Feng.ctxPath + '/bizInvoice'
}
});
});
总结： 我遇到最多的问题就是 选择 下拉图标的时候 不能展示下拉的数据 。 所以一定要注意 红色字段。
未解决的问题 ： 下拉框会被覆盖 f12 能高亮度找到 但是被表格下面的滑块 覆盖了 。
有滑块的时候 会出现 每列的线格子 会与 tittle 对不齐