fastadmin appendfieldlist 用法

news2024/11/28 2:41:50

先上效果

字段添加

ALTER TABLE `ewg1990`.`fa_quanzi` 
ADD COLUMN `yiqi_images` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL COMMENT '厂家赞助' AFTER `yiqi_images`;

添加页面

 <!--赞助商-->
    <div class="form-group row">
        <!--        <label class="control-label col-xs-12 col-sm-2">{:__('仪器产品')}:</label>-->
        <div class="col-xs-12">
            <table class="table fieldlist" data-template="eventtpl" data-name="row[yiqi_images]" id="second-table">
                <tr>
                    <td>{:__('赞助厂家')}</td>
                    <td>{:__('标题')}</td>
                    <td>{:__('图片')}<span style="color: red">670*176</span></td>
                    <td>{:__('链接')}</td>
                    <td>{:__('类型')}<span style="color: red">1内部;2外部</span></td>
                    <td width="100"></td>
                </tr>
                <tr>
                    <td colspan="3"><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[yiqi_images]" class="form-control" style="display: none;"></textarea>
            <script id="eventtpl" type="text/html">
                <tr class="form-inline">
                    <td><input type="text" style="width: 200px;" name="<%=name%>[<%=index%>][id]" class="form-control selectpage" data-params='{"custom[status]":1}' data-source="manystore/shop" data-field="name" value="<%=row.id%>" placeholder="请选择赞助厂家"/></td>
                    <td><input type="text" name="<%=name%>[<%=index%>][title]" class="form-control" value="<%=row.title%>" placeholder="标题" size="10"/></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"></button>
                        <!--@formatter:on-->
                    </td>
                    <td><input type="text" name="<%=name%>[<%=index%>][url]" class="form-control" value="<%=row.url%>" placeholder="跳转链接" size="10"/></td>
                    <td><input type="text" name="<%=name%>[<%=index%>][type]" class="form-control" value="<%=row.type%>" placeholder="填1内部,2外部" size="10"/></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="form-group row">
        <div class="col-xs-12">
            <table class="table fieldlist" data-template="eventtpl" data-name="row[yiqi_images]" id="second-table">
                <tr>
                    <td>{:__('赞助厂家')}</td>
                    <td>{:__('标题')}</td>
                    <td>{:__('图片')}<span style="color: red">670*176</span></td>
                    <td>{:__('链接')}</td>
                    <td>{:__('类型')}<span style="color: red">1内部;2外部</span></td>
                    <td width="100"></td>
                </tr>
                <tr>
                    <td colspan="3"><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[yiqi_images]" class="form-control" style="display: none;">{$row.yiqi_images|htmlentities}</textarea>
            <script id="eventtpl" type="text/html">
                <tr class="form-inline">
                    <td><input type="text" style="width: 150px;" name="<%=name%>[<%=index%>][id]" class="form-control selectpage" data-params='{"custom[status]":1}' data-source="manystore/shop" data-field="name" value="<%=row.id%>" placeholder="请选择赞助厂家"/></td>
                    <td><input type="text" style="width: 100px;" name="<%=name%>[<%=index%>][title]" class="form-control" value="<%=row.title%>"/></td>
                    <td>
                        <input type="hidden" style="width: 100px;" 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('<%=Fast.api.cdnurl(row.image)%>')"<%}%>></button>
                    </td>
                    <td><input type="text" name="<%=name%>[<%=index%>][url]" class="form-control" value="<%=row.url%>"/></td>
                    <td><input type="text" style="width: 80px;" name="<%=name%>[<%=index%>][type]" class="form-control" value="<%=row.type%>"/></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>

js代码

add: function () {
            $(document).on("fa.event.appendfieldlist", "#second-table .btn-append", function (e, obj) {
                //绑定动态下拉组件
                Form.events.selectpage(obj);
                //绑定日期组件
                Form.events.datetimepicker(obj);
                //绑定上传组件
                Form.events.faupload(obj);

                //上传成功回调事件,变更按钮的背景
                $(".upload-image", obj).data("upload-success", function (data) {
                    $(this).css("background-image", "url('" + Fast.api.cdnurl(data.url) + "')");
                })
            });
            Controller.api.bindevent();
        },
        edit: function () {
            Template.helper("Fast", Fast);
            $(document).on("fa.event.appendfieldlist", "#second-table .btn-append", function (e, obj) {
                //绑定动态下拉组件
                Form.events.selectpage(obj);
                //绑定日期组件
                Form.events.datetimepicker(obj);
                //绑定上传组件
                Form.events.faupload(obj);

                //上传成功回调事件,变更按钮的背景
                $(".upload-image", obj).data("upload-success", function (data) {
                    $(this).css("background-image", "url('" + Fast.api.cdnurl(data.url) + "')");
                })
            });
            Controller.api.bindevent();
        },

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

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

相关文章

有关 openAPI 的一些总结

目前主流的 APi 的验证是&#xff1a;Tokensign sign 主要是保证数据的真实性 token 主要是进行接口安全访问的 sign验证签名&#xff08; sha256Hex&#xff09; 一般将一些平台的版本及平台 id 等字段进行固定拼接后再进行摘要算法处理 // 参与签名计算的Key-Value列表 Map…

【青书学堂】计算机组装与维护(直播课) 第一学期 考试

【青书学堂】计算机组装与维护(直播课) 第一学期 考试 标题最终成绩:91.15 分 注意:答案仅供参考 第1题 单选题 第三代计算机的主要元件是:()。 A: 电子管 B: 中、小规模集成电路 C: 晶体管 D: 大规模和超大规模集成电路 答案:B 第2题 单选题 下列哪项属于网络设备()…

雷达信号处理自学总结(持续更新)

傅里叶变换的频率分辨率 频率分辨率 采样频率 信号长度 频率分辨率 \frac{采样频率 }{信号长度} 频率分辨率信号长度采样频率​ 可用numpy模块的fft.fftfreq函数求出傅里叶变换的频率分辨率。 https://numpy.org/doc/stable/reference/generated/numpy.fft.fftfreq.html

2.1 色彩空间

色彩发送器 色彩认知&#xff1a;光源是出生点&#xff0c;光源发射出光线&#xff0c;光线通过直射反射折射等路径最终进入人眼。但是人眼接收到光线后&#xff0c;人眼的细胞产生了一系列化学反应。由此把产生的新号传入大脑&#xff0c;最终大脑对颜色产生了认知感知。 光的…

Nacos开启权限认证

1.修改Nacos配置 配置文件在nacos目录的conf下 修改点&#xff1a; 注意&#xff1a;需要添加对应的数据库nacos&#xff0c;对应的SQL文件也是在conf目录下 2.修改bootstrap.yaml配置文件 spring:application:name: servernameprofiles:active: devcloud:nacos:username: na…

CISP-PTE与CISP-PTS:如何选择与利用

CISP-PTE和CISP-PTS是与软件测试相关的职业认证&#xff0c;它们在某些方面存在区别&#xff0c;但也有一定的联系。下面将详细介绍这两个认证的区别和联系。 区 别 CISP-PTE&#xff1a;培养「实际网络安全渗透测试能力」与「真实操作能力」为核心&#xff0c;注重所学知识的…

在nginx上部署nuxt项目

先安装Node.js 我安的18.17.0。 安装完成后&#xff0c;可以使用cmd&#xff0c;winr然cmd进入&#xff0c;测试是否安装成功。安装在哪个盘都可以测试。 测试 输入node -v 和 npm -v&#xff0c;&#xff08;中间有空格&#xff09;出现下图版本提示就是完成了NodeJS的安装…

Linux centos7.x系统 下没有ens33 网卡的解决方案

一、背景 安装完windows11 Centos7.9 版本的双系统之后 , 启动Centos7.9时发现没有网卡信息 , 只有ifcfg-lo网卡的信息 , 这个时候就证明没有网卡信息&#xff0c;或者网卡驱动不匹配(我这里是没有网卡)&#xff0c;所以我们要重新安装 , 安装步骤如下 : 二、安装步骤 1.查…

21. MySQL基础知识

文章目录 一、索引B Tree 原理1. 数据结构2. 操作3. 与红黑树的比较 MySQL 索引1. BTree 索引2. 哈希索引3. 全文索引4. 空间数据索引 索引优化1. 独立的列2. 多列索引3. 索引列的顺序4. 前缀索引5. 覆盖索引 索引的优点索引的使用条件 二、查询性能优化使用 Explain 进行分析优…

无压力轻松使用Obsidian写newsletter

quail平台特点 拥有四大特点&#xff1a;开源&#xff0c;人工智能增强&#xff0c;web3和加密货币集成&#xff0c;超越电子邮件 开源 每个人都应该可以访问驱动其工具的代码。通过我们的服务&#xff0c;您可以放心地了解背后发生的事情。 人工智能增强 为了创建一个真正…

android 如何分析应用的内存(十二)——HWASan

android 如何分析应用的内存&#xff08;十二&#xff09; 上一篇介绍了ASan&#xff0c;这次介绍ASan的加强版HWASan HWASan的使用 从NDK r21和Android 10 开始&#xff0c;Android支持HWAsan。HWAsan仅仅支持arm64架构的设备。 系统级准备 HWASan需要系统的支持&#xf…

[C++] C++入门第二篇 -- 引用 -- 内联函数inline -- auto+for

目录 1、引用 -- & 1.1 引用的概念 1.2 引用特性 1.3 常引用 -- 权限问题 1.4 引用的使用场景 1.4.1 做参数 1.4.2 做返回值 注意 1.5 传值、传引用的效率比较 1.6 引用和指针的区别 2、内联函数 2.1 概念 转存失败重新上传取消​编辑转存失败重新上传取消​编…

“内卷之王”雪糕品牌,夏日营销如何花式出招?小红书数据分析!

酷夏已至&#xff0c;冰淇淋行业号称营销“内卷之王”&#xff0c;品牌们开始各显身手&#xff0c;掀起2023年的夏日冰淇淋大战。今年出现了哪些新的内容趋势&#xff1f;雪糕行业有哪些品牌营销趋势值得关注&#xff1f;笔者将通过小红书数据分析与内容洞察&#xff0c;带你一…

字典序排数(力扣)思维 JAVA

给你一个整数 n &#xff0c;按字典序返回范围 [1, n] 内所有整数。 你必须设计一个时间复杂度为 O(n) 且使用 O(1) 额外空间的算法。 示例 1&#xff1a; 输入&#xff1a;n 13 输出&#xff1a;[1,10,11,12,13,2,3,4,5,6,7,8,9] 示例 2&#xff1a; 输入&#xff1a;n 2 输…

CNNdebug尝试

这算是啥问题&#xff1f;&#xff1f; 接着根据群里大佬提供的指示&#xff0c;将train和validate中的nums_work改成0即可 此处因为数据已经打乱了&#xff0c;所以在这里就不用打乱数据&#xff0c;把shuffle True修改成为False 后面查看指定目录下&#xff0c;竟然没有这个…

HPC集群调度系统和计算系统

什么是计算云&#xff1f; 所谓的计算云指的是为计算业务优化的类云基础架构&#xff0c;它强调用云的方式解决计算问题&#xff0c;而不是将“计算”搬到现有的公有云或者容器云上。 目前公有云或者容器云&#xff08;例如k8s&#xff09;上的HPC解决方案本质上都是将现有的H…

postgres wal2json插件jsonb字段数据丢失问题解决

使用pgwal2jsondebezium进行数据同步时&#xff0c;发现偶尔会有jsonb字段数据丢失的问题 进行测试时发现&#xff1a; 1、发生数据丢失的jsonb字段长度都比较大(超过toast阈值&#xff0c;使用toast表存储) 2、针对发生jsonb字段丢失的数据&#xff0c;jsonb字段本身未发生修…

3 Linux基础篇-VMware和Linux的安装

3 Linux基础篇-VMware和Linux的安装 文章目录 3 Linux基础篇-VMware和Linux的安装3.1 安装VMware和CentOS3.1.1 VM安装3.1.2 Centos7.6的安装步骤 3.3 虚拟机基本操作3.4 安装VMtools3.5 设置共享文件夹 学习视频来自于B站【小白入门 通俗易懂】2021韩顺平 一周学会Linux。可能…

【Java】Java多线程编程基础

文章目录 1. 进程与线程1.1 进程与线程的基本认识1.1.1 进程&#xff08;Process&#xff09;1.1.2 线程&#xff08;Thread&#xff09; 1.2 为什么会有线程1.2.1 以看视频为例 2. 多线程实现2.1 Thread类实现多线程2.2 Runnable接口实现多线程2.3 Callable接口实现多线程2.3 …

C++笔记之使用普通指针和shared_ptr在堆上申请类对象的各种写法

C笔记之使用普通指针和shared_ptr在堆上申请类对象的各种写法 code review! 文章目录 C笔记之使用普通指针和shared_ptr在堆上申请类对象的各种写法1.几种不同的写法2.ChatGpt回答 1.几种不同的写法 注&#xff1a;使用普通指针申请堆内存&#xff0c;其实是应该有delete的&…