layui table 的下拉框如何实现

在 layui table 中使用下拉框可以通过设置表格列的 templet 属性来实现。

首先，在表格列中定义一个下拉框的 HTML 元素，如下所示：

{
    field: 'status',
    title: '状态',
    templet: function(d){
        return '<select lay-filter="statusSelect" data-id="'+ d.id +'"><option value="0" '+(d.status === 0 ? 'selected' : '')+'>未审核</option><option value="1" '+(d.status === 1 ? 'selected' : '')+'>已审核</option></select>';
    }
}

在上面的代码中，我们使用了 layui 的 select 组件来创建下拉框，并设置了 lay-filter 属性为 statusSelect，这个属性用于监听下拉框的值改变事件。

然后，在 layui 的 JavaScript 代码中，我们可以监听这个下拉框的值改变事件，并发送 Ajax 请求将修改后的值保存到后台数据库中，如下所示：

layui.use(['table', 'form'], function(){
    var table = layui.table;
    var form = layui.form;

    // 监听下拉框的值改变事件
    form.on('select(statusSelect)', function(data){
        var id = $(data.elem).data('id');
        var status = data.value;
        // 发送 Ajax 请求更新数据
        $.ajax({
            url: '/updateStatus',
            type: 'POST',
            data: {
                id: id,
                status: status
            },
            success: function(res){
                if(res.code === 0){
                    // 更新成功
                    table.reload('tableId');
                }else{
                    // 更新失败
                    layer.msg(res.msg, {icon: 2});
                }
            },
            error: function(){
                layer.msg('网络错误', {icon: 2});
            }
        });
    });
});

在上面的代码中，我们使用了 layui 的 form 模块来监听下拉框的值改变事件，并获取到下拉框的值和所在行的数据 id，然后发送 Ajax 请求将数据保存到后台数据库中，如果保存成功，就重新加载表格数据。