layui表格下拉选择、日期选择、文本输入框

一、下拉选择 改动三个地方：下拉选择模板、数据渲染、下拉选择监听填充数据 //表格{ title: '是否棚改房span class="titletips"*/span', field: 'sfpgf', align: 'center', width: 110, // edit: 'text', templet: function (d) { return 'select name="sfpgf" class="sel_xlk" lay-filter="sfpgf" l

 一、下拉选择
改动三个地方：下拉选择模板、数据渲染、下拉选择监听填充数据

//表格
{
    title: '是否棚改房<span class="titletips">*</span>',
    field: 'sfpgf',
    align: 'center',
    width: 110,
    // edit: 'text',
    templet: function (d) {
        return '<select name="sfpgf" class="sel_xlk" lay-filter="sfpgf" lay-verify="sfpgf" data-state="' + d.sfpgf + '" data-sfpgf="' + d.sfpgf + '" >' +
                        '        <option value="">请选择</option>' +
                        '         <option :value="是">是</option>' +
                        '         <option :value="否">否</option>' +
                        '    </select>';
    }
}

//数据渲染
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="sfpgf"]'), function (index, item) {
        var elem = $(item);
        elem.val(elem.data('sfpgf')).parents('div.layui-table-cell').css('overflow', 'visible');
    });
},

//监听选择切换填充数据
form.on('select(sfpgf)', function (data) {//修改类型
    console.log(data);
    let sfpgf = data.elem.value; //当前字段变化的值
    var elem = $(data.elem);
    var trElem = elem.parents('tr');
    var tableData = table.cache['zongdimingxi_hb_table'];
    // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
    tableData[trElem.data('index')][elem.attr('name')] = data.value;
    //修改状态
    //....这里省略一个ajax请求...
    // 传值：表单变化后的值传递到后台数据库进行实时修改，例如，根据id修改这条数据的状态。
});

补充：
以上问题存在表格添加行后表格刷新选择器的input框没有赋上值，因此在done中还要添加一行，完整代码如下：

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="sfpgf"]'), function (index, item) {
        var elem = $(item);
        $(item.parentElement).find('input').val(parseData[index].sfpgf);//给layui下拉选择器的input赋值
        elem.val(elem.data('sfpgf')).parents('div.layui-table-cell').css('overflow', 'visible');
    });
},

二、日期选择
 改动二个地方：日期模板、数据渲染

//表格
{
    title: '申请时间<span class="titletips">*</span>',
    field: 'sqsj',
    align: 'center',
    width: 150,
    // event:'editsqsj',
    // data_field:'sqsj'
    templet: function (d) {
        return '<input name="sqsj" class="layui-input time-input" readonly="readonly" ' +
                                'value="' + d.sqsj + '">' +
                                '<i class="layui-icon layui-icon-date icontime sqsj-laydate"></i>'
    }
},

//数据渲染
done: function (res, curr, count) {
    $(".sqsj-laydate").each(function (i) {
        laydate.render({
            //时间选择器
            elem: this.parentNode.firstElementChild,
            eventElem: this,
            type: 'date',
            value: this.value,
            trigger: 'click',
            done: function (value, date, endDate) {
                console.log(i + ":" + value);
                parseData[i].sqsj = value;
            }
        })
    })
},

三、文本框输入
改动二个地方：文本模板、数据渲染、监听change事件

{
    title: '申请人<span class="titletips">*</span>',
    field: 'sqr',
    align: 'center',
    templet: function (d) {
        //input输入框 编程学习网整理
        // return '<input name="sqr" class="layui-input time-input sqr-lay"' + 'value="' + d.sqr + '">'
        return '<textarea name="sqr" class="textarea-lay sqr-lay"' + 'value="' + d.sqr + '"></textarea>'
    }
}

//在done中为textarea赋值
$(".sqr-lay").each(function (i) {
    $(this).val(parseData[i].sqr);
})

//输入值修改表格数据
$(".sqr-lay").change(function () {
    var value = this.value;
    console.log(value);
    var elem = $(this);
    var trElem = elem.parents('tr');
    var zongdi_extra = table.cache['sqr_table'];
    // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
    zongdi_extra[trElem.data('index')][elem.attr('name')] = value;
});