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

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

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

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

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

显示emoji需要几个条件

1. 数据库字符集为utf8mb4，mysql里面是utf8mb4_gerneral_ci

2. 字段字符集为ut8mb4，mysql里面是utf8mb4_gerneral_ci

3. 后台连接数据库设置的时候也要选择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) {
   
            <