主页

fastadmin的fieldlist自定义上传图片和选择图片

罗镜里青鸾   IP属地: 青海
0 点赞 0阅读 1638

效果图


html:

<div class="form-group row">
                        <label class="control-label col-xs-12 col-sm-2">权益说明:</label>
                        <div class="col-xs-12 col-sm-8">
                            <dl class="fieldlist" data-template="eventtpl" data-name="row[json]">
                                <dd>
                                    <ins>说明</ins>
                                    <ins>上传图片</ins>
                                </dd>
                                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append btn-append-json"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
                                <!--请注意 dd和textarea间不能存在其它任何元素,实际开发中textarea应该添加个hidden进行隐藏-->
                                <textarea name="row[json]" class="form-control hide" cols="30" rows="5" hidden="">{$row.json}</textarea>
                            </dl>

                            <script id="eventtpl" type="text/html">
                                <dd class="form-inline">
                                    
                                    <ins><input type="text" name="<%=name%>[<%=index%>][name]" class="form-control" value="<%=row.name%>" placeholder="名称"/></ins>
<!--                                    //图片上传按钮-->
                                    <ins style="width: 50%;">
                                            <div class="input-group">
                                                <input id="c-jsonimage<%=index%>" class="form-control" size="50" name="<%=name%>[<%=index%>][image]" type="text" value="<%=row.image%>">
                                                <div class="input-group-addon no-border no-padding">
                                                    <span><button type="button" id="faupload-image<%=index%>" class="btn btn-danger faupload" data-input-id="c-jsonimage<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-jsonimage<%=index%>"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                               
                                                   <span><button type="button" id="fachoose-image<%=index%>" class="btn btn-primary fachoose" data-input-id="c-jsonimage<%=index%>" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                                </div>
                                                <span class="msg-box n-right" for="c-jsonimage<%=index%>"></span>
                                            </div>
                                            <ul class="row list-inline faupload-preview" id="p-jsonimage<%=index%>"></ul>

                                    </ins>


                                    <!--下面的两个按钮务必保留-->
                                    <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>
                                </dd>
                            </script>
                        </div>
    </div>
js:
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'user/equity/index' + location.search,
                    // add_url: 'user/equity/add',
                    edit_url: 'user/equity/edit',
                    // del_url: 'user/equity/del',
                    // multi_url: 'user/equity/multi',
                    // import_url: 'user/equity/import',
                    table: 'user_equity',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'name', title: __('Name'), operate: 'LIKE'},
                        {field: 'discount', title: __('Discount')},
                        {field: 'image', title: __('Image'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.image},
                        {field: 'remark', title: __('Remark'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content},
                        {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
                        {field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            $(document).on('fa.event.appendfieldlist','#add-form .btn-append-json',function(e,obj){
                    Form.events.faupload(obj)
                    Form.events.plupload(obj);
                    Form.events.faselect(obj)
            })
            Controller.api.bindevent();
        },
        edit: function () {
            $(document).on('fa.event.appendfieldlist','#edit-form .btn-append-json',function(e,obj){
                    Form.events.faupload(obj)
                    Form.events.faselect($("form"))
                    // Form.events.fachoose(obj)
            })
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});




© 著作权归作者所有,转载或内容合作请联系作者