gaoyixia/application/nutrition/view/series_datum/form_test.html

<div class="think-box-shadow">
    <form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
        <div class="layui-card-body">

            <div class="layui-form-item">
                <label class="layui-form-label label-required">标题</label>
                <div class="layui-input-block">
                    <input name="title" maxlength="20"  value='{$vo.title|default=""}' placeholder="请输入标题" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label label-required">目录</label>
                <div class="layui-input-inline">
                    <select name="is_top" lay-filter ="is_top">
                        {foreach $datum_cate as $ck=>$cv}
                            {if !empty($vo.datum_cate) &&  $vo.datum_cate == $ck}
                                <option selected value="{$ck}">{$cv.title}</option>
                            {else}
                                <option  value="{$ck}">{$cv.title}</option>
                            {/if}
                        {/foreach}
                    </select>
                </div>
            </div>

            <input type="hidden" name="type" value="{$type}">

            <div class="layui-form-item">
                <label class="layui-form-label">资料</label>
                <div class="layui-input-block">
                    <table class="layui-table param">
                        <thead>
                        <tr>
                            <th class="text-left" width="10%">标题</th>
                            <th class="text-left" width="50%">文件</th>
                            <th class="text-center" width="10%">是否VIP</th>
                            <th class="text-center" width="10%">排序</th>
                            <th class="text-center"><a class="layui-btn layui-btn-sm layui-btn-normal"  onclick="add_param()">添 加</a></th>
                        </tr>
                        </thead>
                        <tbody class="no_html">
                        <!--{foreach $datum_url as $pk=>$param}-->
                        <tr class="param_index">
                            <td class="padding-0" >
                                <input class="layui-input  border-0" name="item_title[]" value="{$param.title|default=''}">
                                <input type="hidden" name="item_id[]" value="{$param.id|default=''}">
                            </td>
                            <td class="padding-0">
                                <input  class ='up_{$pk} item_url' name='item_url[]' type='hidden' value="{$param.url|default=''}">
                            </td>
                            <td class="padding-0">
                                <select class="layui-select " name="item_is_vip[]">
                                    <option {if $param.is_vip == 0}selected{/if} value="0">否</option>
                                    <option {if $param.is_vip == 1}selected{/if} value="1">是</option>
                                </select>
                            </td>
                            <td class="padding-0" >
                                <input class="layui-input  border-0" name="item_sort[]" value="{$param.sort|default=''}">
                            </td>
                            <td class="padding-0 text-center">
                                <a class="layui-btn layui-btn-sm layui-btn-danger del">删 除</a>
                            </td>
                        </tr>
                        <!--{/foreach}-->
                        </tbody>
                    </table>
                </div>
            </div>



            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                <div class="layui-upload-list" style="max-width: 1000px;">
                    <table class="layui-table">
                        <colgroup>
                            <col>
                            <col width="150">
                            <col width="260">
                            <col width="150">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>上传进度</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>



            {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
            <div class="layui-form-item text-center">
                <button class="layui-btn" type='submit'>保 存</button>
                <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定取消编辑吗？" data-close>取消编辑</button>
            </div>
        </div>
    </form>
    <script src="/static/plugs/layui/layui.all.js" charset="utf-8"></script>
    <script>

        window.form.render();

        layui.use(['upload', 'element', 'layer'], function(){
            var $ = layui.jquery
                ,upload = layui.upload
                ,element = layui.element
                ,layer = layui.layer;
            upload.render({
                elem: '#test3',
                url: '/api/upload/upload', //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。,accept: 'file', //普通文件,
                accept: 'file', //普通文件,
                done: function(res){
                    console.log(res)
                    $("input[name='datum_url']").val(res.data);
                    layer.msg(re.msg);
                }
            });



            //演示多文件列表
            var uploadListIns = upload.render({
                elem: '#testList'
                ,elemList: $('#demoList') //列表元素对象
                ,url: '/api/upload/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                ,accept: 'file'
                ,multiple: true
                ,number: 3
                ,auto: false
                ,bindAction: '#testListAction'
                ,choose: function(obj){
                    var that = this;
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                            ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        that.elemList.append(tr);
                        element.render('progress'); //渲染新加的进度条组件
                    });
                }
                ,done: function(res, index, upload){ //成功的回调
                    var that = this;
                    //if(res.code == 0){ //上传成功
                    var tr = that.elemList.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(3).html(''); //清空操作
                    delete this.files[index]; //删除文件队列已经上传成功的文件
                    return;
                    //}
                    this.error(index, upload);
                }
                ,allDone: function(obj){ //多文件上传完毕后的状态回调
                    console.log(obj)
                }
                ,error: function(index, upload){ //错误回调
                    var that = this;
                    var tr = that.elemList.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
                ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
                    element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
                }
            });


        });



        function get_ht(k) {
            var html = '<tr class="param_index">\n' +
                '                        <td class="padding-0" >\n' +
                '                            <input class="layui-input  border-0" name="item_title[]" value="">\n' +
                '                            <input type="hidden" class="layui-input  border-0" name="item_id[]" value="">\n' +
                '                        </td>\n' +
                '                        <td class="padding-0">\n' +
                "<input  class ='item_url up_"+k+"' name='item_url[]' type='hidden' value=''>"+
                '                        </td>\n' +
                '                        <td class="padding-0">\n' +
                '<select style="border: 0px" class="layui-select border-0" name="item_is_vip[]">' +
                '<option value="0">否</option>'+
                '<option value="1">是</option>'+
                '</select>'+
                '                        </td>\n' +
                '                        <td class="padding-0" >\n' +
                '                            <input class="layui-input  border-0" name="item_sort[]" value="">\n' +
                '                        </td>\n' +
                '                        <td class="padding-0 text-center">\n' +
                '                            <a class="layui-btn layui-btn-sm layui-btn-danger del"  >删 除</a>\n' +
                '                        </td>\n' +
                '                    </tr>';
            return html;
        }

        function add_param() {
            var knum = $('.no_html tr').length;
            var no_html = get_ht(knum);
            $(".no_html").append(no_html);
            window.form.render();
        }

        // 删除设置
        $(document).on('click',".del",function (){
            var index= $(".del").index(this);
            $(".param_index").eq(index).remove();
            window.form.render();
        })



    </script>
</div>