fastadmin表单中二维数组组件+图片上传

news2024/9/25 9:39:39

记录：fastadmin表单中二维数组组件+图片上传

add.html代码

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Quanyi')}:</label>
        <div class="col-xs-12 col-sm-10">
            <style>
                .plupload-preview li, .faupload-preview li{
                    margin-top:0px;
                }
                .plupload-preview a.btn-trash{
                    width:20px;
                    margin-top: -35px;
                    margin-left: 40px;
                }
                .plupload-preview a:first-child, .faupload-preview a:first-child{
                    width:40px;
                    height:40px;
                    padding: 0;
                }
                .plupload-preview a img, .faupload-preview a img{
                    width:40px;
                    height:40px;
                }
            </style>
            <table class="table fieldlist" data-name="row[quanyi]" data-template="row[quanyi]tpl">
                <tr>
                    <td>标题</td>
                    <td>介绍</td>
                    <td>图标</td>
                    <td>选择图标</td>
                    <td width="90">{:__('Operate')}</td>
                </tr>
                <tr>
                    <td colspan="5">
                        <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a>
                        <textarea name="row[quanyi]" class="form-control hide" cols="30" rows="5">
                            [{"title":"尊贵标识","intro":"","image":"/uploads/20240826/a04ebfee74aa75dc8503638860c7a018.jpg"},{"title":"专属优惠券","intro":"","image":""},{"title":"消费返多倍积分","intro":"","image":""},{"title":"会员商品","intro":"","image":""}]
                        </textarea>
                    </td>
                </tr>
            </table>
            <script type="text/html" id="row[quanyi]tpl">
                <tr>
                    <td><input type="text" name="<%=name%>[<%=index%>][title]" class="form-control" value="<%=row.title%>"/></td>
                    <td><input type="text" name="<%=name%>[<%=index%>][intro]" class="form-control" value="<%=row.intro%>"/></td>
                    <td>
                        <input id="c-image<%=index%>" class="form-control" name="<%=name%>[<%=index%>][image]" style="display: none!important;" type="text" value="<%=row.image%>">
                        <div class="row list-inline plupload-preview spe_img_one" id="p-image<%=index%>"></div>
                    </td>
                    <td>
                        <div class="input-group-addon no-border no-padding">
                            <span><button type="button" id="plupload-image<%=index%>" class="btn btn-danger plupload" data-input-id="c-image<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image<%=index%>"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                            <span><button type="button" id="fachoose-image<%=index%>" class="btn btn-primary fachoose faselect" data-input-id="c-image<%=index%>" data-mimetype="image/*" data-preview-id="p-image<%=index%>" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                        </div>
                    </td>
                    <td width="90">
                        <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                        <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                    </td>
                </tr>
            </script>

        </div>
    </div>

js代码

    add: function () {
    	// 此处必加，用于表单中二维数组组件中的图片上传和选择按钮生效
        $(document).on("fa.event.appendfieldlist", '[data-name="row[quanyi]"] .btn-append', function(e, obj){
            Form.events.faupload(obj);  //绑定上传事件
            Form.events.faselect(obj);  //绑定选择事件
        });
        Controller.api.bindevent();
    },

edit.html代码

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Quanyi')}:</label>
        <div class="col-xs-12 col-sm-10">
            <style>
                .plupload-preview li, .faupload-preview li{
                    margin-top:0px;
                }
                .plupload-preview a.btn-trash{
                    width:20px;
                    margin-top: -35px;
                    margin-left: 40px;
                }
                .plupload-preview a:first-child, .faupload-preview a:first-child{
                    width:40px;
                    height:40px;
                    padding: 0;
                }
                .plupload-preview a img, .faupload-preview a img{
                    width:40px;
                    height:40px;
                }
            </style>
            <table class="table fieldlist" data-name="row[quanyi]" data-template="row[quanyi]tpl">
                <tr>
                    <td>标题</td>
                    <td>介绍</td>
                    <td>图标</td>
                    <td>选择图标</td>
                    <td width="90">{:__('Operate')}</td>
                </tr>
                <tr>
                    <td colspan="5">
                        <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a>
                        <textarea name="row[quanyi]" class="form-control hide" cols="30" rows="5">{$row.quanyi|htmlentities}</textarea>
                    </td>
                </tr>
            </table>
            <script type="text/html" id="row[quanyi]tpl">
                <tr>
                    <td><input type="text" name="<%=name%>[<%=index%>][title]" class="form-control" value="<%=row.title%>"/></td>
                    <td><input type="text" name="<%=name%>[<%=index%>][intro]" class="form-control" value="<%=row.intro%>"/></td>
                    <td>
                        <input id="c-image<%=index%>" class="form-control" name="<%=name%>[<%=index%>][image]" style="display: none!important;" type="text" value="<%=row.image%>">
                        <div class="row list-inline plupload-preview spe_img_one" id="p-image<%=index%>"></div>
                    </td>
                    <td>
                        <div class="input-group-addon no-border no-padding">
                            <span><button type="button" id="plupload-image<%=index%>" class="btn btn-danger plupload" data-input-id="c-image<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image<%=index%>"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                            <span><button type="button" id="fachoose-image<%=index%>" class="btn btn-primary fachoose faselect" data-input-id="c-image<%=index%>" data-mimetype="image/*" data-preview-id="p-image<%=index%>" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                        </div>
                    </td>
                    <td width="90">
                        <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                        <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                    </td>
                </tr>
            </script>

        </div>
    </div>

js代码

    edit: function () {
        // 此处必加，用于表单中二维数组组件中的图片上传和选择按钮生效
        $(document).on("fa.event.appendfieldlist", '[data-name="row[quanyi]"] .btn-append', function(e, obj){
            Form.events.faupload(obj);  //绑定上传事件
            Form.events.faselect(obj);  //绑定选择事件
        });
        Controller.api.bindevent();
    },