LeCMS
ClassCMS
Fastadmin
iCMS
PbootCMS
PHPCMS
易优CMS
YzmCMS
讯睿CMS
极致CMS
Wordpress
HkCMS
YznCMS
WellCMS
ThinkCMF
帝国CMS
SIYUCMSfastadmin
添加项目
- 创建数据表
- 创建数据表时，请认真查看 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- 一键生成菜单
- 通过 php thinkphp menu 命令生成菜单
- 注意事项
- crud生成后，如果对crud生成后的文件进行了修改，就不能再使用crud名称生成CURD。不支持增量，会被覆盖。
创建数据表时，请给每个字段加上注释，用于table，form表单等名称
菜单名称
当我们创建完项目时，发现我们创建的项目在菜单栏显示为英文，不要慌，下面我们来研究一下菜单栏按钮名称如何修改
- 通过后台修改
- 打开"权限管理" -> "规则管理" -> "点击修改"，将菜单名称修改为中文
- 通过数据库管理，直接修改数据库
- 语言包修改
- 直接在fastadmin/application/admin/lang/zh-cn.php文件中增加。键名为英文，键值为中文
在项目语言包中增加
Table
- 准备工作
- 理解 Javascript模块化编程
注：引用自 阮一峰的网络日志 - Javascript模块化编程（一）：模块的写法
- Javascript模块化编程（二）：AMD规范
- Javascript模块化编程（三）：require.js的用法
- 理解主模块js文件
- fastadmin/public/assets/js/require-backend.js，后台主模块js文件
- fastadmin/public/assets/js/require-frontend.js，前段主模块js文件
- 作用：简单点说就是按需加载其他JS模块，统一管理（别人写好的JS模块，如bootstrap系列,layer等）
- 了解引入的JS模块
- layer是一款近年来备受青睐的web弹层组件
其他：我也还没搞懂(0.0)，请自行百度领悟
在table中新建操作
fastadmin常规的按钮有：移动、增加、修改、删除、详情等，我们新增一个table操作运行按钮。原理为，点击运行按钮，读取数据库数据，然后访问控制器方法，进行预设的操作，最后返回操作结果。准备工作
- fastadmin涉及到的table操作按钮的js
- require-table.js
- 项目JS，所在目录：fastadmin/public/assets/js/backend/项目目录/项目名.js
- 请参考一张图解析FastAdmin中的表格列表的功能
- 理解require-table.js
做什么的？
- 初始化bootstrap-table.js
- 定义一些常用的方法
新增table操作按钮所需要了解的方法
- events：单元格元素事件
- formatter: 单元格数据格式化/初始化
- 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的设置有两种方式
在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）
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; }- 效果
测试自定义状态
// 定义状态 errorvar colorArr = {normal: 'success', hidden: 'grey', deleted: 'danger', locked: 'info', error: 'red'};- 增加语言配置
在fastadmin/application/admin/lang/zh-cn.php中，增加'Error' => '失败', + 效果
希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， Fastadmin， ClassCMS， LeCMS， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。
未经允许不得转载：Str Tom工作室 » fastadmin table 操作研究
