layui table动态加载嵌入的下拉框,并且下拉框查询的值设为已选中

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

<script type="text/javascript" src="~/Content/layui/dist/layui.js"></script>
 <script type="text/javascript" src="~/Scripts/jquery-3.5.1.min.js"></script>
<script>
layui.use(['table', 'layer', 'laydate', 'form'], function () {
            var table = layui.table,
                $ = layui.jquery,
                layer = layui.layer,
                util = layui.util,
                form = layui.form,
                layerdate = layui.laydate;

            table.render({
                elem: '#DetailList'
                , height: 'full-88'
                , cellMinWidth: '80'
                , url: "/XSDDLR/getdetaillist?ZDJBH=" + ZDJBH//数据接口
                , page: true
                //, even: true //开启隔行背景
                , toolbar: true
                , defaultToolbar: ['filter', 'print', 'exports']
                , cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'ID', title: '序号', width: 60, templet: function (d) { return d.LAY_INDEX; } },
                { field: 'WGZT', title: '状态', width: 60 },
                { field: 'JHZT', title: '计划', width: 60 },
                { field: 'DDPOH', title: 'PO号', width: 80 },
                {//在这里取值,当我们通过ajax取到的值和原先table取到值一样时设置selected="selected"
                    field: 'CYLX', title: '成衣类型', width: 120, templet: function (d) {
                        var opt = '<select name="CYLX" lay-filter="CYLX" class="CYLX" id="CYLX">';
                        $.ajax({
                            url: '/XSDDMXLR/QueryCYLX',
                            dataType: 'JSON',
                            type: 'POST',
                            success: function (res) {
                                if (d.CYLX == null) {
                                    opt += '<option value=""></option>';
                                    $.each(res.data, function (item, val) {
                                        opt += '<option value = "' + val.CYLX + '">' + val.CYLX + '</option>'
                                    });
                                }
                                else {
                                    $.each(res.data, function (item, val) {
                                        if (d.CYLX == val.CYLX) {
                                            opt += '<option value = "' + val.CYLX + '"  selected="selected">' + val.CYLX + '</option>'
                                        } else {
                                            opt += '<option value = "' + val.CYLX + '">' + val.CYLX + '</option>'
                                        }

                                    });
                                }
                            },
                            error: function () {
                                layer.msg('请求超时请联系管理员', { icon: 2 });
                            },
                            async: false
                        })
                        opt += '</select>';
                        return opt;
                    }
                },
                { field: 'WLMC', title: '客户款式', hide: true },
                { field: 'WLBH', title: '款式编号', width: 120, edit: 'text' },
                { field: 'SXM', title: '水洗名', width: 120, edit: 'text' },
                { field: 'YS', title: '颜色', width: 80, edit: 'text' },
                { field: 'ML', title: '面料', width: 80, edit: 'text' },
                { field: 'GYSM', title: '特殊工艺说明', width: 150, edit: 'text' },
                { field: 'JLDW', title: '单位', width: 60, edit: 'text' },
                { field: 'SL', title: '数量', width: 60, edit: 'text' },
                { field: 'DJ', title: '单价', width: 60, edit: 'text' },
                { field: 'JE', title: '金额', width: 100, edit: 'text' },
                { field: 'YJSCWCRQ', title: '预计试身完成日期', width: 150, edit: 'text', event: 'datebox', templet: function (d) { if (d.YJSCWCRQ.toString().substring(0, 2) == "/D") { var time = parseInt(d.YJSCWCRQ.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } else { return d.YJSCWCRQ.toString() } } },
                { field: 'BGSM', title: '变更说明', width: 100, edit: 'text' },
                { field: 'ZDJBH', title: '主编号', width: 120 },
                { title: '操作', fixed: 'right', width: 200, toolbar: '#tool' }
            ]]
                , done: function (res, curr, count) {
                    $(".layui-table-main tr").each(function (index, val) {
                        var datakey = $(".layui-table tbody tr[data-index='" + index + "'] td[data-field='CYLX']").attr("data-key");
                        $(".laytable-cell-" + datakey + "").css('overflow', 'visible');
                    });

                }
            });

			//下拉框回显
            form.on('select(CYLX)', function (data) {
                let ee = data.elem.value; //当前字段变化的值
                var elem = $(data.elem);
                var trElem = elem.parents('tr');
                var tableData = table.cache['DetailList'];
                // 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
                tableData[trElem.data('index')][elem.attr('name')] = data.value;
            })
        });
    </script>



//后台control 方法
//layui有固定的JSON返回格式
 public ActionResult QueryCYLX()
        {
            List<CYLXModel> list = bll.getCYLX();
            var result = new
            {
                code = 0,
                msg = "",
                count = list.Count(),
                data = list.ToList()
            };
            return Json(result, JsonRequestBehavior.AllowGet);
        }

你可能感兴趣的:(layui,layui,前端,c#)