LAYUI 表内插入select 选择框，勾选内容项后处理追加数据字段

在数据表内添加select下拉菜单，切被选项是通过后台接口内容渲染的；实现勾选内容项后可以自动追加select选择的数据字段内容；实现效果如下：

实现代码如下：

<style>
    body{overflow: auto;}
    .layui-form-label{padding-left:0px;}
    .layui-btn-xs a{color: #ffffff;}
    a:not([href]):not([tabindex]) {color:#ffffff;text-decoration: none;}
    a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {color: #ffffff;text-decoration: none;}
    .layui-btn-add{margin: 0 15px 10px 15px;}
    .layui-table-tool-temp{padding-right: 0px;}
    .layui-table-cell{width: 100%;height:auto;overflow:visible;text-overflow:inherit;white-space:normal;}
    .layui-table-fixed .layui-table-body {overflow: auto;}
    .ptb-10{padding-top: 10px;padding-bottom: 10px;}
    .mt-8{margin-top: 8px;}
    .ml-10{margin-left: 10px;}
    .text-center{text-align: center;}
    .mtb-15{margin-top: 15px;margin-bottom: 15px;}
</style>
<!-- 其他搜索内容项 -->
 <blockquote class="layui-elem-quote">
        <div class="layui-form layuiadmin-card-header-auto">
            <div class="clearfloat">
                <div class="layui-inline  mt-8">
                    <label class="layui-form-label" style="width:110px">是否生成采购：</label>
                    <div class="layui-input-inline">
                        <select  name="purchase_status" id="purchase_status">
                            <option value="0">全部商品</option>
                            <option value="1">已生成采购单商品</option>
                            <option value="2">未生成采购单商品</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline  mt-8">
                    <label class="layui-form-label" style="">商品分类</label>
                    <input  type="hidden" value="" id="cat_id" name="cat_id">
                    <div class="layui-input-inline">
                        <select name="cats1" lay-filter="cats">
                            <option value="0">选择分类</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="cats2" lay-filter="cats" disabled>
                            <option value="0">选择分类</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="cats3" lay-filter="cats" disabled>
                            <option value="0">选择分类</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline  mt-8 ml-10">
                    <button class="layui-btn layuiadmin-btn-list order_search ml-10" lay-submit lay-filter="search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
    </blockquote>
<!-- 表操作 -->
<script type="text/html" id="toolBar">
    <div class="layui-btn-container" style="text-align: right;">
        <button lay-event="creatpurchase" class="layui-btn layui-btn-sm right">生成采购单</button>
        <button lay-event="seepurchase" class="layui-btn layui-btn-sm layui-btn-normal right">查看采购单</button>
    </div>
</script>
<table class="layui-table layuiadmin-page-table" lay-skin="line" id="itemslist" lay-filter="itemslist"></table>
<!-- 选供应商 -->
<script type="text/html" id="suppierChoose">
    <div lay-event="suppierChoose"  data-id="{{d.order_item_id}}">
        <select class="suppier_name" name="suppier_name{{d.order_item_id}}"  lay-filter="suppierChoose">
            <option value="">选择供应商</option>
            <option value="0">不指定</option>
        </select>
    </div>
 </script>
<script>
    layui.use(['form','layer', 'table', 'laytpl','laydate'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laytpl = layui.laytpl,
            laydate = layui.laydate;
 //供应商选择项
        function getsupplier() {
            var  supplier = [];
            $.get("/api/purchase/suppliercondition", function (data) {
                var select = '';
                supplier = data.data;
                for (var i in supplier) {
                    var its = '<option value="' + supplier[i].id + '">' + supplier[i].supplier_name + '</option>';
                    select += its;
                }
                $("select.suppier_name").append(select);
                form.render("select");
            }, 'json');
        }
        //请求条件
        var where={
            start_time:start,
            end_time:end,
            status:status,
            purchase_status:$('#purchase_status').val(),
            cart_id:$('#cat_id').val(),
            cart1: $("select[name='cats1']").val(),
            cart2: $("select[name='cats2']").val(),
            cart3: $("select[name='cats3']").val(),
        };
        itemslist(where);
        //渲染商品内容
        function itemslist(where){
            var tj={
                start_time:where.start_time,
                end_time:where.end_time,
                status:where.status,
                purchase_status:where.purchase_status,
                cart_id:where.cat_id,
            };
            table.render({
                elem: '#itemslist',
                url:'/api/fresh/orderItems',
                id:'itemslist',
                toolbar: '#toolBar',
                defaultToolbar: [],
                title: '生成采购单商品',
                where:tj,
                page:true,
                cols: [[
                    {type:'checkbox'},
                    {title: '商品图片', minWidth: 90,width: 90,height:60, align: "left",
                        templet:function (d) {
                            return '<img lay-event="maxImg" width="60" height="60" src="'+d.item_cover+'" />';
                        }},
                    {field: 'item_title', title: '商品名称', minWidth: 210,width: 240,height:60, align: 'left',style:'padding:0px;position:relative;margin:0;',
                        templet:function (d) {
                            var textc='<div style="height: 60px;width: 100%;min-width: 210px;">';
                            if(d.status==1){
                                textc+='<img style="position: absolute;top:0px;left:0px;" src="/img/dgicon.png" width="20" height="20"/>';
                            }
                            textc+= '<div style="width: 100%;min-width: 210px;height: 60px;overflow: auto;text-overflow: ellipsis;">'+d.item_title+'</div></div>';
                        return textc;
                        }},
                    {field: 'cat_name', title: '商品分类', minWidth:100, width: 120,align:"left"},
                    {field: 'sku_name', title: '商品规格', minWidth: 120, width: 140,align: 'left'},
                    {field: 'unit_name', title: '商品单位', minWidth: 100,width: 120, align: 'left'},
                    {field: 'total', title: '订购数', minWidth:100,width: 120, align:"left"},
                    {field: 'stock', title: '库存数', minWidth:100, width: 120,align:"left"},
                    {field: 'purchase_total',title: '采购数', minWidth:100, width: 120,align:"left",fixed:"right",templet: '#purchaseTotal'},
                    {field: 'suppier_name',title: '供应商', minWidth:120,width: 150, align:"left",fixed:"right",templet: '#suppierChoose'},
                    {title: '操作', minWidth:100, minHeight:60, templet:'#listBar',fixed:"right",align:"center"}
                ]],
                done:function (res, curr, count) {
                    $(".layui-table-main  tr").each(function (index ,val) {
                        $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
                    });
                    layui.each($('select'), function (index, item) {
                        var elem = $(item);
                        elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                    });
                     getsupplier();
                    $("#purchase_status").val(where.purchase_status);
                    $("#cat_id").val(where.cart_id);
                    $("select[name='cats1']").val(where.cart1);
                    $("select[name='cats2']").val(where.cart2);
                    $("select[name='cats3']").val(where.cart3);
                }
            });

        }
     //输入采购数的供应商
        var suppierItems=[];
        /*表格列表操作*/
        table.on('tool(itemslist)', function(obj){
            var data = obj.data, layEvent = obj.event;
            if(layEvent === 'info'){//明细
                layer.open({
                    type: 2
                    ,title: '关联客户信息'
                    ,area: ['80%', '80%']
                    ,offset:'rb'
                    ,maxmin: true
                    ,content: '/console/fresh/purchasecumtors?order_item_id='+data.order_item_id+'&start='+start+'&end='+end
                });
            }else if(layEvent === 'maxImg'){//大图
                layer.photos({
                    photos: {
                        "data": [{
                            "src": data.item_cover,
                        }]
                    },
                    shade: 0.7,
                    anim: 5
                });
            }else if (layEvent==='suppierChoose') {
                //监听锁定操作
                form.on('select(suppierChoose)', function(obj){
                    var val= obj.value;//suppier_name
                    var order_item_id= data.order_item_id;
                    data.suppier_id=val;
                    for (var i = 0; i < suppierItems.length; i++) {
                        if (suppierItems[i]['order_item_id'] == order_item_id) {
                            suppierItems[i] = {};
                            suppierItems[i] = data;
                            return suppierItems
                        }
                    }
                    suppierItems.push(data);
                });
            }
        });
//选中生成采购单
        table.on('toolbar(itemslist)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id).data;
            switch(obj.event){
                case 'creatpurchase':
                    if(checkStatus&&checkStatus.length>0){
                        for(var i = 0; i < checkStatus.length; i++){
                            var objs = checkStatus[i];
                            var num = checkStatus[i].order_item_id;
                            //采购数
                            for(var j = 0; j < purtotalItems.length; j++){
                                var aj = purtotalItems[j];
                                var n = purtotalItems[j].order_item_id;
                                if(n===num){
                                    checkStatus[i].purchase_total=purtotalItems[j].purchase_total;
                                }
                            }
                            //供应商选择
                            for(var iw = 0; iw < suppierItems.length; iw++){
                                var iws = suppierItems[iw];
                                var iwn = suppierItems[iw].order_item_id;
                                if(num===iwn){
                                    checkStatus[i].suppier_id=suppierItems[iw].suppier_id;
                                }
                            }
                        }
                        for(var v = 0; v < checkStatus.length; v++){
                            //判断提示有选中的商品采购数量为空；
                            if (!(checkStatus[v].purchase_total)) {
                                layer.msg('请确认输入生成采购单的采购数量!');
                                return false;
                            }
                            //判断提示选中商品有供应商没选
                            if (!(checkStatus[v].suppier_id)) {
                                layer.msg('请确认选择生成采购单的供应商!');
                                return false;
                            }
                        }
                    }else{ //没有选择采购商品时提醒；
                        layer.msg('请确认有选中的生成采购单商品!');
                        return false;
                    }
                    var params={items:checkStatus};
                    $.post('/api/fresh/addPurchase ',params, function (res) {
                        if (res.code === 0){
                            layer.msg(res.msg);
                            layer.open({
                                type: 2
                                ,title: '查看采购单'
                                ,area: ['100%', '100%']
                                ,offset:'lt'
                                ,maxmin: true
                                ,content: '/console/fresh/seepurchase?start='+start+'&end='+end
                            });
                        }
                    },'json');
                    break;
                case 'seepurchase':
                    layer.open({
                        type: 2
                        ,title: '查看采购单'
                        ,area: ['100%', '100%']
                        ,offset:'lt'
                        ,maxmin: true
                        ,content: '/console/fresh/seepurchase?start='+start+'&end='+end
                    });
                    break;
            }
        });
         //搜索结果
        form.on('submit(search)', function(data){
            where={
                start_time:start,
                end_time:end,
                status:status,
                purchase_status:data.field.purchase_status,
                cart_id:data.field.cat_id,
                cart1:data.field.cats1,
                cart2:data.field.cats2,
                cart3:data.field.cats3,
            };
            itemslist(where);
            return false;
        });
    });
</script>

以上内容仅供项目参考使用！