【Fastadmin】系统配置自定义键值组件

目录

1.修改config表的extend字段为text类型，否则会出现长度不足报错

?2.添加配置

3.参考代码

图1代码：

图2代码：

图3代码：

html部分：

js部分：assets/js/general/config.js

参考文档:

---

FastAdmin是一款基于ThinkPHP框架开发的快速开发后台管理系统，其系统配置中的自定义键值组件是一个功能强大且实用的工具。该组件允许开发者在系统中自定义配置项，以便在运行时根据实际需要动态改变系统的行为和外观。

根据自己需求在系统配置里自定义设置多维键值组件
效果如图：

• 图1：

• ?图2：

• 图3：?

?以下是关于FastAdmin系统配置自定义键值组件的详细说明：

1.修改config表的extend字段为text类型，否则会出现长度不足报错

---

?2.添加配置

---

3.参考代码

---

图1代码：

<dl class="fieldlist" data-template="toppingtpl" data-name="row[{name}]">
    <dd>
        <ins>时长(h)</ins>
        <ins>金额(￥)</ins>
    </dd>
    <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a></dd>
    <textarea name="row[{name}]" class="form-control hide" cols="30" rows="5">{value}</textarea>
</dl>
<script id="toppingtpl" type="text/html">
    <dd class="form-inline">
        <ins><input type="number" name="<%=name%>[<%=index%>][hour]" min="0" class="form-control" value="<%=row.hour%>" placeholder="有效时长(h)"/></ins>
        <ins><input type="number" name="<%=name%>[<%=index%>][price]" min="0" class="form-control" value="<%=row.price%>" placeholder="金额"/></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>

图2代码：

<dl class="fieldlist" data-template="leveltpl" data-name="row[{name}]">
  <dd>
    <ins>会员名称</ins>
    <ins>会员等级</ins>
    <ins>会员价格</ins>
    <ins>有效天数</ins>
  </dd>
  <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a></dd>
  <textarea name="row[{name}]" class="form-control hide" cols="30" rows="5">{value}</textarea>
</dl>
<script id="leveltpl" type="text/html">
  <dd class="form-inline">
    <ins><input type="text" name="<%=name%>[<%=index%>][name]" class="form-control" value="<%=row.name%>" placeholder="会员名称" <%=row.name?'readonly':''%>/></ins>
    <ins><input type="number" name="<%=name%>[<%=index%>][value]" min="0" class="form-control" value="<%=row.value%>" placeholder="会员等级"  <%=row.value?'readonly':''%>/></ins>
    <ins><input type="number" name="<%=name%>[<%=index%>][price]" min="0" class="form-control" value="<%=row.price%>" placeholder="会员价格"/></ins>
    <ins><input type="number" name="<%=name%>[<%=index%>][day]" min="0" class="form-control" value="<%=row.day%>" placeholder="有效天数"/></ins>
    <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
  </dd>
</script>

图3代码：

html部分：

<style>
    .upload-image {
        background: url('/assets/img/plus.png') no-repeat center center;
        background-size: 30px 30px;
        height: 30px;
        width: 30px;
        border: 1px solid #ccc;
    }
</style>
<dl class="fieldlist" data-template="leveltpl" data-name="row[{name}]" id="second-table">
    <dd>
        <ins>标题名称</ins>
        <ins>描述文字</ins>
        <ins>icon地址</ins>
        <ins>按钮文字</ins>
        <ins>跳转地址</ins>
    </dd>
    <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a></dd>
    <textarea name="row[{name}]" class="form-control hide" cols="30" rows="5">{value}</textarea>
</dl>
<script id="leveltpl" type="text/html">
    <dd class="form-inline">
        <ins>
            <input type="text" name="row[<%=name%>][<%=index%>][name]" class="form-control" value="<%=row['name']%>" placeholder="标题名称" size="10">
        </ins>

        <ins>
            <input type="text" name="row[<%=name%>][<%=index%>][text]" class="form-control" value="<%=row['text']%>" placeholder="描述文字" size="10">
        </ins>
        <ins>
            <input type="hidden" name="<%=name%>[<%=index%>][image]" id="c-image-<%=index%>" value="<%=row.image%>">
            <button type="button" id="faupload-image" class="btn btn-danger faupload upload-image" data-input-id="c-image-<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" <%if(row.image){%>style="background-image: url('<%=row.image%>')"<%}%>></button>
        </ins>
        <ins>
            <input type="text" name="row[<%=name%>][<%=index%>][gowhat]" class="form-control" value="<%=row['gowhat']%>" placeholder="按钮文字" size="10">
        </ins>
        <ins>
            <input type="text" name="row[<%=name%>][<%=index%>][pages]" class="form-control" value="<%=row['pages']%>" placeholder="跳转地址" size="10">
        </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>

js部分：assets/js/general/config.js

index: function () {

    // 自定义上传图片
    $(document).on("fa.event.appendfieldlist", "#second-table .btn-append", function (e, obj) {
        //绑定上传组件
        Form.events.faupload(obj);
        //上传成功回调事件，变更按钮的背景
        $(".upload-image", obj).data("upload-success", function (data) {
            $(this).css("background-image", "url('" + Fast.api.cdnurl(data.url) + "')");
        })
    });
}

参考文档:

---

• 键值组件(Fieldlist) - FastAdmin框架文档 - FastAdmin开发文档
• 系统配置自定义键值组件 - FastAdmin问答社区
• 后台系统配置“自定义”键值组件 - FastAdmin问答社区