Layui - 可编辑表格

代码

/* 防止下拉框的下拉列表被隐藏---必须设置--- */
.layui-table-cell { overflow: visible; }
.layui-table-box { overflow: visible; }
.layui-table-body { overflow: visible; }
/* 使得下拉框与单元格刚好合适 */
td .layui-form-select { margin-top: -10px; margin-left: -15px; margin-right: -15px; }

<table class="layui-hide" id="tbForOrders" lay-filter="tbForOrders"></table>

<script type="text/html" id="barForOrders">
    {{# if(d.RowNo != 1){ }} <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> {{#  }; }}
</script>
<script type="text/html" id="temProductCategory">
    <select name="inputProductCategory" lay-filter="inputProductCategory">
        <option value="" {{# if(d.ProductCategory == ""){ }} selected {{# }; }}>请选择</option>
        <option value="1" {{# if(d.ProductCategory == "1"){ }} selected {{# }; }}>带电</option>
        <option value="2" {{# if(d.ProductCategory == "2"){ }} selected {{# }; }}>不带电</option>
    </select>
</script>
<script type="text/html" id="temWare">
    <select name="inputWare" lay-filter="inputWare">
        <option value="" {{# if(d.WID == ""){ }} selected {{# }; }}>请选择</option>
        {{# d.WareList.forEach(function (item, index) { }} <option value="{{ item.WID }}" {{# if(d.WID == item.WID){ }} selected {{# }; }}>{{ item.WareName }}</option> {{# }); }}
    </select>
</script>
<script type="text/html" id="temDeliveryMethod">
    <select name="inputDeliveryMethod" lay-filter="inputDeliveryMethod">
        <option value="" {{# if(d.DeliveryMethod == ""){ }} selected {{# }; }}>请选择</option>
        <option value="1" {{# if(d.DeliveryMethod == "1"){ }} selected {{# }; }}>自送</option>
        <option value="2" {{# if(d.DeliveryMethod == "2"){ }} selected {{# }; }}>快递</option>
    </select>
</script>

var forOrders = [{ RowNo: 1, ExpressCompany: "", ExpressNumber: "", GoodsName: "", Quantity: "", ProductCategory: "", WID: "", DeliveryMethod: "", WareList: [{ WID: 105, WareName: "105仓" }] }];

table.render({
    elem: '#tbForOrders',
    data: forOrders,
    cellMinWidth: 100,
    limit: forOrders.length + 10,
    editTrigger: 'dblclick',
    cols: [[
        { field: 'ExpressCompany', width: 240, title: '国内运输公司', align: 'center', edit: 'text' },
        { field: 'ExpressNumber', width: 240, title: '快递单号', align: 'center', edit: 'text' },
        { field: 'GoodsName', width: 240, title: '货物品名', align: 'center', edit: 'text' },
        { field: 'Quantity', width: 240, title: '货物数量', align: 'center', edit: 'text' },
        { field: 'ProductCategory', title: '产品分类', align: 'center', templet: '#temProductCategory' },
        { field: 'WID', title: '所属仓库', align: 'center', templet: '#temWare' },
        { field: 'DeliveryMethod', title: '送货方式', align: 'center', templet: '#temDeliveryMethod' },
        { fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barForOrders' }
    ]]
});

form.on('select(inputProductCategory)', function (obj) {
    var elem = obj.othis.parents('tr');
    var dataindex = elem.attr("data-index");
    $.each(forOrders, function (index, value) {
        if (value.LAY_TABLE_INDEX == dataindex) {
            value.ProductCategory = obj.value
        }
    });
});

form.on('select(inputWare)', function (obj) {
    var elem = obj.othis.parents('tr');
    var dataindex = elem.attr("data-index");
    $.each(forOrders, function (index, value) {
        if (value.LAY_TABLE_INDEX == dataindex) {
            value.WID = obj.value
        }
    });
});

form.on('select(inputDeliveryMethod)', function (obj) {
    var elem = obj.othis.parents('tr');
    var dataindex = elem.attr("data-index");
    $.each(forOrders, function (index, value) {
        if (value.LAY_TABLE_INDEX == dataindex) {
            value.DeliveryMethod = obj.value
        }
    });
});

table.on('edit(tbForOrders)', function (obj) { 
    forOrders.forEach(function (item, index) {
        if (item.RowNo == obj.data.RowNo) {
            switch (obj.field) {
                case "ExpressCompany":
                    item.ExpressCompany = obj.value
                    break;
                case "ExpressNumber":
                    item.ExpressNumber = obj.value
                    break;
                case "GoodsName":
                    item.GoodsName = obj.value
                    break;
                case "Quantity":
                    item.Quantity = obj.value
                    break;
            }
        }
    });
});

table.on('tool(tbForOrders)', function (obj) {
    var item = obj.data;
    switch (obj.event) {
        case 'del':
            layer.confirm('是否确认删除', { title: "提示", icon: 7 }, function (index) {
                layer.close(index);
                forOrders = forOrders.filter(it => it.RowNo != item.RowNo);
                ResetRowNo();
                table.reload('tbForOrders', { data: forOrders, limit: forOrders.length + 10 });
                console.log(forOrders);
            });
            break;
    }
});

// 重新编号
function ResetRowNo() {
    var RowNo = 1;
    forOrders.forEach(function (item, index) {
        item.RowNo = RowNo;
        RowNo++;
    });
}

功能

1. TABLE中加入下拉选择框
2. 下拉框设置默认选中项
3. 下拉框选项动态加载
4. TABLE数据刷新