fastadmin 基础
fastadmin 基础
-
目录
fastadmin 基础
目录结构
一、fastadmin 类库
1.文字转拼音
2.时间类库
3.分类
二、表单
1.多选
2.单选
3.动态下拉
4.普通下拉
5.城市下拉
7.上传
8.日期时间
9.开关
10.选项卡
11.自己写上传
12.规格
13.数字
三、表格
1.实例化表格
依赖
载入依赖
引入CSS
Table.list
Table.defaults
Table.columnDefaults
Table.config
Table.api
Table.api.formatter
实例化
初始化
实例化
表格参数
2.分类表格显示
3.表格列表页（一张图）
功能描述
完整代码
四、控制器
1.自写编辑和添加等
2.使用admin_id
目录结构
project 应用部署目录
├─application 应用目录（可设置）
│ ├─common 公共模块目录（可更改）
│ ├─index 模块目录(可更改)
│ │ ├─config.php 模块配置文件
│ │ ├─common.php 模块函数文件
│ │ ├─controller 控制器目录
│ │ ├─model 模型目录
│ │ ├─view 视图目录
│ │ └─ ... 更多类库目录
│ ├─command.php 命令行工具配置文件
│ ├─common.php 应用公共（函数）文件
│ ├─config.php 应用（公共）配置文件
│ ├─database.php 数据库配置文件
│ ├─tags.php 应用行为扩展定义文件
│ └─route.php 路由配置文件
├─extend 扩展类库目录（可定义）
├─public WEB 部署目录（对外访问目录）
│ ├─static 静态资源存放目录(css,js,image)
│ ├─index.php 应用入口文件
│ ├─router.php 快速测试文件
│ └─.htaccess 用于 apache 的重写
├─runtime 应用的运行时目录（可写，可设置）
├─vendor 第三方类库目录（Composer）
├─thinkphp 框架系统目录
│ ├─lang 语言包目录
│ ├─library 框架核心类库目录
│ │ ├─think Think 类库包目录
│ │ └─traits 系统 Traits 目录
│ ├─tpl 系统模板目录
│ ├─.htaccess 用于 apache 的重写
│ ├─.travis.yml CI 定义文件
│ ├─base.php 基础定义文件
│ ├─composer.json composer 定义文件
│ ├─console.php 控制台入口文件
│ ├─convention.php 惯例配置文件
│ ├─helper.php 助手函数文件（可选）
│ ├─LICENSE.txt 授权说明文件
│ ├─phpunit.xml 单元测试配置文件
│ ├─README.md README 文件
│ └─start.php 框架引导文件
├─build.php 自动生成定义文件（参考）
├─composer.json composer 定义文件
├─LICENSE.txt 授权说明文件
├─README.md README 文件
├─think 命令行入口文件一、fastadmin 类库
1.文字转拼音
文字转拼音
$content="神经病啊";
$pinyin = new \Overtrue\Pinyin\Pinyin('Overtrue\Pinyin\MemoryFileDictLoader');
$v['Pinyin'] = $content;
$v['py'] = $pinyin->abbr($content, '');
$v['pinyin'] = $pinyin->permalink($content, '');
return $v;返回结果
htmp的封装方法，curl等
$result = \GuzzleHttp\json_decode($result, true);
2.时间类库
fast\Date
/**
* 计算两个时区间相差的时长,单位为秒
* @param string $remote timezone that to find the offset of
* @param string $local timezone used as the baseline
* @param mixed $now UNIX timestamp or date string
* @return integer
*/
offset($remote, $local = NULL, $now = NULL)
/**
* 计算两个时间戳之间相差的时间
* @param int $remote timestamp to find the span of
* @param int $local timestamp to use as the baseline
* @param string $output formatting string
* @return string when only a single output is requested
* @return array associative list of all outputs requested
* @from https://github.com/kohana/ohanzee-helpers/blob/master/src/Date.php
*/
span($remote, $local = NULL, $output = 'years,months,weeks,days,hours,minutes,seconds')
/**
* 格式化 UNIX 时间戳为人易读的字符串
*
* @param int Unix 时间戳
* @param mixed $local 本地时间
*
* @return string 格式化的日期字符串
*/
human($remote, $local = null)
/**
* 获取一个基于时间偏移的Unix时间戳
*
* @param string $type 时间类型，默认为day，可选minute,hour,day,week,month,quarter,year
* @param int $offset 时间偏移量 默认为0，正数表示当前type之后，负数表示当前type之前
* @param string $position 时间的开始或结束，默认为begin，可选前(begin,start,first,front)，end
* @param int $year 基准年，默认为null，即以当前年为基准
* @param int $month 基准月，默认为null，即以当前月为基准
* @param int $day 基准天，默认为null，即以当前天为基准
* @param int $hour 基准小时，默认为null，即以当前年小时基准
* @param int $minute 基准分钟，默认为null，即以当前分钟为基准
* @return int 处理后的Unix时间戳
*/
unixtime($type = 'day', $offset = 0, $position = 'begin', $year = null, $month = null, $day = null, $hour = null, $minute = null)
3.分类
use fast\Tree;
Tree::instance()->init($ruleList);
$this->rulelist = Tree::instance()->getTreeList(Tree::instance()->getTreeArray(0), 'title');
初始化方法
/**
* 初始化方法
* @param array 2维数组，例如：
* array(
* 1 => array('id'=>'1','pid'=>0,'name'=>'一级栏目一'),
* 2 => array('id'=>'2','pid'=>0,'name'=>'一级栏目二'),
* 3 => array('id'=>'3','pid'=>1,'name'=>'二级栏目一'),
* 4 => array('id'=>'4','pid'=>1,'name'=>'二级栏目二'),
* 5 => array('id'=>'5','pid'=>2,'name'=>'二级栏目三'),
* 6 => array('id'=>'6','pid'=>3,'name'=>'三级栏目一'),
* 7 => array('id'=>'7','pid'=>3,'name'=>'三级栏目二')
* )
*/
获取树状数组
getTreeArray
/**
*
* 获取树状数组
* @param string $myid 要查询的ID
* @param string $nametpl 名称条目模板
* @param string $itemprefix 前缀
* @return string
*/
将getTreeArray的结果返回为二维数组
/**
* 将getTreeArray的结果返回为二维数组
* @param array $data
* @return array
*/
二、表单
1.多选
{:build_checkboxs('row[order_state1]', ['0'=>'取消或者退款', '10'=>'待支付', '20'=>'已支付', '21'=>'团餐中', '23'=>'待分配', '26'=>'待取货', '30'=>'已发货', '40'=> '已收货' ], 10) }
2.单选
{:build_radios('row[order_state]', ['0'=>__('取消或者退款'), '10'=>__('待支付'), '20'=>__('待支付'), '21'=>__('待支付'), '23'=>__('待支付'), '26'=>__('待支付'), '30'=>__('待支付'), '40'=>__('待支付')], $row['order_state'])}
3.动态下拉
FastAdmin中的动态下拉列表使用的是优秀强大的Selectpage插件来支持，FastAdmin对其进行了二次开发。
下面介绍一个最基础的动态下拉列表示例，如下
其中需要给元素class添加一个selectpage，其次需要增加一个data-source="category/selectpage"这个属性，category/selectpage为我们控制器提交列表的方法
FastAdmin的Selectpage列表中显示字段默认读取的是name字段，如果我们返回的列表中不包含name字段，将无法展现下拉列表数据。此时我们需要添加使用data-field="你要显示的字段"即可。
FastAdmin的Selectpage列表中主键字段默认读取的是id字段，如果我们的主键不是id字段，则我们可以添加并使用data-primary-key="你的主键ID字段"来修改。
Selectpage所支持的扩展属性
| 属性 | 功能 | 示例 |
|---|---|---|
| data-source | 提供数据源的URL地址 | data-source="category/index" |
| data-field | 列表显示读取的字段 | data-field="username" |
| data-primary-key | 列表选中后渲染的字段 | data-primary-key="uid" |
| data-pagination | 是否开启分页 | data-pagination="true" |
| data-page-size | 分页大小 | data-page-size="10" |
| data-multiple | 是否支持多选 | data-multiple="true" |
| data-max-select-limit | 最多可选择数量 | data-max-select-limit="3" |
| data-order-by | 排序字段 | data-order-by="id" |
| data-params | 自定义扩展参数 | data-params='{"custom[type]":"test"}' |
| data-select-only | 是否为只读模式 | data-select-only="true" |
Selectpage的data-params支持function类型,如果需要动态传参(例如联动查询),则可以在JS中将data-params添加一个function处理即可
FastAdmin在生成CRUD时会对包含下划线的字段默认生成动态下拉列表，比如user_id将自动生成data-source="user/index"
默认读取的是id和name字段，如果需要修改，请参考上方的参数修改方法。
data-params自定义扩展参数支持使用function动态返回数据，请在表单初始化之前使用，例如传递动态选择的类型
$("#c-name").data("params", function (obj) {
return {custom: {type: $("#c-type").val()}};
});
普通下拉
在FastAdmin中集成了Bootstrap-select插件，可以对原有的select元素重新渲染，并增加相应的功能。
我们可以直接给select元素添加一个class为selectpicker的值即可，FastAdmin在检测到以后会自动进行渲染，我们同时可以给select添加以下属性用于配置selectpicker
| 属性 | 介绍 | 添加位置 | 示例 |
|---|---|---|---|
| data-live-search | 是否启用动态搜索 | select | data-live-search="true" |
| data-tokens | 添加搜索的关键字 | option | data-tokens="keyword keyword2" |
| data-max-options | 最大可选择option的数量 | select或optgroup | data-max-options="2" |
| title | 自定义默认提示语 | select | title="请选择相应的分类" |
| title | 自定义选中以后显示的文字 | option | title="分类1" |
| data-style | 定义样式 | select | data-style="btn-primary" |
更多的使用方法请参考：Selectpicker官方教程
4.普通下拉
{:build_select('row[order_stateselect]', ['0'=>'取消或者退款', '10'=>'待支付', '20'=>'已支付', '21'=>'团餐中', '23'=>'待分配', '26'=>'待取货', '30'=>'已发货', '40'=> '已收货' ], 10)}5.城市下拉
FastAdmin中集成了强大的city-picker城市选择插件，可以很方便的选择省份和城市。
我们只需要简单的为input元素添加一个data-toggle="city-picker"属性即可自动渲染相应的城市选择组件 。
我们还可以通过添加以下属性来扩展城市选择组件的功能
| 属性 | 描述 | 示例 |
|---|---|---|
| data-level | 选择城市的级别，支持province/city/district，默认为district | data-level="city" |
| data-simple | 使用简单的地址，比如使用内蒙古替代内蒙古自治区，默认为false | data-simple="true" |
| data-responsive | 是否为自适应，默认为false | data-responsive="true" |
| placeholder | 默认提示的文字 | placeholder="请选择省/市" |
city-picker组件默认选择后渲染的是中文城市信息，我们可以通过在JS中监听city-picker更新后的事件来获取省份城市地区对应的code值。代码如下：
$("#city-picker").on("cp:updated", function() {
var citypicker = $(this).data("citypicker");
var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");
$("#code").val(code);
});
如果我们数据库中存放的是地区的code值，在显示时我们则需要把对应的code通过读取数据库转换成我们的地区中文，然后再设定input的value值即可。
类别联动(Ajax读取数据)
6.键值
键值组件是FastAdmin开发的一项简洁实用的基础组件，在FastAdmin中很多模块都有使用到该组件，例如常规管理->系统配置->字典配置均使用此组件开发，我们在插件管理配置中也经常可以看到键值组件的身影。
以下是键值组件最常用的使用方法：
-
键名
键值
-
追加
通过将以上代码放置在我们的表单中，然后使用Form.api.bindevent("form")或Form.events.fieldlist("form")进行初始化即可。
以上是最简洁的使用方法，fieldlist还有更强大的自定义功能，如下：
-
姓名
性别
年龄
成绩
-
追加
通过以上定义，可以任意自定义我们展示项的数据。
如果我们需要在点击追加按钮以后再对新增的展示项绑定事件，我们可以在JS中通过监听事件来给新增的元素绑定事件
$(document).on("fa.event.appendfieldlist", 'data-name="row[test]"', function(){
Form.api.bindevent(this);
});7.上传
FastAdmin的上传功能非常强大，我们只需要简单的配置即可支持单图或多图上传。
我们可以看到这里配置了一个文本框、一个上传按钮、一个选择按钮和一个预览的DIV
| 类型 | 说明 |
|---|---|
| 文本框 | 主要用于接收上传后返回的图片链接，文本框id属性是必选的，这里的id是c-avatar |
| 上传按钮 | 主要用于点击后上传文件，有几个属性非常重要，请参考下方的上传按钮属性介绍 |
| 选择按钮 | 主要用于点击后选择已经上传的文件，有几个属性非常重要，请参考下方的选择按钮属性介绍 |
| 预览区域 | 主要用于预览上传或选择文件后的预览。id属性是改造的，这里的id是p-avatar |
上传按钮支持属性
| 属性 | 示例值 | 说明 |
|---|---|---|
| data-url | ajax/upload | 用于配置上传文件接收的地址 |
| data-multipart | {"key1":"value1"} | 用于上传时附加额外的参数信息 |
| data-input-id | c-avatar | 用于填充返回URL地址的设文本框 |
| data-mimetype | image/gif,image/jpeg,image/png,image/jpg,image/bmp | 用于过滤允许上传的文件类型，支持mimetype或文件后缀名 |
| data-multiple | false | 是否支持多图或多文件模式 |
| data-preview-id | p-avatar | 用于预览返回URL地址的DIV |
| data-maxsize | 10M | 用于限制最大可上传的文件大小 |
选择按钮支持属性
| 属性 | 示例值 | 说明 |
|---|---|---|
| data-input-id | c-avatar | 用于填充返回URL地址的设文本框 |
| data-mimetype | image/gif,image/jpeg,image/png,image/jpg,image/bmp | 用于过滤允许上传的文件类型，支持mimetype或文件后缀名 |
| data-multiple | false | 是否支持多图或多文件模式 |
| data-preview-id | p-avatar | 用于预览返回URL地址的DIV |
如果我们想直接通过JS上传一个文件到我们的服务器，我们可以使用Upload.api.send(file, success, failure, complete)来上传文件。
上传视频
一、在html文件中，添加2个属性data-mimetype和data-maxsize。
二、修改application/extra/upload.php中的maxsize配置：
'50mb',
/**
* 可上传的文件类型(新增mp4,mp3,avi,flv,wmv视频文件后缀)
*/
'mimetype' => 'jpg,png,bmp,jpeg,gif,zip,rar,xls,xlsx,mp4,mp3,avi,flv,wmv',
// ....8.日期时间
在FastAdmin中的日期时间组件采用的是Bootstrap-datetimepicker插件
我们在使用只可以为文本框添加一个class为datetimepicker的值即可自动添加日期时间选择框。
同时我们还可以通过配置以下属性来自定义我们日期选择器的功能
| 属性 | 描述 | 示例 |
|---|---|---|
| data-date-format | 日期时间的格式，支持Moment.js的格式 | data-date-format=" YYYY-MM-DD" |
| data-date-min-date | 最小可选择的日期 | data-date-min-date="2011-10-01" |
| data-date-max-date | 最大可选择的日期 | data-date-max-date="2046-10-01" |
| data-date-use-current | 使用当前的日期时间 | data-date-use-current="true" |
| data-date-default-date | 默认日期 | data-date-default-date="2011-10-01" |
| data-date-disabled-dates | 禁用的日期组 | data-date-disabled-dates='["2011-10-02"]' |
| data-date-enabled-dates | 可用的日期组 | data-date-enabled-dates='["2011-10-02"]' |
| data-date-use-strict | 使用严格的日期时间,错误日期将被忽略 | data-date-use-strict="true" |
| data-date-side-by-side | 日期时间并排显示 | data-date-side-by-side="true" |
更多的使用方法请参考Bootstrap-datetimepicker官方教程
9.开关
开关组件常用于状态值的变更或只有两个值的切换。使用开关组件只需要给我们的操作按钮添加data-toggle="switcher"
即可，如下：
10.选项卡
页面样式
页面代码
id和href对应
商品管理
11.自己写上传
