Fastadmin踩坑日记-2.魔改表格

最新推荐文章于 2024-09-05 23:30:24 发布

Andrew@csdn

最新推荐文章于 2024-09-05 23:30:24 发布

阅读量2.5k

点赞数

分类专栏： php #踩坑文章标签： thinkphp php

本文链接：https://blog.csdn.net/xzy565143480/article/details/104173965

版权

这篇博客记录了在使用Fastadmin时遇到的六个问题及解决方案，包括前台显示emoji字符、Bootstrap-table自定义渲染、按钮弹窗设置、弹窗更新事件关闭、多表数据联合查询以及用户访问自定义模块的问题。详细介绍了每个问题的解决要点，如设置数据库字符集、使用formatter渲染器、控制器处理ajax请求等。

摘要由CSDN通过智能技术生成

Fastadmin踩坑日记-2.魔改表格

经过日夜的查找，终于可以慢慢的上手这个了，踩了几个坑，记录一下

坑1-前台无法显示emoji字符

最早的几个emoji是2个字节，在utf8默认的双字节编码中是可以正常显示的，比如那个红色感叹号❕，到后来emoji逐步成为了4个字符，原本的utf8_gerneral_ci字符集就没法显示了，必须手动设置

显示emoji需要几个条件

数据库字符集为utf8mb4，mysql里面是utf8mb4_gerneral_ci
字段字符集为ut8mb4，mysql里面是utf8mb4_gerneral_ci
后台连接数据库设置的时候也要选择ut8mb4，也就是在db.php类似这个文件里

例如

在这里插入图片描述

之前一直没有成功，原来是条件3没有满足，导致前台一直看到的是？而不是emoji如😄，改了3之后终于成功了

在这里插入图片描述

坑2-Bootstrap-table显示图像或自定义渲染显示

这个就比如说，数据库里有一个gender字段存储用户的性别，0是男，1是女

渲染到BT表格（Bootstrap-table，下同）上的时候想要直接显示男或女，

或者你想自定义这个表格内容的css，就需要用到BT的formatter渲染器

首先需要完成踩坑日记1的curd生成表格的操作，然后到前台页面的对应js中

位置为public/assets/js/[backend|frontend]这个根据你的这个bt表格在前台后台决定/<插件名>/<表>.js

找到对应的字段如
在这里插入图片描述

加入一个formatter即可，如果是本页的可以放在页面下面的api当中，然后字段就可以对应的渲染了，然后注意，坑来了

在这里插入图片描述

本页的控制器是Controller，而非Table，所以要访问这个渲染器，一定是Controller.api.formatter.xxxxx，不是Table.api.formatter.xxxx

比较常用的formatter有

Table.api.formatter.icon //渲染成图标按钮
Table.api.formatter.image //渲染成单张图片
Table.api.formatter.images //渲染成多张图片
Table.api.formatter.content //内容自动截取
Table.api.formatter.status //渲染成状态
Table.api.formatter.normal //渲染成label
Table.api.formatter.toggle //渲染成开关
Table.api.formatter.url //渲染成文本框链接
Table.api.formatter.search //渲染成搜索链接
Table.api.formatter.addtabs //渲染成打开新选项卡链接
Table.api.formatter.dialog //渲染成弹窗链接
Table.api.formatter.flag //渲染成标志
Table.api.formatter.label //渲染成标志
Table.api.formatter.datetime //渲染成日期时间
Table.api.formatter.operate //渲染成操作栏按钮
Table.api.formatter.buttons //渲染成按钮组

最终效果如下

在这里插入图片描述

坑3-点击按钮无法设置为弹窗

还是在位置为public/assets/js/[backend|frontend]这个根据你的这个bt表格在前台后台决定/<插件名>/<表>.js这里的classname写成btn-dialog即可设置为弹窗，url即为弹窗对应的控制器

在这里插入图片描述

在控制器里面对应输出相应的页面即可，可以参照下图，下图输出的是渲染后的view/index.html

在这里插入图片描述

坑4-弹窗内的更新事件完成后不会自己关闭

我这是非主流方法，因为什么callback方法都试过了，没反应，无法让弹窗数据与父级窗口交互，自己摸索出一套办法

要点1. 表单必须是ajax

Ajax表单提交才会触发右上角的小窗口提示更新成功或失败，如果是form里的submit则会全局页面刷新显示成功

在这里插入图片描述

要点2.学会使用parent来控制父级窗口

在弹窗内，parent表示的就是父级窗口，这样就可以访问进行相关的操作

在弹窗内可以执行下面的js代码实现数据交互

parent.Toastr.success(data)			//父级成功弹窗
parent.Toastr.error(data)			//父级失败弹窗
parent.Layer.closeAll()			//父级关闭所有弹窗，也就是弹窗可以关闭自己

在这里插入图片描述
这是更新与微信订阅推送的ajax方法，更新推送完和父级进行数据交互的案例

//弹窗内执行的js文件
<script>
    function submit() {
   
      var url = 'mypchelper/orders/update'
      var formData = $('#myForm').serialize()
      //序列化为 a=1&b=2这样的序列
      Fast.api.ajax({
   
        url: url,
        type: 'POST',
        data: formData,
        success: function(data) {
   
          parent.Toastr.success(data.msg)
          switch (data.data.errcode) {
   
            case 0:
              parent.Toastr.success('消息已经推送至用户手机')
              break
            case 40003:
              parent.Toastr.error('推送错误：touser字段openid为空或