目錄

1.效果展示：

?編輯

2.建表：

3.html頁面

4.controller控制器

5.js

6.model

---

1.效果展示：

---

2.建表：

---

表名：fa_xxfb_config

/*Navicat Premium Data TransferSource Server         : rootSource Server Type    : MySQLSource Server Version : 50726Source Host           : localhost:3306Source Schema         : xxxTarget Server Type    : MySQLTarget Server Version : 50726File Encoding         : 65001Date: 11/12/2023 17:50:00
*/SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for fa_xxfb_config
-- ----------------------------
DROP TABLE IF EXISTS `fa_xxfb_config`;
CREATE TABLE `fa_xxfb_config`  (`id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID',`name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '配置項名稱',`value` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT '配置項值',PRIMARY KEY (`id`) USING BTREE,UNIQUE INDEX `name`(`name`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;SET FOREIGN_KEY_CHECKS = 1;

3.html頁面

---

<style>.upload-image {background: url('__CDN__/assets/img/plus.png') no-repeat center center;background-size: 30px 30px;height: 30px;width: 30px;border: 1px solid #ccc;}
</style>
<div class="row"><div class="col-md-6"><div class="box box-info"><!--<div class="panel-heading">等級配置</div>--><div class="panel-body"><div class="alert alert-success-light"><b>溫馨提示</b><br>這里是等級的配置<br>
<!--                    <b>下面的演示textarea為了便于調試，設置為可見的，實際使用中應該添加個hidden的class進行隱藏</b>--></div><form id="second-form" role="form" data-toggle="validator" method="POST" action=""><div class="form-group row"><label class="control-label col-xs-12">等級配置:</label><div class="col-xs-12"><table class="table fieldlist" data-template="gradetpl" data-name="row[grade]" id="first-table"><tr><td>{:__('名稱')}</td><td>{:__('累計收益')}</td><td>{:__('押金')}</td><td>{:__('圖標')}</td>
<!--                                    <td>{:__('狀態')}</td>--><td width="100"></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></td></tr></table><!--請注意實際開發中textarea應該添加個hidden進行隱藏--><textarea name="row[grade]" class="form-control hidden" cols="30" rows="5">{$grade.value}</textarea><script id="gradetpl" type="text/html"><tr class="form-inline"><td><input type="text" name="<%=name%>[<%=index%>][name]" class="form-control" size="15" value="<%=row.name%>" placeholder="名稱"/></td><td><input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" name="<%=name%>[<%=index%>][income]" class="form-control" size="15" value="<%=row.income%>" placeholder="累計收益"/></td><td><input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" name="<%=name%>[<%=index%>][deposit]" class="form-control" size="15" value="<%=row.deposit%>" placeholder="押金"/></td><td><input type="hidden" name="<%=name%>[<%=index%>][image]" id="c-image-<%=index%>" value="<%=row.image%>"><!--@formatter:off--><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('<%=Fast.api.cdnurl(row.image)%>')"<%}%>></button><!--@formatter:on--></td><!--<td><input type="hidden" name="<%=name%>[<%=index%>][state]" id="c-state-<%=index%>" class="form-control" style="width:50px" value="<%=row.state%>" placeholder="狀態"/><a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-state-<%=index%>" data-yes="1" data-no="0" ><i class="fa fa-toggle-on text-success <%if(row.state==0){%>fa-flip-horizontal text-gray<%}%> fa-2x"></i></a></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></div></div><div class="alert alert-danger-light"><b>什么是賬號等級？</b><br></div><div class="form-group row"><div class="col-xs-12"><table class="table fieldlist" data-template="grade_explaintpl" data-name="row[grade_explain]" id="second-table"><tr><td>{:__('賬號等級說明')}：</td></tr></table><!--請注意實際開發中textarea應該添加個hidden進行隱藏--><textarea name="row[grade_explain]" class="form-control editor" cols="30" rows="5">{$grade_explain.value}</textarea></div><div class="form-group row"><label class="control-label col-xs-12"></label><div class="col-xs-12"><button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button><button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button></div></div></form></div></div></div></div>

plus圖標：

4.controller控制器

---

<?phpnamespace app\admin\controller\xxfb;use app\common\controller\Backend;
use app\common\model\xxfb\Config;/*** 自定義表單示例** @icon   fa fa-table* @remark FastAdmin支持在控制器間跳轉,點擊后將切換到另外一個TAB中,無需刷新當前頁面*/
class Grade extends Backend
{public $grade = '';public $grade_explain = '';public function _initialize(){$this->grade = Config::where('name', 'grade')->find();$this->assign('grade', $this->grade);$this->grade_explain = Config::where('name', 'grade_explain')->find();$this->assign('grade_explain', $this->grade_explain);parent::_initialize();}public function index(){if ($this->request->isPost()) {$data = $this->request->post("row/a");if($data['grade']){if($this->grade){$this->grade->value = $data['grade'];$this->grade->save();}else{$arr = ['name' => 'grade', 'value' => $data['grade']];Config::create($arr);}}if($data['grade_explain']){if($this->grade_explain){$this->grade_explain->value = $data['grade_explain'];$this->grade_explain->save();}else{$arr = ['name' => 'grade_explain', 'value' => $data['grade_explain']];Config::create($arr);}}$this->success("提交成功");}return $this->view->fetch();}}

5.js

---

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {var Controller = {index: function () {Template.helper("Fast", Fast);$(document).on("fa.event.appendfieldlist", "#first-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) + "')");})});Form.api.bindevent($("form[role=form]"), function (data, ret) {// Layer.alert(data.data);});},};return Controller;
});

6.model

---

<?phpnamespace app\common\model\xxfb;use think\Model;/*** 配置*/
class Config Extends Model
{protected $table = 'fa_xxfb_config';}