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

目录

1.效果展示:

​编辑

2.建表:

3.html页面

4.controller控制器

5.js

6.model


1.效果展示:


2.建表:


表名:fa_xxfb_config

/*
 Navicat Premium Data Transfer

 Source Server         : root
 Source Server Type    : MySQL
 Source Server Version : 50726
 Source Host           : localhost:3306
 Source Schema         : xxx

 Target Server Type    : MySQL
 Target Server Version : 50726
 File Encoding         : 65001

 Date: 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控制器


<?php

namespace 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


<?php

namespace app\common\model\xxfb;

use think\Model;

/**
 * 配置
 */
class Config Extends Model
{
    protected $table = 'fa_xxfb_config';

}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

WPS Office JS宏实现批量处理Word中的标题和正文的样式

该篇讲解下word文档中的标题和正文批量修改样式&#xff0c;如下图&#xff1a; 前面一篇已讲解了WPS Office宏编辑器操作方法&#xff0c;这里不细讲了&#xff0c;如有不清楚可以查看该篇&#xff1a;https://blog.csdn.net/jiciqiang/article/details/134653657?spm1001.20…

制作蓝牙小车(一)

制作控制蓝牙小车app 想制作一个蓝牙小车&#xff0c;通过手机app程序操控小车运行&#xff0c;制作分2个部分&#xff08;app制作&#xff0c;蓝牙小车硬件以及程序制作&#xff09;&#xff0c;先完成第一个部分app制作&#xff0c;本次app是通过androidstudio软件来制作安卓…

私域爆款案例拆解-元气森林

一、背景调研 二、引流策略 三、私域运营策略

第十一章 React 封装自定义组件

一、专栏介绍 &#x1f30d;&#x1f30d; 欢迎加入本专栏&#xff01;本专栏将引领您快速上手React&#xff0c;让我们一起放弃放弃的念头&#xff0c;开始学习之旅吧&#xff01;我们将从搭建React项目开始&#xff0c;逐步深入讲解最核心的hooks&#xff0c;以及React路由、…

客户案例:EDLP在央国企邮件数据合规中的价值与优势

客户背景 某机械制造企业&#xff0c;作为动力设备领域的领军企业&#xff0c;专门从事动力设备的研发、制造与销售。凭借丰富的经验与卓越的技术实力&#xff0c;该企业致力于深度研究动力设备的核心技术&#xff0c;为客户提供高效且可靠的解决方案。 客户需求 作为企业健康…

4 向微服务架构转变

文章目录 小型单体系统为什么选择小型单体系统微服务与生俱来的问题小型单体系统适用于小团队拥抱重构 规划未来拆分的小型单体应用程序新需求和游戏化用户故事游戏化&#xff1a;积分、徽章和排行榜 转向微服务独立的工作流程水平可伸缩性细粒度的非功能需求其他优势劣势 架构…

【带头学C++】----- 九、类和对象 ---- 9.10 C++设计模式之单例模式设计

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️麻烦您点个关注&#xff0c;不迷路❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ 目 录 9.10 C设计模式之单例模式设计 举例说明&#xff1a; 9.10 C设计模式之单例模式设计 看过我之前的文章的&#xff0c;简单讲解过C/Q…

微信小程序---页面导航

1.声明式导航 &#xff08;1&#xff09;跳转到tabBar &#xff08;2&#xff09;跳转到非tabBar 注意&#xff0c;这个open-type"navigate"可以省略 &#xff08;3&#xff09;后退式导航 注意&#xff0c;如果只是后退到上一个页面&#xff0c;可以省略delta属性…

C++指针常量与常量指针

指针常量 const int * ptr new int(10); // 1&#xff09;常量指针 指针指向一个常量即指向的值不可改变 指针常量是指这个指针是一个常量&#xff0c;即指针的指向(地址)不可改变&#xff0c;但是地址对应的值是可以改变的。 常量指针 int * const ptr2 new int(20); // …

遥感图像之多模态检索AMFMN(支持关键词、句子对图像的检索)论文阅读、环境搭建、模型测试、模型训练

一、论文阅读 1、摘要背景 遥感跨模态文本图像检索以其灵活的输入和高效的查询等优点受到了广泛的关注。然而&#xff0c;传统的方法忽略了遥感图像多尺度和目标冗余的特点&#xff0c;导致检索精度下降。为了解决遥感多模态检索任务中的多尺度稀缺性和目标冗余问题&#xff…

机器学习硬件十年:性能变迁与趋势

本文分析了机器学习硬件性能的最新趋势&#xff0c;重点关注不同GPU和加速器的计算性能、内存、互连带宽、性价比和能效等指标。这篇分析旨在提供关于ML硬件能力及其瓶颈的全面视图。本文作者来自调研机构Epoch&#xff0c;致力于研究AI发展轨迹与治理的关键问题和趋势。 &…

RocketMQ源码

RocketMQ的核心三流程 启动流程 RocketMQ服务端由两部分组成NameServer和Broker&#xff0c;NameServer是服务的注册中心&#xff0c;Broker会把自己的地址注册到NameServer&#xff0c;生产者和消费者启动的时候会先从NameServer获取Broker的地址&#xff0c;再去从Broker发…

山东烟台一汽配城发生火灾 探索富维AI神器如何及时报警

近日&#xff0c;山东烟台一汽配城发生火灾&#xff0c;引起了广泛关注。火灾虽然被及时控制&#xff0c;但这一事件再次提醒我们&#xff0c;火灾预防的重要性不容忽视。在这一背景下&#xff0c;北京富维图像公司的FIS智能图像识别系统为我们提供了新的防范措施。 这一系统利…

使用人工智能优化常见业务流程

在现代商业环境中&#xff0c;人工智能(AI)正在改变企业的运营方式。将人工智能集成到业务流程中可以提高效率和准确性&#xff0c;从而节省大量时间和成本。 这使员工能够专注于更具战略性的任务。人工智能在商业中的应用范围从自动化日常任务到提供高级分析&#xff0c;以做…

Vue H5项目,怎么引入uni.webview sdk,调用uni postMessage实现手机蓝牙连接打印功能(uniapp)

前言 目前公司Vue H5项目&#xff0c;用webview打包成APP&#xff0c;现产品提出这样打包出来的app运行较慢&#xff0c;需要用uniapp方式&#xff08;即使用HBuilder编辑器来打包H5&#xff09;来打包&#xff0c;那需要的基座就不是安卓的基座而是uniapp的基座&#xff0c;而…

Appium 自动化测试从入门到精通,零基础也能听懂

1.Appium介绍 1&#xff0c;appium是开源的移动端自动化测试框架&#xff1b; 2&#xff0c;appium可以测试原生的、混合的、以及移动端的web项目&#xff1b; 3&#xff0c;appium可以测试ios&#xff0c;android应用&#xff08;当然了&#xff0c;还有firefoxos&#xff09…

记一次mybatis-plus的argument type mismatch报错

起初以为是boolean和数据库的tinyint不匹配导致&#xff0c;找了一天之后想起来把整个lambda注释掉发现list直接无法运行&#xff0c;说明问题不在boolean List<BmsBillboard> list bmsBillboardService.list(new LambdaQueryWrapper<BmsBillboard>().eq(BmsBillb…

盘点六款颇具潜力的伪原创AI工具

写作作为信息传递的主要媒介&#xff0c;在庞大的信息海洋中&#xff0c;为了在激烈的竞争中脱颖而出&#xff0c;伪原创AI工具成为越来越多写手的神秘利器。在本文中&#xff0c;我们将深入盘点六款颇具潜力的伪原创AI工具&#xff0c;为你揭开它们神秘的面纱。 1. 文心一言 …

【android开发-17】android中SQLite数据库CRUD详细介绍

1&#xff0c;SQLite数据库读写的操作步骤 在Android中&#xff0c;对SQLite数据库的操作主要包括以下步骤&#xff1a; 1&#xff0c;创建数据库&#xff1a;首先&#xff0c;您需要创建一个SQLite数据库。这可以通过在Android项目中创建一个新的类来实现&#xff0c;该类继…

操作系统内部机制学习

切换线程时需要保存什么 函数需要保存吗&#xff1f;函数在Flash上&#xff0c;不会被破坏&#xff0c;无需保存。函数执行到了哪里&#xff1f;需要保存吗&#xff1f;需要保存。全局变量需要保存吗&#xff1f;全局变量在内存上&#xff0c;无需保存。局部变量需要保存吗&am…