【Fastadmin】一个完整的轮播图功能示例

目录

1.效果展示：

列表

添加及标记页面同

2.建表：

3.时候crud一键生成并创建控制器

4.html页面

add.html

edit.html

index.php

5.js页面

6.小知识点

1.效果展示：

  • 列表

  • 添加及标记页面同

2.建表：

  表名：fa_xxfb_banner

/*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: 08/12/2023 17:52:34
*/SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for fa_xxfb_banner
-- ----------------------------
DROP TABLE IF EXISTS `fa_xxfb_banner`;
CREATE TABLE `fa_xxfb_banner`  (`id` int(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID',`title` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '换灯标题',`image` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '换灯图片',`site` enum('1','2') CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '1' COMMENT '位置:1=首页,2=任务大厅',`jump_type_list` enum('0','1','2','3') CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '跳转方式:0=不跳转,1=内链,2=外链,3=自定义内容',`content` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT '自定义内容',`switch` tinyint(5) NULL DEFAULT 1 COMMENT '开关:0=关,1=开',`weigh` int(16) NULL DEFAULT NULL COMMENT '权重',`createtime` bigint(16) NULL DEFAULT NULL COMMENT '创建时间',`jump_url` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '跳转链接',PRIMARY KEY (`id`) USING BTREE,INDEX `site_switch`(`site`, `switch`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '轮播图' ROW_FORMAT = Dynamic;SET FOREIGN_KEY_CHECKS = 1;

3.时候crud一键生成并创建控制器

4.html页面

  • add.html
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action=""><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Site')}:</label><div class="col-xs-12 col-sm-8"><select  id="c-site" data-rule="required" class="form-control selectpicker" name="row[site]">{foreach name="siteList" item="vo"}<option value="{$key}" {in name="key" value="1"}selected{/in}>{$vo}</option>{/foreach}</select></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label><div class="col-xs-12 col-sm-8"><input id="c-title" class="form-control" name="row[title]" type="text" data-rule="required"></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label><div class="col-xs-12 col-sm-8"><div class="input-group"><input id="c-image" class="form-control" size="50" name="row[image]" type="text" data-rule="required"><div class="input-group-addon no-border no-padding"><span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span><span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span></div><span class="msg-box n-right" for="c-image"></span></div><ul class="row list-inline faupload-preview" id="p-image"></ul></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Jump_type_list')}:</label><div class="col-xs-12 col-sm-8"><select  id="c-jump_type_list" class="form-control selectpicker" name="row[jump_type_list]">{foreach name="jumpTypeListList" item="vo"}<option value="{$key}" {in name="key" value=""}selected{/in}>{$vo}</option>{/foreach}</select></div></div><div class="form-group" id="content_show_hide"><label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label><div class="col-xs-12 col-sm-8"><textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50" data-rule=""></textarea></div></div><div class="form-group" id="jump_url_show_hide"><label class="control-label col-xs-12 col-sm-2">{:__('Jump_url')}:</label><div class="col-xs-12 col-sm-8"><input id="c-jump_url" class="form-control" name="row[jump_url]" type="text" data-rule=""></div></div><div class="form-group layer-footer"><label class="control-label col-xs-12 col-sm-2"></label><div class="col-xs-12 col-sm-8"><button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button><button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button></div></div>
</form>
  • edit.html
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action=""><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Site')}:</label><div class="col-xs-12 col-sm-8"><select  id="c-site" data-rule="required" class="form-control selectpicker" name="row[site]">{foreach name="siteList" item="vo"}<option value="{$key}" {in name="key" value="$row.site"}selected{/in}>{$vo}</option>{/foreach}</select></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label><div class="col-xs-12 col-sm-8"><input id="c-title" class="form-control" name="row[title]" type="text" value="{$row.title|htmlentities}" data-rule="required"></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label><div class="col-xs-12 col-sm-8"><div class="input-group"><input id="c-image" class="form-control" size="50" name="row[image]" type="text" value="{$row.image|htmlentities}" data-rule="required"><div class="input-group-addon no-border no-padding"><span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span><span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span></div><span class="msg-box n-right" for="c-image"></span></div><ul class="row list-inline faupload-preview" id="p-image"></ul></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Jump_type_list')}:</label><div class="col-xs-12 col-sm-8"><select  id="c-jump_type_list" class="form-control selectpicker" name="row[jump_type_list]">{foreach name="jumpTypeListList" item="vo"}<option value="{$key}" {in name="key" value="$row.jump_type_list"}selected{/in}>{$vo}</option>{/foreach}</select></div></div><div class="form-group" id="content_show_hide"><label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label><div class="col-xs-12 col-sm-8"><textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50">{$row.content|htmlentities}</textarea></div></div><div class="form-group" id="jump_url_show_hide"><label class="control-label col-xs-12 col-sm-2">{:__('Jump_url')}:</label><div class="col-xs-12 col-sm-8"><input id="c-jump_url" class="form-control" name="row[jump_url]" type="text" value="{$row.jump_url|htmlentities}"></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Switch')}:</label><div class="col-xs-12 col-sm-8"><select  id="c-switch" class="form-control selectpicker" name="row[switch]">{foreach name="switchList" item="vo"}<option value="{$key}" {in name="key" value="$row.switch"}selected{/in}>{$vo}</option>{/foreach}</select></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label><div class="col-xs-12 col-sm-8"><input id="c-weigh" class="form-control" name="row[weigh]" type="number" value="{$row.weigh|htmlentities}"></div></div><div class="form-group layer-footer"><label class="control-label col-xs-12 col-sm-2"></label><div class="col-xs-12 col-sm-8"><button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button><button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button></div></div>
</form>
  • index.php
<div class="panel panel-default panel-intro"><div class="panel-heading">{:build_heading(null,FALSE)}<ul class="nav nav-tabs"><li class="active"><a href="#all" data-toggle="tab">{:__('All')}</a></li>{foreach name="siteList" item="vo"}<li><a href="#{$key}" data-toggle="tab">{$vo}</a></li>{/foreach}</ul></div><div class="panel-body"><div id="myTabContent" class="tab-content"><div class="tab-pane fade active in" id="one"><div class="widget-body no-padding"><div id="toolbar" class="toolbar"><a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a><a href="javascript:;" class="btn btn-success btn-add {:$auth->check('xxfb/banner/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a><a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('xxfb/banner/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a><a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('xxfb/banner/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a><div class="dropdown btn-group {:$auth->check('xxfb/banner/multi')?'':'hide'}"><a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a><ul class="dropdown-menu text-left" role="menu"><li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="switch=1"><i class="fa fa-eye"></i> 开</a></li><li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="switch=0"><i class="fa fa-eye-slash"></i> 关</a></li></ul></div></div><table id="table" class="table table-striped table-bordered table-hover table-nowrap"data-operate-edit="{:$auth->check('xxfb/banner/edit')}"data-operate-del="{:$auth->check('xxfb/banner/del')}"width="100%"></table></div></div></div></div>
</div>

5.js页面

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {var Controller = {index: function () {// 初始化表格参数配置Table.api.init({extend: {index_url: 'xxfb/banner/index' + location.search,add_url: 'xxfb/banner/add',edit_url: 'xxfb/banner/edit',del_url: 'xxfb/banner/del',multi_url: 'xxfb/banner/multi',import_url: 'xxfb/banner/import',table: 'xxfb_banner',}});var table = $("#table");// 初始化表格table.bootstrapTable({url: $.fn.bootstrapTable.defaults.extend.index_url,pk: 'id',sortName: 'weigh',fixedColumns: true,fixedRightNumber: 1,columns: [[{checkbox: true},{field: 'id', title: __('Id')},{field: 'site', title: __('Site'), searchList: {"1":__('Site 1'),"2":__('Site 2')}, formatter: Table.api.formatter.normal},{field: 'title', title: __('Title'), operate: 'LIKE'},{field: 'image', title: __('Image'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.image},{field: 'jump_type_list', title: __('Jump_type_list'), searchList: {"0":__('Jump_type_list 0'),"1":__('Jump_type_list 1'),"2":__('Jump_type_list 2'),"3":__('Jump_type_list 3')}, formatter: Table.api.formatter.normal},{field: 'switch', title: __('Switch'), searchList: {"0":__('Switch 0'),"1":__('Switch 1')}, table: table, formatter: Table.api.formatter.toggle},{field: 'weigh', title: __('Weigh'), operate: false},{field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}]]});// 为表格绑定事件Table.api.bindevent(table);//绑定TAB事件$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {var typeStr = $(this).attr("href").replace('#', '');var options = table.bootstrapTable('getOptions');options.pageNumber = 1;options.queryParams = function (params) {params.type = typeStr;return params;};table.bootstrapTable('refresh', {});return false;});},add: function () {$("#content_show_hide").hide();$("#jump_url_show_hide").hide();onChange();Controller.api.bindevent();},edit: function () {var jump_type = $("#c-jump_type_list").val();show_hide(jump_type);onChange();Controller.api.bindevent();},api: {bindevent: function () {Form.api.bindevent($("form[role=form]"));}}};return Controller;
});
function onChange(){$('#c-jump_type_list').on('change',function(){var jump_type = $(this).val();show_hide(jump_type);});
}
function show_hide(jump_type){var fruits = ['1', '2'];if(fruits.includes(jump_type)){$("#jump_url_show_hide").show();$("#content_show_hide").hide();$('#c-jump_url').attr('data-rule', 'required');}else if(jump_type == 3){$("#content_show_hide").show();$("#jump_url_show_hide").hide();$('#c-content').attr('data-rule', 'required');}else if(jump_type == 0){$("#content_show_hide").hide();$("#jump_url_show_hide").hide();}
}

代码完成，直接复制即可使用

6.小知识点

  1. 下拉框动态加载不同的input框
  2. 隐藏的input显示后增加必填属性
  3. 自定义tab选项卡

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

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

相关文章

【qt】Qt+OpenCv读取带有中文路径的图片

【qt】Qt+OpenCv读取带有中文路径的图片

【opencv4.5.1版本】下载exe解压即可。。。https://opencv.org/releases/page/2/ 【qt5.15.2】 pro文件 QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c17# You can make your code fail to compile if it uses deprecated APIs. # In order to …
阅读更多...
控制系统设计中的凸优化

控制系统设计中的凸优化

凸优化&#xff0c;或叫做凸最优化&#xff0c;凸最小化&#xff0c;是数学最优化的一个子领域&#xff0c;研究定义于凸集中的凸函数最小化的问题。 在控制系统中&#xff0c;凸优化是一种有效的设计方法&#xff0c;用于解决具有凸集约束的优化问题。凸优化问题通常涉及最小…
阅读更多...
最简单的基于 FFmpeg 的音频解码器

最简单的基于 FFmpeg 的音频解码器

最简单的基于 FFmpeg 的音频解码器 最简单的基于 FFmpeg 的音频解码器正文参考 参考雷霄骅博士的文章&#xff0c;链接&#xff1a;最简单的基于FFMPEGSDL的音频播放器&#xff1a;拆分-解码器和播放器 最简单的基于 FFmpeg 的音频解码器 正文 FFmpeg 音频解码器实现了音频数…
阅读更多...
硕士毕业论文格式修改要点_word

硕士毕业论文格式修改要点_word

目录 0、最开始要做的事情1、更改样式&#xff08;先善器&#xff09;2、多级标题&#xff08;解决自动更新问题必要的基础设置&#xff09;2、插入图片&#xff08;1&#xff09;设置一个图片样式——“无间隔”&#xff08;2&#xff09;插入题注&#xff08;3&#xff09;修…
阅读更多...
JavaScript常用技巧专题一

JavaScript常用技巧专题一

文章目录 一、前言二、生成随机颜色的两种方式2.1、生成RandomHexColor2.2、生成随机RGBA 三、复制内容到剪贴板的两种方式3.1、方式13.2、方式2 四、获取URL中的查询参数五、打乱数组六、深拷贝一个对象七、确保元素在可见区域内八、获取当前选中的文本九、浏览器cookie9.1、获…
阅读更多...
低多边形3D建模石头材质纹理贴图

低多边形3D建模石头材质纹理贴图

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…
阅读更多...
单例模式---饿汉式、懒汉式

单例模式---饿汉式、懒汉式

一、什么是单例模式 单例模式&#xff0c;指的是一个类中的对象只能有一个&#xff0c;它在内存中只会创建一次对象的设计模式。 二、饿汉式 public class SingleTon {// 私有的构造方法private SingleTon() {};// 1. 饿汉式private static SingleTon instance new SingleTon…
阅读更多...
Flink 使用场景

Flink 使用场景

Apache Flink 功能强大&#xff0c;支持开发和运行多种不同种类的应用程序。它的主要特性包括&#xff1a;批流一体化、精密的状态管理、事件时间支持以及精确一次的状态一致性保障等。Flink 不仅可以运行在包括 YARN、 Mesos、K8s 在内的多种资源管理框架上&#xff0c;还支持…
阅读更多...
HarmonyOS鸿蒙操作系统架构开发

HarmonyOS鸿蒙操作系统架构开发

什么是HarmonyOS鸿蒙操作系统&#xff1f; HarmonyOS是华为公司开发的一种全场景分布式操作系统。它可以在各种智能设备&#xff08;如手机、电视、汽车、智能穿戴设备等&#xff09;上运行&#xff0c;具有高效、安全、低延迟等优势。 目录 HarmonyOS 一、HarmonyOS 与其他操…
阅读更多...
图空图床图片外链系统源码-支持自定义权限策略-图片大小格式

图空图床图片外链系统源码-支持自定义权限策略-图片大小格式

含视频搭建教程。 大致功能&#xff1a; 支持本地等多种第三方云储存 AWS S3、阿里云 OSS、腾讯云 COS、七牛云、又拍云、SFTP、FTP、WebDav、Minio多种数据库驱动支持&#xff0c;MySQL 5.7、PostgreSQL 9.6、SQLite 3.8.8、SQL Server 2017支持配置使用多种缓存驱动&#xff…
阅读更多...
【Python】 Python web开发库大全

【Python】 Python web开发库大全

库排序是按照使用人数和文档的活跃度为参考进行的&#xff0c;建议大家使用排名靠前的框架&#xff0c;因为它们的文档更齐全&#xff0c;技术积累要更多&#xff0c;社区更繁盛&#xff0c;能得到更好的支持&#xff0c;这样在遇到自己无法解决的问题&#xff0c;可以更快更高…
阅读更多...
微信小程序引入Vant Weapp修改样式不起作用,使用外部样式类进行覆盖

微信小程序引入Vant Weapp修改样式不起作用,使用外部样式类进行覆盖

一、引入Vant Weapp后样式问题 在项目中使用第三方组件修改css样式时,总是出现各种各样问题,修改的css样式不起作用,没有效果,效果不符合预期等。 栗子(引入一个搜索框组件)实现效果: 左侧有一个搜索文字背景为蓝色,接着跟一个搜索框 wxml <view class"container&q…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023