zoukankan      html  css  js  c++  java
  • Layui table嵌套select

    <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: '类别',  '25%', templet: '#selectTpl',
                                           }
                                        , { field: 'name',  '25%', title: '名称', align: 'center', rowspan: '1' }
                                        , { field: 'unit',  '25%', title: '单位', align: 'center', rowspan: '1' }
                                        , { field: 'price',  '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>
  • 相关阅读:
    基于matlab的退化图像复原(一)------图像退化处理
    风洞稳定小球系统(二)----- 基于Arduino实现的PID距离PWM控制
    风洞稳定小球系统(一)----- 基于MATLAB实现的Kalman filter滤波距离检测
    matlab基本粒子群算法实现(四)
    使用SC命令时注意事项
    abiword Namespace List
    Improving the AbiWord's Piece Table
    Font Rending 的 Hint 机制对排版的影响
    abiword Related Pages
    跟我一起写 Makefile
  • 原文地址:https://www.cnblogs.com/yyjspace/p/13066603.html
Copyright © 2011-2022 走看看