首页 > 其他 > 详细

Layui table嵌套select

时间:2020-06-08 18:20:10      阅读:268      评论:0      收藏:0      [点我收藏+]
<style>
    .layui-table-cell, .layui-table-tool-panel li {
overflow: visible !important;
}

.layui-form-select .layui-input {
height: 30px;
}

.layui-table-box {
overflow: visible !important;
}

.layui-table-body {
overflow: visible !important;
}
</style>

<div>
        <table class="marryMaterialTable" id="marryfoodtable" lay-filter="filter"></table>
    </div>

<script type="text/html" id="selectTpl">
    <select name="type" class="layui-input type" lay-filter="type"></select>
</script>
<script type="text/javascript">
var materialdata=null;
    function marryFood() {
        var files = $(#choose).val();
        var suffix = files.substring(files.lastIndexOf(".") + 1, files.length);
        if (suffix == "xls" || suffix == "xlsx") {
            var index;
            var formData = new FormData($("#form_marry")[0]);
            $.ajax({
                type: "post",
                url: /api/food/marrymaterial,
                cache: false,
                data: formData,
                dataType: "json",
                contentType: false,
                processData: false,
                beforeSend: function (XMLHttpRequest) {
                    index = layer.load(2);
                },
                success: function (data) {
                    layer.close(index);
                    if (data.success==undefined) {
                        materialdata = data.data;
                        var page;
                        layui.use([element, table, layer, form], function () {
                            var element = layui.element;
                            table = layui.table;
                            layer = layui.layer;
                            form = layui.form;
                            element.init();
                            table.render({
                                elem: .marryMaterialTable,
                                cols: [[
                                       {
                                           field: type_id, title: 类别, width: 25%, templet: #selectTpl,
                                       }
                                    , { field: name, width: 25%, title: 名称, align: center, rowspan: 1 }
                                    , { field: unit, width: 25%, title: 单位, align: center, rowspan: 1 }
                                    , { field: price, width: 25%, title: 单价, align: center, rowspan: 1 }
                                ]],
                                data: materialdata,
                                page: true,
                                done: function (res, curr, count) {
                                    getMaterislType();
                                    page = curr;
                      //表格重载的时候 回显下拉框的数据
                                    $(tr).each(function(e){
                                        var $cr=$(this);
                                        var dataindex = $cr.attr("data-index");
                                        $.each(res.data,function(index,value){
                                            if(value.LAY_TABLE_INDEX==dataindex){
                                                $cr.find(input).val(value.type_name);
                                            }
                                        }); 
        
                                    });
                                },
                                id: "marryMaterialTable"
                            });
                  //下拉框输入值改变时触发 给表格赋值
                            form.on(select(type), function (data) {
                                var elem = $(data.elem);
                                var trElem = elem.parents(tr);
                                var index = trElem.data(index) + (page-1) * 10;
                                materialdata[index][type_id] = data.value;
                                materialdata[index][type_name] = elem.find(option:selected).text();
                            });
                        });

                    }
                    else
                        layer.msg(data.message);
                },
                error: function (result, status) {
                    layer.msg(服务器连接失败);
                }
            });
        }
        else {
            layer.msg("请选择excel文件!");
        }

    }

function getMaterislType() {
        $.ajax({
            type: "Get",
            contentType: "application/json;charset=utf-8",
            url: "/api/food/materialtype",
            data: {
                type: ""
            },
            async: false,
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    var html = "";
                    $.each(data, function (index, item) {
                        html += "<option value=‘" + item.id + "‘>" + item.name + "</option>";
                    });
                    $(.type).html(html);
                    form.render();
                }
            }
        });
        
    }
</script>

 

Layui table嵌套select

原文:https://www.cnblogs.com/yyjspace/p/13066603.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!