【Fastadmin】根据Fieldlist键值组件做一个等级配置的完整示例

目录

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';}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/215237.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入Docker命令行:探索常用命令和实用技巧

Docker命令行界面是每个容器开发者的得力工具。在这篇文章中&#xff0c;将深入探讨一系列常用的Docker命令&#xff0c;以及一些实用技巧&#xff0c;通过更丰富的示例代码&#xff0c;帮助大家更全面地理解和运用Docker命令行工具。 1. Docker基本命令 1.1 镜像操作 深入了…

用 CSS 写一个渐变色边框的输入框

Using_CSS_gradients MDN 多渐变色输入框&#xff0c;群友问了下&#xff0c;就试着写了下&#xff0c;看了看 css 渐变色 MDN 文档&#xff0c;其实很简单&#xff0c;代码记录下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta ch…

使用FFMPEG转码,转单声道,转标准WAV,转PCM

本文为使用FFMPEG命令行的方式处理音频&#xff0c;来获取想要得到的音频文件。 零、使用命令行查看编码封装信息 格式&#xff1a;ffprobe.exe -show_format inputfile 例子&#xff1a;ffprobe.exe -show_format .\stereo_44_16bit.wav 运行结果为下图&#xff1a; 如图可…

西南科技大学数字电子技术实验四(基本触发器逻辑功能测试及FPGA的实现)预习报告

一、计算/设计过程 说明:本实验是验证性实验,计算预测验证结果。是设计性实验一定要从系统指标计算出元件参数过程,越详细越好。用公式输入法完成相关公式内容,不得贴手写图片。(注意:从抽象公式直接得出结果,不得分,页数可根据内容调整) (1)D触发器 特征方程: Q…

ChatGPT/GPT4应用:文本、论文、编程、绘图等,提高工作效率及科研项目开发能力

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

排序-选择排序与堆排序

文章目录 一、选择排序二、堆排序三、时间复杂度四、稳定性 一、选择排序 思想&#xff1a; 将数组第一个元素作为min&#xff0c;然后进行遍历与其他元素对比&#xff0c;找到比min小的数就进行交换&#xff0c;直到最后一个元素就停止&#xff0c;然后再将第二个元素min&…

【单调栈】【二分查找】LeetCode: 2454.下一个更大元素 IV

作者推荐 【动态规划】【广度优先】LeetCode2258:逃离火灾 本文涉及的基础知识点 二分查找算法合集 单调栈 题目 给你一个下标从 0 开始的非负整数数组 nums 。对于 nums 中每一个整数&#xff0c;你必须找到对应元素的 第二大 整数。 如果 nums[j] 满足以下条件&#xff…

音视频技术开发周刊 | 323

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 Meta牵头组建开源「AI复仇者联盟」&#xff0c;AMD等盟友800亿美元力战OpenAI英伟达 超过50家科技大厂名校和机构&#xff0c;共同成立了全新的人工智能联盟。以开源为旗号…

es6从url中获取想要的参数

第一种方法 很古老&#xff0c;通过 split 方法慢慢截取&#xff0c;可行是可行但是这个方法有一个弊端&#xff0c;因为 split 是分割成数组了&#xff0c;只能按照下标的位置获取值&#xff0c;所以就是参数位置一旦发生变化&#xff0c;那么获取到的值也就错位了 let user…

利用python将data:image/jpg; base64,格式数据转化下载为图片

在做爬虫爬取图片时&#xff0c;发现有的图片url是用“data:image/jpg;base64” 开头的&#xff0c;例如下图 部分开头样式如下&#xff1a; 1、data:image/jpg; base64, 2、data:image/png; base64, 3、data:image/webp;base64, 利用python进行代码进行图片下载&#xff0c;…

先进的Web3.0实战热门领域NFT项目几个总结分享

非同质化代币&#xff08;NFT&#xff09;的崛起为游戏开发者提供了全新的机会&#xff0c;将游戏内物品和资产转化为真正的可拥有和交易的数字资产。本文将介绍几个基于最先进的Web3.0技术实践的NFT游戏项目&#xff0c;并分享一些相关代码。 Axie Infinity&#xff08;亚龙无…

智能优化算法应用:基于猫群算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于猫群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于猫群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.猫群算法4.实验参数设定5.算法结果6.参考文献7.MA…

件夹和文件比较软件VisualDiffer mac功能介绍

VisualDiffer mac是一款运行在MacOS上的文件夹和文件快速比较工具。VisualDiffer可以对不同文件夹中文件或文档做出比较或者比较两个文件的路径。还可以通过UNIS diff命令快速、标准和可靠的比较出各类不同的文件夹和文件结果&#xff0c;使用不同的颜色直观地显示。 VisualDif…

酷滴科技出席浦发银行第七届国际金融科技创新大赛

12月7日&#xff0c;浦发银行全球金融科技创新大赛在上海展开决赛。本届大会以“科技金融&#xff0c;激发创新力量”为主题&#xff0c;聚焦金融行业数字化转型过程中的痛点与难点&#xff0c;旨在探讨新时代下金融科技的新角色、新机遇以及新挑战。酷滴科技CEO张沈分享了酷滴…

12.11

1.q&#xff0c;w&#xff0c;e亮led1&#xff0c;2&#xff0c;3&#xff1b; a&#xff0c;s&#xff0c;d灭led1&#xff0c;2&#xff0c;3&#xff1b; main.c #include "uar1.h"#include "led.h"void delay(int ms){int i,j;for(i0;i<ms;i){for…

SQL中的三值逻辑:TRUE、FALSE 和 UNKNOWN。

在SQL中&#xff0c;通常采用三值逻辑处理条件表达式的真值。这种逻辑是基于三种可能的真值状态&#xff1a;TRUE、FALSE 和 UNKNOWN。 TRUE&#xff08;真&#xff09;&#xff1a; 表示条件为真或成立。 FALSE&#xff08;假&#xff09;&#xff1a; 表示条件为假或不成立。…

7 Linux 内核移植

一、编译 ST 的 Linux 系统 1. 压缩源码 首先先下载 ST 官方源码&#xff0c;之前章节已经下载过了&#xff0c;直接输入以下命令&#xff1a; cd linux/atk-mpl/stm32mp1-openstlinux-5.4-dunfell-mp1-20-06-24/sources/arm-ostl-linux-gnueabi/linux-stm32mp-5.4.31-r0/ 然…

EasyExcel使用模板导出复杂Excel

1&#xff09;添加easyexlce的依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.0.0-beta1</version> </dependency>2&#xff09;添加excel模板文件 实现的效果&#xff1a;…

打包less

接HTML和css之后对less进行打包 1.在之前的文件夹里的src文件夹创建一个less文件 2.打开webpack——>中文文档——>Loader——>less—loader 3.复制下图代码到终端 4.复制下图内容到webpack.config.js脚本 5.在src里的js文件年引入less文件 6.在终端运行 npm run te…

助力工业生产质检,基于轻量级yolov5-seg开发构建工业场景下滚珠丝杠传动表面缺陷分割检测系统

AI赋能工业生产是一个强有力的方式&#xff0c;在我们之前的系列博文中也有很多相应的开发实践&#xff0c;感兴趣的胡都可以自行移步阅读&#xff0c;本文的核心思想就是想要基于轻量级的实例分割模型来开发构建工业场景下的滚珠丝杠传动表面缺陷分割检测系统&#xff0c;首先…