layui表格内可编辑下拉框的实现

layui表格内可编辑下拉框扩展自别人的表格内下拉框 一、列模板，这是列配置的templet字段需要使用的。 1.inputdiv，输入框覆盖在下拉框上面左半部。这个样式用来调整输入框和下拉框不会超出单元格。 2.method,和该列字段名一致 3.z-filter，只要有这

layui表格内可编辑下拉框扩展自别人的表格内下拉框

一、列模板，这是列配置的templet字段需要使用的。

1.inputdiv，输入框覆盖在下拉框上面左半部。这个样式用来调整输入框和下拉框不会超出单元格。

2.method,和该列字段名一致

3.z-filter，只要有这个属性就够了，没有判断值

4.tb，layui表格的名字，和表格lay-filter一致

<script type="text/html" id="selectTpl">
    <div class="inputdiv">
        <input class="layui-input" name="method" z-filter="input" data-tableName="tb" style="position:absolute;z-index:2;width:calc(100% - 30px);" />
        <select name="mehtod" lay-filter="select" data-tableName="tb" class="layui-border">
            <option value=""></option>
            <option value="更换">更换</option>
            <option value="维修">维修</option>
        </select>
    </div>
</script>

二、样式。主要是别人写的，由于我在select外有加了一层div，因此这两个元素样式有所改动

/* 防止下拉框的下拉列表被隐藏*/
        .layui-table-cell {
            /*overflow: visible !important;*/
        }

        .layui-table-box {
            overflow: visible;
        }

        .layui-table-body {
            overflow: auto;
        }

        /* 使得下拉框与单元格刚好合适 */
        td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
        td .inputdiv>input {
            margin-left: -15px;
        }

        .layui-form-selected .layui-anim {
            bottom: auto;
        }

三、表格列配置

{
    field: 'method', title: '类别', templet: (d) => {
        var temp = $($("#selectTpl").html());
        temp.find("select").attr("data-value", d.method)//给下拉框赋值
        temp.find("input").attr("value", d.method);//给输入框赋值
        return temp[0].outerHTML;
    }
}

三、回调。第一个回调时layui的select的回调，第二个是我自定义的输入框回调，在回调中更新表格缓存数据。这些代码与具体表格无关，没有其他要求不需要更改。

//选择下拉框
form.on("select(select)", function (obj) {
    var elem = $(obj.elem);
    var trElem = elem.parents('tr');
    var tableName = elem.attr("data-tableName");
    var tableData = table.cache[tableName];
    $(elem.prev("input")).val(obj.value)
     tableData[trElem.data('index')][elem.attr('name')] = obj.value;
    console.log(table.cache);
})
//通过事件冒泡监听z-filter元素的change事件
document.onchange = function (e) {
    if (e.target.getAttribute("z-filter") == null) {
        return;
    }
    var tableName = e.target.getAttribute("data-tableName");//使用触发元素判断所属表格
    var elem = $(e.target);
    var trElem = elem.parents('tr');
    var tableData = table.cache[tableName];
    tableData[trElem.data('index')][elem.attr('name')] = elem.val();//使用触发元素的name属性判断字段
    console.log(table.cache);
};