layui表格内可编辑下拉框

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

一、列模板

<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>

二、样式

/* 防止下拉框的下拉列表被隐藏*/
        .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;
    }
}

三、回调

//选择下拉框
            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();
                console.log(table.cache);
            };