fastadmin table 操作研究

fastadmin

添加项目

  • 创建数据表
  • 创建数据表时,请认真查看 fastadmin 数据库表字段规则
  • 根据需求创建数据表

    CREATE TABLE `fa_dgcolumn` (
        `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID',
        `webname` varchar(20) NOT NULL DEFAULT 'pcsoft' COMMENT '网站名称',
        `dbhost` varchar(20) NOT NULL COMMENT '数据库主机地址',
        `dbport` smallint(6) unsigned NOT NULL DEFAULT '3306' COMMENT '数据库端口号',
        `dbname` varchar(20) NOT NULL COMMENT '数据库名称',
        `dbpass` varchar(18) NOT NULL COMMENT '数据库密码',
        `dbuser` varchar(12) NOT NULL DEFAULT 'root' COMMENT '数据库用户名',
        `createtime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '创建时间',
        `updatetime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '更新时间',
        `status` varchar(10) NOT NULL DEFAULT 'normal' COMMENT '状态',
        PRIMARY KEY (`id`),
        UNIQUE KEY `webname_UNIQUE` (`webname`)
    ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
  • 一键生成curd(无目录层级)
  • 通过 php thinkphp crud 命令生成crud

    生成的文件如下:
    ├── ./application/admin/controller/Dgcolumn.php
    ├── ./application/admin/lang/zh-cn/dgcolumn.php
    ├── ./application/admin/model/Dgcolumn.php
    └── ./application/admin/validate/Dgcolumn.php
    ├── ./application/admin/view/dgcolumn
    ├── ./application/admin/view/dgcolumn/add.html
    ├── ./application/admin/view/dgcolumn/edit.html
    └── ./application/admin/view/dgcolumn/index.html
    ├── ./public/assets/js/backend/dgcolumn.js
  • 一键生成curd(有目录层级)
  • 通过 php thinkphp crud 命令生成crud
       生成的文件如下:
       ├── ./application/admin/controller/dg/Dgcolumn.php
       ├── ./application/admin/lang/zh-cn/dg/column.php
       ├── ./application/admin/model/Dgcolumn.php
       └── ./application/admin/validate/Dgcolumn.php
       ├── ./application/admin/view/dg/column/add.html
       ├── ./application/admin/view/dg/column/edit.html
       └── ./application/admin/view/dg/column/index.html
       ├── ./public/assets/js/backend/dg/column.js
  1. crud生成后,如果对crud生成后的文件进行了修改,就不能再使用crud名称生成CURD。不支持增量,会被覆盖。
  2. 创建数据表时,请给每个字段加上注释,用于table,form表单等名称

菜单名称

当我们创建完项目时,发现我们创建的项目在菜单栏显示为英文,不要慌,下面我们来研究一下菜单栏按钮名称如何修改

  • 通过后台修改
  • 打开"权限管理" -> "规则管理" -> "点击修改",将菜单名称修改为中文
  • 通过数据库管理,直接修改数据库
  • 语言包修改
  • 直接在fastadmin/application/admin/lang/zh-cn.php文件中增加。键名为英文,键值为中文
  • 在项目语言包中增加

Table

在table中新建操作

操作
fastadmin常规的按钮有:移动、增加、修改、删除、详情等,我们新增一个table操作运行按钮。原理为,点击运行按钮,读取数据库数据,然后访问控制器方法,进行预设的操作,最后返回操作结果。

  • 准备工作

  • 新增table操作按钮所需要了解的方法

    1. events:单元格元素事件
    2. formatter: 单元格数据格式化/初始化
    3. buttons: 自定义按钮
  • 新增table操作按钮的实现方法

    • 将其定义为公共按钮

require-table.js中增加:

buttons.push({name: 'run', text: '运行', title: '运行', icon: 'fa fa-play', classname: 'btn btn-xs btn-success btn-run-amor'});

如下:

operate: function (value, row, index) {
         var table = this.table;
         // 操作配置
         var options = table ? table.bootstrapTable('getOptions') : {};
         // 默认按钮组
         var buttons = $.extend([], this.buttons || []);
         buttons.push({name: 'dragsort', icon: 'fa fa-arrows', classname: 'btn btn-xs btn-primary btn-dragsort'});
         buttons.push({name: 'edit', icon: 'fa fa-pencil', classname: 'btn btn-xs btn-success btn-editone'});
         buttons.push({name: 'del', icon: 'fa fa-trash', classname: 'btn btn-xs btn-danger btn-delone'});
         buttons.push({name: 'run', text: '运行', title: '运行', icon: 'fa fa-play', classname: 'btn btn-xs btn-success btn-run-amor'});
         var html = [];
         var url, classname, icon, text, title, extend;
         console.log(buttons)
         $.each(buttons, function (i, j) {
             if (j.name === 'dragsort' && typeof row[Table.config.dragsortfield] === 'undefined') {
                 return true;
             }
             if (['add', 'edit', 'del', 'multi', 'dragsort'].indexOf(j.name) > -1 && !options.extend[j.name + "_url"]) {
                 return true;
             }
             var attr = table.data("operate-" + j.name);
             if (typeof attr === 'undefined' || attr) {
                 url = j.url ? j.url : '';
                 if (url.indexOf("{ids}") === -1) {
                     url = url ? url + (url.match(/(\?|&)+/) ? "&ids=" : "/ids/") + row[options.pk] : '';
                 }
                 url = Table.api.replaceurl(url, value, row, table);
                 url = url ? Fast.api.fixurl(url) : 'javascript:;';
                 classname = j.classname ? j.classname : 'btn-primary btn-' + name + 'one';
                 icon = j.icon ? j.icon : '';
                 text = j.text ? j.text : '';
                 title = j.title ? j.title : text;
                 extend = j.extend ? j.extend : '';
                 html.push('<a href="' + url + '" class="' + classname + '" ' + extend + ' title="' + title + '"><i class="' + icon + '"></i>' + (text ? ' ' + text : '') + '</a>');
             }
         });
         return html.join(' ');
     },

参数请参考:

html.push('<i class="' + icon + '"></i>' + (text ? ' ' + text : '') + '');

注意事项:

    • url的设置有两种方式
    1. 在js中直接设置

      buttons.push({name: 'run', text: '运行', title: '运行', icon: 'fa fa-play', classname: 'btn btn-xs btn-success btn-run-amor', url: 'dg/column/run'}); 

      特点:点击后,直接请求dg项目下的cloumn控制的run方法(直接请求php)

    2. html中设置

      <table id="table" class="table table-striped table-bordered table-hover" 
                              data-operate-edit="{:$auth->check('dg/column/edit')}" 
                              data-operate-del="{:$auth->check('dg/column/del')}"
                              data-operate-run="{:$auth->check('dg/column/run')}"
                              width="100%">
      
      </table>

      特点:可在require-table.js文件中的增加js事件处理。先执行事件,然后再请求php

      events: {
           operate: {
               'click .btn-editone': function (e, value, row, index) {
                   e.stopPropagation();
                   var options = $(this).closest('table').bootstrapTable('getOptions');
                   Fast.api.open(options.extend.edit_url + (options.extend.edit_url.match(/(\?|&)+/) ? "&ids=" : "/ids/") + row[options.pk], __('Edit'), $(this).data() || {});
               },
               'click .btn-delone': function (e, value, row, index) {
                   e.stopPropagation();
                   var that = this;
                   var top = (that).offset().top - (window).scrollTop();
                   var left = (that).offset().left - (window).scrollLeft() - 260;
                   if (top + 154 > $(window).height()) {
                       top = top - 154;
                   }
                   if ($(window).width() < 480) {
                       top = left = undefined;
                   }
                   var index = Layer.confirm(
                           __('Are you sure you want to delete this item?'),
                           {icon: 3, title: __('Warning'), offset: [top, left], shadeClose: true},
                           function () {
                               var table = $(that).closest('table');
                               var options = table.bootstrapTable('getOptions');
                               Table.api.multi("del", row[options.pk], table, that);
                               Layer.close(index);
                           }
                   );
               },
      
               'click .btn-run-amor' : function (e, value, row, index) {
                   e.stopPropagation();
                   console.log(112312312321);
               }
           }
       },
    • 单项目使用
      直接在项目JS中配置,不需要修改html

      {field: 'operate', title: __('Operate'), table: table, buttons: [
          {name: 'run', text: '运行', title: '运行', icon: 'fa fa-play', classname: 'btn btn-xs btn-success btn-change btn-run-amor', url: 'dg/column/run'}
      ], events: Table.api.events.operate, formatter: Table.api.formatter.operate}
    • 增加按钮

      • 按钮选择Font Awesome
      • 按钮添加:

        • html

          <table id="table" class="table table-striped table-bordered table-hover" 
                             data-operate-edit="{:$auth->check('dg/column/edit')}" 
                         data-operate-del="{:$auth->check('dg/column/del')}" 
                         width="100%">
          
          </table>
        • js 项目js

          {field: 'operate', title: __('Operate'), table: table, buttons: [
              {name: 'run', text: '运行', title: '运行', icon: 'fa fa-play', classname: 'btn btn-xs btn-success btn-change btn-start', url: 'dg/column/run'}
          ], events: Table.api.events.operate, formatter: Table.api.formatter.operate}
        • crontaller

          public function run()
          {
               echo 'hello word';
          }
    • 按钮大小

      • 在 Font Awesome中给按钮class添加 fa-number(number范围请自行查看)
      • 在 Fastadmin 中查看同一位置的class即可

    按钮增加完成图

    在table中按照需求设置状态

    状态

    • fastadmin内置有四中状态,分别是:normal/hidden/deleted/locked,只需在数据表中加入字段status,设置初始值(四选一)就会在表格中自动生成。
    • sql

      status varchar(10) NOT NULL DEFAULT 'normal' COMMENT '状态',
    • js Table JS

    建好数据表后,用CRUD生成,状态JS也会自动生成好

      {field: 'status', title: __('Status'), formatter: Table.api.formatter.status}
      // 状态定义JS
      status: function (value, row, index) {
          //颜色状态数组,可使用red/yellow/aqua/blue/navy/teal/olive/lime/fuchsia/purple/maroon
          var colorArr = {normal: 'success', hidden: 'grey', deleted: 'danger', locked: 'info'};
          //如果字段列有定义custom
          if (typeof this.custom !== 'undefined') {
              colorArr = $.extend(colorArr, this.custom);
          }
          value = value.toString();
          var color = value && typeof colorArr[value] !== 'undefined' ? colorArr[value] : 'primary';
          value = value.charAt(0).toUpperCase() + value.slice(1);
          //渲染状态
          var html = '<span class="text-' + color + '"><i class="fa fa-circle"></i> ' + __(value) + '</span>';
          return html;
      }
    • 效果
      status
    • 测试自定义状态

        // 定义状态 error
        var colorArr = {normal: 'success', hidden: 'grey', deleted: 'danger', locked: 'info', error: 'red'};
    • 增加语言配置
      fastadmin/application/admin/lang/zh-cn.php中,增加'Error' => '失败', + 效果
      status
    8 条评论

    发布
    问题