要求：1、表格编辑下拉框 2、下拉框数据动态

最难处理是下拉显示问题

下拉动态数据公共方法

 getdatadic: function (param) {
            /// <summary>数据字典下拉框赋值</summary>  
            /// <param name="param" type="Object">selectEl:select的ID带#，dataenum数据字典类别的enum值。</param>
                admin.req({
                    url: '/System/DataDictionary/GetListByDataEnumType?rand=' + Math.round(Math.random() * (10000 - 1)).toString(),
                    data: { dataEnum: param.dataenum }
                    , async: false//取消异步
                    , done: function (res) {
                        
                        if (param.script === "script") {
                            var slhtml = '<select name="' + param.selectEl + '" id="' + param.selectEl + '" lay-filter="' + param.selectEl + '">'
                            $(res.Data).each(function (i, n) {
                                slhtml = slhtml + "<option value='" + n.Id + "'>" + n.Name + "</option>";
                                // $($("#selectLb").html()).append("<option value='" + n.Id + "'>" + n.Name + "</option>");
                            });
                            slhtml = slhtml + ' </select>';
                            $("#" + param.scriptEl).html(slhtml)
                            //form.render("select");//必须

                        }
                        else {
                            $(res.Data).each(function (i, n) {
                                $(param.selectEl).append("<option value='" + n.Id + "'>" + n.Name + "</option>");
                            });
                        }
                        form.render("select");//必须
                        if (param.wooverify != undefined && param.wooverify) {
                            $(param.selectEl).next("div.layui-form-select").children("div").children("input").addClass("pen");
                            //$(param.selectEl).next("div.layui-form-select").children("div").children("input").addClass("pen");
                        }
                    }
                });
            

        },

1、html

 <div class="layui-card " id="continvoice">
        <div class="layui-card-header">发票</div>
        <div class="layui-card-body" style="padding: 15px;">
            <table id="NF-ContInvoice" lay-filter="NF-ContInvoice"></table>
        </div>
        
            <script type="text/html" id="selectInTypehtml" >    
            <select name='InType' id="InType">
                <option value=""></option>
               
                
            </select>
            </script>

         <!--表格工具栏-->
            <script id="tool_continvoice" type="text/html">
                <div class="layui-inline">
                    <button class="layui-btn " lay-event="add"><i class="layui-icon layui-icon-edit"></i> 新增</button>
                    <button class="layui-btn  layui-btn-danger" lay-event="save"><i class="layui-icon layui-icon-save"></i>确认</button>
                </div>
            </script>
    </div>

2、样式文件

<style type="text/css" >
 /*使下拉列表框不被遮挡*/
    .layui-table-cell {
        overflow: visible !important;
    }


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

</style>

3、核心js内容

1、动态加载下拉数据，是后台封装信息

 commonnf.getdatadic({ dataenum: 19, selectEl: "InType", script: "script", scriptEl: "selectInTypehtml" });

2、{ field: 'InTypeName', title: '发票类型', width: 160, templet: '#selectInTypehtml' }

日期

3、, { field: 'MakeOutDateTime', title: '开票日期', width: 140, edit: 'text', event: 'Plandate' }

4、下拉

 /**
             * 下拉选择框
             * **/
            form.on('select(InType)', function (data) {
                //debugger;
                var elemt = $(data.elem)
                var trelment = elemt.parents("tr");
                var tabledata = table.cache['NF-ContInvoice']
                var trobjdata = tabledata[trelment.data('index')]//["InTypeName"] = data.value;
                trobjdata.InType = data.value;
                
                for (var i = 0; i < updatedatafp.length; i++) {
                    if (updatedatafp[i].Id === trobjdata.Id) {
                        updatedatafp.splice(i, 1);
                    }
                }
                isupdatefp = true;
                updatedatafp.push(trobjdata);

            });

5、日期操作

//列表操作栏
            table.on('tool(NF-ContInvoice)', function (obj) {
                var _data = obj.data;
                switch (obj.event) {
                   
                    case "Plandate"://开票日期
                        {
                           // debugger;
                            var newdata = {};
                            var field = $(this).data('field');
                            laydate.render({
                                elem: this.firstChild
                                , show: true //直接显示
                                , closeStop: this
                                , type: 'date'
                                , format: "yyyy-MM-dd"
                                , done: function (value, date) {
                                   // debugger;
                                    isupdatefp = true;
                                    newdata[field] = value;
                                    obj.update(newdata);
                                    for (var i = 0; i < updatedatafp.length; i++) {
                                        if (updatedatafp[i].Id === obj.data.Id) {
                                            updatedatafp.splice(i, 1);
                                        }
                                    }
                                    obj.data.MakeOutDateTime = value;
                                    updatedatafp.push(obj.data);

                                }
                            });
                        }
                        break;
                    //case "selectmsd":
                    //    {
                    //        var field = $(this).data('field');
                    //        debugger;

                    //    }
                        break;
                    default:
                        layer.alert("暂不支持（" + obj.event + "）");
                        break;
                }
            });

整块模块的全部代码

/************************发票-begin*****************************************************************************************/
            //发票类型
           
            commonnf.getdatadic({ dataenum: 19, selectEl: "InType", script: "script", scriptEl: "selectInTypehtml" });
            table.render({
                elem: '#NF-ContInvoice'
                , url: '/Contract/ContractCollection/GetInvoiceListByContId?contId=' + contId + '&rand=' + wooutil.getRandom()
                , toolbar: '#tool_continvoice'
                , defaultToolbar: ['filter']
                , cols: [[
                    { type: 'numbers', fixed: 'left' }
                    , { type: 'checkbox', fixed: 'left' }
                    , { field: 'Id', title: 'Id', width: 50, hide: true }
                    , { field: 'InTypeName', title: '发票类型', width: 160, templet: '#selectInTypehtml' }
                    , { field: 'AmountMoneyThod', title: '发票金额', width: 140, edit: 'text' }
                    , { field: 'MakeOutDateTime', title: '开票日期', width: 140, edit: 'text', event: 'Plandate' }
                    , { field: 'InCode', title: '发票号', width: 150, edit: 'text' }
                    , { field: 'InStateDic', title: '发票状态', width: 140 }
                    , { field: 'ConfirmUserName', title: '确认人', width: 140 }
                    , { field: 'ConfirmDateTime', title: '确认日期', width: 140 }
                    , { field: 'CreateUserName', title: '创建人', width: 140 }
                    , { field: 'CreateDateTime', title: '创建日期', width: 140 }
                    , { field: 'InType', title: '发票类型id', width: 140, hide: true }

                ]]
                , page: false
                , loading: true
                , height: setter.table.height_tab
                , limit: setter.table.limit_tab
               
                , done: function (res, curr, count) {
                   
                    var tableId = "NF-ContInvoice";
                    var divForm = $("#" + tableId).next();  // 获取表格，tableId是表格的id
                    var tableCache = table.cache[tableId];  // 获取表格缓存数据，tableCacheId也是表格的id
                    var trJqs = divForm.find(".layui-table-body tr");  // 获取表格body下的所有tr标签
                    trJqs.each(function () {  // 遍历每个tr标签
                       
                        var trJq = $(this);  // 获得当前遍历的tr标签
                        var dataIndex = trJq.attr("data-index");  // 得到当前数据行的data-index，即为第几行数据
                        trJq.find("td").each(function () {  // 遍历tr标签下的每一个td标签
                            var tdJq = $(this);  // 获得当前遍历的td标签
                            var fieldName = tdJq.attr("data-field");  // 获得当前td标签的字段名
                            var selectJq = tdJq.find("select");  // 获得当前td标签下的select标签
                            if (selectJq.length == 1) {  // 判断select标签是否存在
                                selectJq.eq(0).val(tableCache[dataIndex]["InType"]);  // 将表格里的缓存数据赋值给select标签
                            }
                        });
                    });
                    form.render('select');  // 重新加载select表单



                   
                  }
               
               });

            var contaoviceEvent = {
                add: function () {
                    admin.req({
                        url: '/Contract/ContractCollection/AddAnvoiceLine?rand=' + wooutil.getRandom()
                        , data: { contId: contId }
                        , success: function (res) {
                            table.reload("NF-ContInvoice", {
                                page: { curr: 1 }
                                , where: {}
                            });

                        }
                    });
                },
                save: function () {
                    if (isupdatefp) {//发票保存
                       // debugger;
                        for (var i = 0; i < updatedatafp.length; i++) {
                            //if (updatedatafp[i].Id === obj.data.Id) {
                            //    updatedatafp.splice(i, 1);
                            //}
                            updatedatafp[i].AmountMoney = updatedatafp[i].AmountMoneyThod;
                        }
                        admin.req({
                            url: '/Contract/ContractCollection/SaveFpData',
                            data: { data: updatedatafp },
                            type: 'POST',
                            done: function (res) {
                                //清空变量，防止重复提交
                                updatedata = [];
                                isupdate = false;
                                return layer.msg('保存成功', { icon: 1 });
                            }
                        });
                    } else {
                        return layer.msg('数据没有任何修改！', { icon: 5 });
                    }
                }
               
            };
            //发票头部工具栏
            table.on('toolbar(NF-ContInvoice)', function (obj) {
                switch (obj.event) {
                    case 'add':
                        contaoviceEvent.add();
                        break;
                    case 'save':
                        contaoviceEvent.save();
                        break
                    case 'LAYTABLE_COLS'://选择列-系统默认不管
                        break;
                    default:
                        layer.alert("暂不支持（" + obj.event + "）");
                        break;
                };
            });
            //列表操作栏
            table.on('tool(NF-ContInvoice)', function (obj) {
                var _data = obj.data;
                switch (obj.event) {
                   
                    case "Plandate"://开票日期
                        {
                           // debugger;
                            var newdata = {};
                            var field = $(this).data('field');
                            laydate.render({
                                elem: this.firstChild
                                , show: true //直接显示
                                , closeStop: this
                                , type: 'date'
                                , format: "yyyy-MM-dd"
                                , done: function (value, date) {
                                   // debugger;
                                    isupdatefp = true;
                                    newdata[field] = value;
                                    obj.update(newdata);
                                    for (var i = 0; i < updatedatafp.length; i++) {
                                        if (updatedatafp[i].Id === obj.data.Id) {
                                            updatedatafp.splice(i, 1);
                                        }
                                    }
                                    obj.data.MakeOutDateTime = value;
                                    updatedatafp.push(obj.data);

                                }
                            });
                        }
                        break;
                    //case "selectmsd":
                    //    {
                    //        var field = $(this).data('field');
                    //        debugger;

                    //    }
                        break;
                    default:
                        layer.alert("暂不支持（" + obj.event + "）");
                        break;
                }
            });

            /**编辑**/
            table.on('edit(NF-ContInvoice)', function (obj) {
               // debugger;
                isupdatefp = true;
                var data = obj.data; //得到所在行所有键值
                var filed = obj.field;
                switch (filed) {
                   
                    case "AmountMoneyThod"://发票金额
                        {
                            var amoutthd = wooutil.numThodFormat(obj.value.toString());
                            obj.data.AmountMoney = amoutthd;
                           
                        }
                        break;




                }
                //修改值
                for (var i = 0; i < updatedatafp.length; i++) {
                    if (updatedatafp[i].Id === obj.data.Id) {
                        updatedatafp.splice(i, 1);
                    }
                }
                updatedatafp.push(obj.data);
            });
            /**
             * 下拉选择框
             * **/
            form.on('select(InType)', function (data) {
                //debugger;
                var elemt = $(data.elem)
                var trelment = elemt.parents("tr");
                var tabledata = table.cache['NF-ContInvoice']
                var trobjdata = tabledata[trelment.data('index')]//["InTypeName"] = data.value;
                trobjdata.InType = data.value;
                
                for (var i = 0; i < updatedatafp.length; i++) {
                    if (updatedatafp[i].Id === trobjdata.Id) {
                        updatedatafp.splice(i, 1);
                    }
                }
                isupdatefp = true;
                updatedatafp.push(trobjdata);

            });
            /*************************发票-end*******************************************************************************************/

借鉴内容：layui学习——数据表格嵌套下拉列表，并实现动态更新 - 夏末蝉未鸣 - 博客园