fastadmin 键值组件(Fieldlist) 图片上传与动态下拉

一、对应的js修改

1.引入selectpage ，注:这里一定要引入，不然会有bug

define(['jquery', 'bootstrap', 'backend', 'table', 'form','selectpage'], function ($, undefined, Backend, Table, Form,selectPage)

2.动态下拉与控制上传

add: function () {
    Controller.api.bindevent();
    Controller.api.fieldlistBind()  //控制动态下拉
    //控制上传
    $(document).on("fa.event.appendfieldlist", "#add-form .btn-append", function (e, obj) {
        Form.events.faupload(obj);
        Form.events.faselect(obj);
    })
},
edit: function () {
    Controller.api.bindevent();
    Controller.api.fieldlistBind()
    $(document).on("fa.event.appendfieldlist", "#edit-form .btn-append", function (e, obj) {
        Form.events.faupload(obj);
        Form.events.faselect(obj);
    })
},
api: {

    bindevent: function () {
        Form.api.bindevent($("form[role=form]"));

    },
    fieldlistBind: function () {
        $(document).on(
            "fa.event.appendfieldlist",
            ".btn-append",
            function (e, el) {// e:事件对象 el:当前行对象
                $(".selectpagea", el).selectPage({
                    eSelect: function (data, self) {
                        console.log(data,'hha')
                        // data 为当前选中列表项的接口数据对象
                        // ......实现逻辑
                        let index = $(self.elem.combo_input).data("index");// 获取行索引 页面需要加一个 data-index="<%=index%>"
                        let name = $(el).closest("table").data("name"); // 获取字段名称

                        let title =
                            "input[name='row[" + name + "][" + index + "][title]']"; // 组装好赋值文本元素选择器 给定义模板title赋值
                        $(title, el).val(data.name); // 赋值

                        let image =
                            "input[name='row[" + name + "][" + index + "][image]']"; // 组装好赋值文本元素选择器 给定义模板title赋值
                        $(image, el).val(data.imageurl); // 赋值


                        let market_price =
                            "input[name='row[" + name + "][" + index + "][price]']"; // 组装好赋值文本元素选择器 给定义模板title赋值
                        $(market_price, el).val(data.market_price); // 赋值
                        
                        
             
                        $("#c-image"+index).trigger("change")   //触发change事件，不然动态赋值的image不会显示图片


                    },
                    eAjaxSuccess: function (data) {
                        data.list =
                            typeof data.rows !== "undefined"
                                ? data.rows
                                : typeof data.list !== "undefined"
                                    ? data.list
                                    : [];
                        data.totalRow =
                            typeof data.total !== "undefined"
                                ? data.total
                                : typeof data.totalRow !== "undefined"
                                    ? data.totalRow
                                    : data.list.length;
                        return data;
                    },
                });

            }
        );
    }


}

注:这里动态赋值默认下拉只会返回data-field="变量" 设置的这个变量和id 这个时候如果需要让selectpag返回其它的值，比如我上面的图片和价格就需要修改 app\common\controlle\Backend 该控制器中找到 selectpage方法在584行左右加上代码 ，这里根据你的情况而定

if(isset($item['image'])){
    $result['imageurl'] = $item['image'];
}
if(isset($item['market_price'])){
    $result['market_price'] = $item['market_price'];
}

二、对应的html添加

<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Goods')}:</label>
    <div class="col-xs-12 col-sm-8">
        <table class="table table-responsive fieldlist" data-name="row[goods]" data-template="testtpl" data-tag="tr">
            <tr>
                <td>优惠券(与商品2选1)</td>
                <td>商品名称</td>
                <td>图片</td>
                <td>价格</td>
                <td>数量</td>
            </tr>
            <tr>
                <td colspan="5"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a></td>
            </tr>
            <textarea name="row[goods]" class="form-control hide" cols="30" rows="5">{}</textarea>
        </table>
    </div>
</div>

<!--定义模板，模板语法使用Art-Template模板语法-->
<script type="text/html" id="testtpl">
    <tr class="form-inline">
        <td><input name="row[<%=name%>][<%=index%>][coupon_id]"  data-source="coupon/coupon/index" data-field="name" data-index="<%=index%>"  class="form-control selectpagea" name="row[shop_ids]" type="text" value="<%=row['coupon_id']%>" size="10"></td>
        <td><input type="text" name="row[<%=name%>][<%=index%>][title]" class="form-control" value="<%=row['title']%>" size="5"></td>
        <td >
            <div style="display: flex" >
                <input id="c-image<%=index%>" class="form-control" size="15"  name="row[<%=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-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></button></span>
                </div>
                <span class="msg-box n-right" for="c-image<%=index%>"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-image<%=index%>"></ul>
        </td>
        <td><input type="text" name="row[<%=name%>][<%=index%>][price]" class="form-control" value="<%=row['price']%>" size="2"></td>
        <td><input type="text" name="row[<%=name%>][<%=index%>][num]" class="form-control" value="<%=row['num']%>" size="2"></td>
        <td><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>

小伙伴们!这样就完成了哦! QQ学习交流群:842167453,欢迎小伙伴加入一起学习。