fastadmin 基础

最新推荐文章于 2024-03-07 16:18:12 发布

solitaire.

最新推荐文章于 2024-03-07 16:18:12 发布

阅读量3.4k

点赞数 2

分类专栏： fastadmin php 文章标签： php 开发语言后端

本文链接：https://blog.csdn.net/zyh2468/article/details/120992166

版权

php 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

fastadmin

21 篇文章 1 订阅

订阅专栏

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.button

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'])}

<div class="radio">

<label for="row[order_state]-0">

<input id="row[order_state]-0" checked="checked" name="row[order_state]" type="radio" value="0"> 取消或者退款</label>

 <label for="row[order_state]-10"><input id="row[order_state]-10" name="row[order_state]" type="radio" value="10"> 待支付</label> <label for="row[order_state]-20"><input id="row[order_state]-20" name="row[order_state]" type="radio" value="20"> 待支付</label> <label for="row[order_state]-21"><input id="row[order_state]-21" name="row[order_state]" type="radio" value="21"> 待支付</label> <label for="row[order_state]-23"><input id="row[order_state]-23" name="row[order_state]" type="radio" value="23"> 待支付</label> <label for="row[order_state]-26"><input id="row[order_state]-26" name="row[order_state]" type="radio" value="26"> 待支付</label> <label for="row[order_state]-30"><input id="row[order_state]-30" name="row[order_state]" type="radio" value="30"> 待支付</label> <label for="row[order_state]-40"><input id="row[order_state]-40" name="row[order_state]" type="radio" value="40"> 待支付</label></div>

3.动态下拉

FastAdmin中的动态下拉列表使用的是优秀强大的Selectpage插件来支持，FastAdmin对其进行了二次开发。
下面介绍一个最基础的动态下拉列表示例，如下

<input id="c-name" data-rule="required" data-source="category/selectpage" class="form-control selectpage" name="row[name]" type="text" value="">

其中需要给元素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值即可。


<!--由于在初始化中修改了默认值,所以这里需要修改-jsonSpace/jsonValue/jsonName的值-->
<div class="form-inline" data-toggle="cxselect" data-url="/assets/libs/fastadmin-cxselect/js/cityData.min.json" data-selects="province,city,area" data-json-space="" data-json-name="n" data-json-value="">
<select class="province form-control" data-first-title="选择省">
<option value="">请选择</option>
<option value="浙江省" selected="">浙江省</option>
</select>
<select class="city form-control" data-first-title="选择市">
<option value="">请选择</option>
<option value="杭州市" selected="">杭州市</option>
</select>
<select class="area form-control" data-first-title="选择地区">
<option value="">请选择</option>
<option value="西湖区" selected="">西湖区</option>
</select>
</div>

类别联动(Ajax读取数据)


<div class="form-inline" data-toggle="cxselect" data-selects="first,second">
<select class="first form-control" name="first" data-url="ajax/category?type=page&amp;pid=5">
<option value="6" selected="">网站建站</option>
</select>
<select class="second form-control" name="second" data-url="ajax/category" data-query-name="pid">
<option value="9" selected="">移动端</option>
</select>
</div>

6.键值

键值组件是FastAdmin开发的一项简洁实用的基础组件，在FastAdmin中很多模块都有使用到该组件，例如常规管理->系统配置->字典配置均使用此组件开发，我们在插件管理配置中也经常可以看到键值组件的身影。

以下是键值组件最常用的使用方法：

<dl class="fieldlist" data-name="row[configgroup]">
    <dd>
        <ins>键名</ins>
        <ins>键值</ins>
    </dd>
    <dd>
        <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a>
    </dd>
    <textarea name="row[configgroup]" class="form-control hide" cols="30" rows="5">{"basic":"基础配置","email":"邮件配置","dictionary":"字典配置","user":"会员配置","example":"示例分组"}</textarea>
</dl>

通过将以上代码放置在我们的表单中，然后使用Form.api.bindevent("form")或Form.events.fieldlist("form")进行初始化即可。

以上是最简洁的使用方法，fieldlist还有更强大的自定义功能，如下：


<dl class="fieldlist" data-name="row[test]" data-template="testtpl">
    <dd>
        <ins>姓名</ins>
        <ins>性别</ins>
        <ins>年龄</ins>
        <ins>成绩</ins>
    </dd>
    <dd>
            <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a>
    </dd>
    <textarea name="row[test]" class="form-control hide" cols="30" rows="5">[{"name":"张三","gender":"男","age":"23","score":"80"},{"name":"李四","gender":"男","age":"26","score":"90"}]</textarea>
</dl>
<!--定义模板-->
<script type="text/javascript" id="testtpl">
    <dd class="form-inline">
        <input type="text" name="row[<%=name%>][<%=index%>][name]" class="form-control" value="<%=row['name']%>" size="10"> 
        <input type="text" name="row[<%=name%>][<%=index%>][gender]" class="form-control" value="<%=row['gender']%>" size="30"> 
        <input type="text" name="row[<%=name%>][<%=index%>][age]" class="form-control" value="<%=row['age']%>" size="30"> 
        <input type="text" name="row[<%=name%>][<%=index%>][score]" class="form-control" value="<%=row['score']%>" size="30"> 
        <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
    </dd>
</script>

通过以上定义，可以任意自定义我们展示项的数据。

如果我们需要在点击追加按钮以后再对新增的展示项绑定事件，我们可以在JS中通过监听事件来给新增的元素绑定事件

 $(document).on("fa.event.appendfieldlist", 'data-name="row[test]"', function(){
  Form.api.bindevent(this);
});

7.上传

FastAdmin的上传功能非常强大，我们只需要简单的配置即可支持单图或多图上传。

<div class="form-group">
    <label for="c-avatar" class="control-label col-xs-12 col-sm-2">头像:</label>
    <div class="col-xs-12 col-sm-8">
        <div class="input-group">
            <input id="c-avatar" data-rule="" class="form-control" size="50" name="row[avatar]" type="text" value="{$row.avatar}">
            <div class="input-group-addon no-border no-padding">
                <span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-avatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-avatar"><i class="fa fa-upload"></i> 上传</button></span>
                <span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-avatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
            </div>
            <span class="msg-box n-right" for="c-avatar"></span>
        </div>
        <ul class="row list-inline plupload-preview" id="p-avatar"></ul>
    </div>
</div>

我们可以看到这里配置了一个文本框、一个上传按钮、一个选择按钮和一个预览的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。

<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Vediofile')}:</label>
    <div class="col-xs-12 col-sm-8">
        <div class="input-group">
            <input id="c-vediofile" class="form-control" size="50" name="row[vediofile]" type="text">
            <div class="input-group-addon no-border no-padding">
                <span><button type="button" id="plupload-vediofile" class="btn btn-danger plupload" data-input-id="c-vediofile" data-mimetype="mp4,mp3,avi,flv,wmv" data-multiple="false" data-maxsize="50M"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                <span><button type="button" id="fachoose-vediofile" class="btn btn-primary fachoose" data-input-id="c-vediofile" data-mimetype="mp4,mp3,avi,flv,wmv" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
            </div>
            <span class="msg-box n-right" for="c-vediofile"></span>
        </div>
    </div>
</div>

二、修改application/extra/upload.php中的maxsize配置：


<?php
 
//上传配置
return [
    // ....
 
    /**
     * 最大可上传大小
     */
    '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"
即可，如下：

 <input  id="c-switch" name="row[switch]" type="hidden" value="0">

<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch" data-yes="1" data-no="0" >


<i class="fa fa-toggle-on text-success {eq name="$row.switch" value="0"}fa-flip-horizontal text-gray{/eq} fa-2x"></i>

</a>

10.选项卡

页面样式

  <style type="text/css">
    @media (max-width: 375px) {
        .edit-form tr td input {
            width: 100%;
        }

        .edit-form tr th:first-child, .edit-form tr td:first-child {
            width: 20%;
        }

        .edit-form tr th:nth-last-of-type(-n+2), .edit-form tr td:nth-last-of-type(-n+2) {
            display: none;
        }
    }

    .edit-form table > tbody > tr td a.btn-delcfg {
        visibility: hidden;
    }

    .edit-form table > tbody > tr:hover td a.btn-delcfg {
        visibility: visible;
    }

    @media (max-width: 767px) {
        .edit-form table tr th:nth-last-child(-n + 2), .edit-form table tr td:nth-last-child(-n + 2) {
            display: none;
        }
        .edit-form table tr td .msg-box {
            display: none;
        }
    }
    
    .fade {
        display: none;
    }
    .in {
        display: block;
    }
</style>

页面代码

id和href对应


 <div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <div class="panel-lead"><em>商品管理</em> </div>        
        <ul class="nav nav-tabs">
            <li class="active"><a href="#basic" data-toggle="tab">基础设置</a></li>
            <li class=""><a href="#email" data-toggle="tab">规格管理</a></li> 
            <li class=""><a href="#parameter" data-toggle="tab">商品属性</a></li>       
        </ul>
    </div>

    <div class="panel-body">
        <div id="myTabContent" class="tab-content"> 
            <!--@formatter:off-->
            
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
            <div class="tab-pane fade active in" id="basic"> 
 
				<div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('售后描述')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-after_sales" class="form-control" name="row[after_sales]" type="text">
                    </div>
                </div>
            </div>
      
			<div class="tab-pane fade " id="parameter">
				<div class="widget-body no-padding">
				
                </div>
            </div>
	    <div class="tab-pane fade " id="email">
                <div class="widget-body no-padding">
				 </div>
            </div>

             </form>
            <!--@formatter:on-->
        </div>
    </div>
</div>

11.自己写上传

 
  <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
 	 
  
        <style type="text/css">
        
             
            input[type|="file"]{
				display:none;
			}
			.filebutton {
				background-color: #d62c1a;
				border-color: #cd2a19;
				border-radius: 3px;
				border: none;
				color: white;
				padding: 6px 12px;
				text-align: center;
				text-decoration: none;
				display: inline-block;
				font-size: 16px;
				margin: 4px 2px;
				cursor: pointer;
			}
        </style> 
      <div class="upload">
		         <input id="c-specimages0"  class="form-control"  name="aa1[specimages]" type="text"   > 
                 <input type="file" id="plupload-specimages0" class="imgfile"   text_id="c-specimages0" >  
					<button class="filebutton"    p_id="plupload-specimages0">上传</button>
          
      </div>
    </body>
    <script type="text/javascript">
   $(".upload").on('change',".imgfile", function(){  
	
			 var text_id= $(this).attr("text_id");
			 var fileObj1 =  document.getElementById($(this).attr("id")).files[0]; // js 获取文件对象   
			 var formFile = new FormData();  
			 formFile.append("file", fileObj1);//加入文件对象 
	  
			  $.ajax({
					url:'http://120.27.192.57:8084/FzSDZrWGeX.php/ajax/upload',
					type:'post',
					data: formFile, 
					processData : false,// 告诉jQuery不要去处理发送的数据，用于对data参数进行序列化处理 这里必须false 	
					contentType : false, // 告诉jQuery不要去设置Content-Type请求头
					success:function(response){
						var fullurl=res.data.fullurl;
						   $(".form-group").find("#"+text_id).val(fullurl);
					}
			  })
  })
        
		  //change _id
			$(".upload").on('click',".filebutton",function(){ 
			
			 var p_id= $(this).attr("p_id");
				$("#"+p_id).click();
		  })
    </script>
</html>

12.规格

百度网盘：百度网盘请输入提取码

提取码：cwq8

13.数字

<input id="c-week1" class="form-control num-input" name="row[week1]" type="number"   value="{$row.week1|htmlentities}">

限制最小值

<input id="c-week1" class="form-control num-input" name="row[week1]" type="number"   min='1' value="{$row.week1|htmlentities}">

 <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script>
                //输入框只能输入数字 0 正整数
        $(document).on('input', '.num-input', function () {
     
            let val = $(this).val();
            //只能输入数字
            
            if(val<=0){
                
                val = val.slice(0, 1);
            }
           
            $(this).val(val);
        });
    </script>

三、表格

1.实例化表格

依赖

在FastAdmin中如果需要使用Bootstrap-table，需要使用require引入table模块。table模块对应的是assets/js/require-table.js文件，FastAdmin做了许多通用方法和默认值操作。

载入依赖

require(['table'], function(Table){
    //编写实例化代码
    //使用Table对象
});

引入CSS

由于表格列表常用于后台管理列表，后台已经默认引入了表格相关的CSS文件，在前台未引入相关的CSS文件，如果你需要在前台使用到Bootstrap-table，则需要手动载入表格相关的CSS文件。如下：

<link rel="stylesheet" type="text/css" href="__CDN__/assets/libs/bootstrap-table/dist/bootstrap-table.mi

Table对象

我们引入表格依赖后table后，我们就可以通过Table来进行相关表格的初始化和绑定相关事件。
返回的Table对象包括以下几个对象：

{
    list:[], //实例化的表格对象列表
    defaults:{}, //默认表格参数
    columnDefaults:{}, //默认列参数
    config:{}, //相关按钮的DOM选择类
    button:{}, //默认编辑、删除、排序按钮配置
    api:{} //封装的API方法
}

Table.list

其中Table.list存储的是表格实例化后的对象。比如我们实例化的表格有个id="mytable"的属性，则我们可以通过

Table.list['mytable']

来获取此表格的Bootstrap-table的对象。

Table.defaults

Table.defaults是指Bootstrap-table表格参数默认值。修改单一的值，我们可以直接通过

Table.defaults.showExport = false;

来进行修改

Table.columnDefaults

Table.columnDefaults是指Bootstrap-table表格列参数默认值修改单一的值，我们可以直接通过

Table.columnDefaults.align = 'left';

来进行修改

Table.config

Table.config是指表格使用到的按钮和工具栏的DOM选择类，一般情况下不建议修改。

Table.button

Table.button是指表格默认编辑、删除、挺拽按钮的配置信息，一般情况下不建议修改。

Table.api

Table.api封装了表格常用的方法、单元格事件及渲染方法。在表格中会经常使用到。

Table.api.init(defaults, columnDefaults, locales) //此方法用于初始化表格默认配置、表格列配置、写入语言包等操作
Table.api.bindevent(table) //此方法用于为表格中的元素绑定相关事件
Table.api.multi(action, ids, table, element) //此方法常用于批量操作请求，内部使用
Table.api.events.operate //操作栏单元格方法
Table.api.events.image //图片栏单元格方法
Table.api.formatter //格式化方法，后面单独介绍
Table.api.buttonlink(column, buttons, value, row, index, type) //按钮链接生成，内部使用
Table.api.replaceurl(url, row, table) //替换URL中的数据
Table.api.selectedids(table) //获取选中的条目ID集合
Table.api.toggleattr(table) //切换复选框状态
Table.api.getrowdata(table, index) //根据行索引获取行数据
Table.api.getrowbyindex(table, index) //根据行索引获取行数据
Table.api.getrowbyid(table, id) //根据主键ID获取行数据

Table.api.formatter

Table.api.formatter封装了许多FastAdmin表格列表中常用的单元格数据渲染的方法。

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 //渲染成按钮组

实例化

在使用JS实例化表格之前，首先我们的HTML中必须存在一个table表格，在后台管理列表中常见的表格如：

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

初始化

在FastAdmin中可以使用Table.api.init进行表格的初始化配置操作，比如表格参数，列参数，语言包等等。

// 初始化表格参数配置
Table.api.init({
    extend: {
        index_url: 'test/index' + location.search,
        add_url: 'test/add',
        edit_url: 'test/edit',
        del_url: 'test/del',
        multi_url: 'test/multi',
        table: 'test',
    }
});

以上初始化的方法是我们在JS代码中最常看见的，我们还可以使用

Table.api.init({
    pageSize: 20, //调整分页大小为20
    pageList: [10, 25, 50, 100, 'All'], //增加一个100的分页大小
});

等方式来修改表格的默认参数和默认列参数信息，具体可修改的参数请参考表格参数章节和列参数章节

参数中的extend这个参数值是非常重要的一个信息点，此参数用于配置我们加载数据列表的URL、添加文档的URL、编辑文档的URL和删除文档URL等

实例化

通过以上的初始化以后即可使用以下代码进行表格实例化操作了

var table = $("#table");

// 初始化表格
table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'weigh',
    columns: [
        [
            {checkbox: true},
            {field: 'id', title: __('Id')},
            {field: 'category_id', title: __('Category_id')},
            {field: 'title', title: __('Title')},
            {field: 'image', title: __('Image'), events: Table.api.events.image, formatter: Table.api.formatter.image},
            {field: 'images', title: __('Images'), events: Table.api.events.image, formatter: Table.api.formatter.images},
            {field: 'refreshtime', title: __('Refreshtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
            {field: 'weigh', title: __('Weigh')},
            {field: 'switch', title: __('Switch'), searchList: {"1":__('Yes'),"0":__('No')}, formatter: Table.api.formatter.toggle},
            {field: 'status', title: __('Status'), searchList: {"normal":__('Normal'),"hidden":__('Hidden')}, formatter: Table.api.formatter.status},
            {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
        ]
    ]
});

// 为表格绑定事件
Table.api.bindevent(table);

如果你的表格只是需要单纯的将普通表格转化为Bootstrap-table，可以直接使用

$('#table').bootstrapTable({
    url: 'data1.json',
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }, ]
});

的方式来渲染，无需进行Table.api.init和Table.api.bindevent操作，Table.api.bindevent只是扩展了工具栏、按钮组和事件绑定等信息。

表格参数

表格的参数定义在jQuery.fn.bootstrapTable.defaults。

名称	标签	类型	默认	描述
-	data-toggle	String	'table'	不用写 JavaScript 直接启用表格。
classes	data-classes	String	'table table-hover'	表格的类名称。默认情况下，表格是有边框的，你可以添加 'table-no-bordered' 来删除表格的边框样式。
sortClass	data-sort-class	String	undefined	被排序的td元素的类名。
height	data-height	Number	undefined	定义表格的高度。
undefinedText	data-undefined-text	String	'-'	当数据为 undefined 时显示的字符。
striped	data-striped	Boolean	false	设置为`true`会有隔行变色效果。
sortName	data-sort-name	String	undefined	定义排序列，通过url方式获取数据填写字段名，否则填写下标。
sortOrder	data-sort-order	String	'asc'	定义排序方式，'asc' 或者 'desc'。
sortStable	data-sort-stable	Boolean	false	设置为`true`将获得稳定的排序，我们会添加`_position`属性到 row 数据中。
iconsPrefix	data-icons-prefix	String	'glyphicon'	定义字体库 ('Glyphicon' or 'fa' for FontAwesome)，使用"fa"时需引用 FontAwesome，并且配合 icons 属性实现效果。 Glyphicon 集成于Bootstrap可免费使用，参考：GLYPHICONS - Visual language that everybody understands
FontAwesome 参考：http://fortawesome.github.io/
icons	data-icons	Object	{ paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down', paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up', refresh: 'glyphicon-refresh icon-refresh' toggle: 'glyphicon-list-alt icon-list-alt' columns: 'glyphicon-th icon-th' detailOpen: 'glyphicon-plus icon-plus' detailClose: 'glyphicon-minus icon-minus' }	自定义图标
columns	-	Array	[]	列配置项，详情请查看列参数表格.
data	-	Array	[]	加载json格式的数据。
ajax	data-ajax	Function	undefined	自定义 AJAX 方法，须实现 jQuery AJAX API。
method	data-method	String	'get'	服务器数据的请求方式 'get' 或 'post'。
url	data-url	String	undefined	服务器数据的加载地址。
cache	data-cache	Boolean	true	设置为`false`禁用 AJAX 数据缓存。
contentType	data-content-type	String	'application/json'	发送到服务器的数据编码类型。
dataType	data-data-type	String	'json'	服务器返回的数据类型。
ajaxOptions	data-ajax-options	Object	{}	提交ajax请求时的附加参数，可用参数列请查看jQuery.ajax() \| jQuery API Documentation.
queryParams	data-query-params	Function	function(params) { return params; }	请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数如果 queryParamsType = 'limit' ,返回参数必须包含 limit, offset, search, sort, order 否则, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder. 返回false将会终止请求。
queryParamsType	data-query-params-type	String	'limit'	设置为 'limit' 则会发送符合 RESTFul 格式的参数。
responseHandler	data-response-handler	Function	function(res) { return res; }	加载服务器数据之前的处理程序，可以用来格式化数据。参数：res为从服务器请求到的数据。
pagination	data-pagination	Boolean	false	设置为`true`会在表格底部显示分页条。
paginationLoop	data-pagination-loop	Boolean	true	设置为`true`启用分页条无限循环的功能。
onlyInfoPagination	data-only-info-pagination	Boolean	false	设置为`true`只显示总数据数，而不显示分页按钮。需要设置 pagination='true'。
sidePagination	data-side-pagination	String	'client'	设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法。
pageNumber	data-page-number	Number	1	如果设置了分页，首页页码。
pageSize	data-page-size	Number	10	如果设置了分页，页面数据条数。
pageList	data-page-list	Array	[10, 25, 50, 100, All]	如果设置了分页，设置可供选择的页面数据条数。设置为 All 或者 Unlimited，则显示所有记录。
selectItemName	data-select-item-name	String	'btSelectItem'	radio 或者 checkbox 的字段 name 名。
smartDisplay	data-smart-display	Boolean	true	设置为 true 是程序自动判断显示分页信息和 card 视图。
escape	data-escape	Boolean	false	转义HTML字符串，替换`&`,`<`,`>`,`"`,```, 和`'`字符。
search	data-search	Boolean	false	是否启用搜索框。
searchOnEnterKey	data-search-on-enter-key	Boolean	false	设置为`true`时，按回车触发搜索方法，否则自动触发搜索方法。
strictSearch	data-strict-search	Boolean	false	设置为`true`启用全匹配搜索，否则为模糊搜索。
searchText	data-search-text	String	''	初始化搜索文字。
searchTimeOut	data-search-time-out	Number	500	设置搜索超时时间。
trimOnSearch	data-trim-on-search	Boolean	true	设置为`true`将自动去掉搜索字符的前后空格。
showHeader	data-show-header	Boolean	true	是否显示列头。
showFooter	data-show-footer	Boolean	false	是否显示列脚。
showColumns	data-show-columns	Boolean	false	是否显示内容列下拉框。
showRefresh	data-show-refresh	Boolean	false	是否显示刷新按钮。
showToggle	data-show-toggle	Boolean	false	是否显示切换视图（table/card）按钮。
showPaginationSwitch	data-show-pagination-switch	Boolean	false	是否显示切换分页按钮。
showFullscreen	data-show-fullscreen	Boolean	false	是否显示全屏按钮。
minimumCountColumns	data-minimum-count-columns	Number	1	最小隐藏列的数量。
idField	data-id-field	String	undefined	指定主键列。
uniqueId	data-unique-id	String	undefined	对每一行指定唯一标识符。
cardView	data-card-view	Boolean	false	设置为`true`将显示card视图，适用于移动设备。否则为table试图，适用于pc端。
detailView	data-detail-view	Boolean	false	设置为`true`可以显示详细页面模式。
detailFormatter	data-detail-formatter	Function	function(index, row) { return ''; }	格式化详细页面模式的视图。
searchAlign	data-search-align	String	'right'	指定搜索框水平方向的位置。'left' 或 'right'。
buttonsAlign	data-buttons-align	String	'right'	指定按钮栏水平方向的位置。'left' 或 'right'。
toolbarAlign	data-toolbar-align	String	'left'	指定 toolbar 水平方向的位置。'left' 或 'right'。
paginationVAlign	data-pagination-v-align	String	'bottom'	指定分页条在垂直方向的位置。'top'，'bottom' 或 'both'。
paginationHAlign	data-pagination-h-align	String	'right'	指定分页条在水平方向的位置。'left' 或 'right'。
paginationDetailHAlign	data-pagination-detail-h-align	String	'left'	指定分页详细信息在水平方向的位置。'left' 或 'right'。
paginationPreText	data-pagination-pre-text	String	'<'	指定分页条中上一页按钮的图标或文字。
paginationNextText	data-pagination-next-text	String	'>'	指定分页条中下一页按钮的图标或文字。
clickToSelect	data-click-to-select	Boolean	false	设置 true 将在点击行时，自动选择 rediobox 和 checkbox。
ignoreClickToSelectOn	data-ignore-click-to-select-on	Function	`{ return $.inArray(element.tagName, ['A','BUTTON']); }`	包含一个参数： element: 点击的元素。返回 true 是点击事件会被忽略，返回 false 将会自动选中。该选项只有在 clickToSelect 为 true 时才生效。
singleSelect	data-single-select	Boolean	false	设置 true 将禁止多选。
toolbar	data-toolbar	String	undefined	一个jQuery 选择器，指明自定义的 toolbar。例如:
#toolbar, .toolbar.
buttonsToolbar	data-buttons-toolbar	String	Node	undefined
#buttons-toolbar, .buttons-toolbar 或 DOM 节点。
checkboxHeader	data-checkbox-header	Boolean	true	设置 false 将在列头隐藏全选复选框。
maintainSelected	data-maintain-selected	Boolean	false	设置为`true`在点击分页按钮或搜索按钮时，将记住checkbox的选择项。
sortable	data-sortable	Boolean	true	设置为`false`将禁止所有列的排序。
silentSort	data-silent-sort	Boolean	true	设置为`false`将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为`server`时生效。
rowStyle	data-row-style	Function	function(row,index) { return class; }	自定义行样式参数为： row: 行数据 index: 行下标返回值可以为class或者css
rowAttributes	data-row-attributes	Function	function(row,index) { return attributes; }	自定义行属性参数为： row: 行数据 index: 行下标返回值可以为class或者css 支持所有自定义属性
customSearch	data-custom-search	Function	$.noop	自定义搜索方法来替代内置的搜索功能，它包含一个数： text：搜索文字。用法示例： function customSearch(text) { //Search logic here. //You must use`this.data`array in order to filter the data. NO use`this.options.data`. }
customSort	data-custom-sort	Function	$.noop	自定义排序方法来替代内置的搜索功能，它包含一个参数： sortName: 排序名。 sortOrder: 排序顺序。用法示例： function customSort(sortName, sortOrder) { //Sort logic here. //You must use`this.data`array in order to sort the data. NO use`this.options.data`. }

列参数定义在jQuery.fn.bootstrapTable.columnDefaults。

名称	标签	类型	默认	描述
radio	data-radio	Boolean	false	True to show a radio. The radio column has fixed width.
checkbox	data-checkbox	Boolean	false	True to show a checkbox. The checkbox column has fixed width.
field	data-field	String	undefined	The column field name.
title	data-title	String	undefined	The column title text.
titleTooltip	data-title-tooltip	String	undefined	The column title tooltip text. This option also support the title HTML attribute
class	class / data-class	String	undefined	The column class name.
rowspan	rowspan / data-rowspan	Number	undefined	Indicate how many rows a cell should take up.
colspan	colspan / data-colspan	Number	undefined	Indicate how many columns a cell should take up.
align	data-align	String	undefined	Indicate how to align the column data. 'left', 'right', 'center' can be used.
halign	data-halign	String	undefined	Indicate how to align the table header. 'left', 'right', 'center' can be used.
falign	data-falign	String	undefined	Indicate how to align the table footer. 'left', 'right', 'center' can be used.
valign	data-valign	String	undefined	Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.
width	data-width	Number {Pixels or Percentage}	undefined	The width of column. If not defined, the width will auto expand to fit its contents. Also you can add '%' to your number and the bootstrapTable will use the percentage unit, otherwise, you can add or no the 'px' to your number and then the bootstrapTable will use the pixels
sortable	data-sortable	Boolean	false	True to allow the column can be sorted.
order	data-order	String	'asc'	The default sort order, can only be 'asc' or 'desc'.
visible	data-visible	Boolean	true	False to hide the columns item.
cardVisible	data-card-visible	Boolean	true	False to hide the columns item in card view state.
switchable	data-switchable	Boolean	true	False to disable the switchable of columns item.
clickToSelect	data-click-to-select	Boolean	true	True to select checkbox or radiobox when the column is clicked.
formatter	data-formatter	Function	undefined	The context (this) is the column Object. The cell formatter function, take three parameters: value: the field value. row: the row record data. index: the row index.
footerFormatter	data-footer-formatter	Function	undefined	The context (this) is the column Object. The function, take one parameter: data: Array of all the data rows. the function should return a string with the text to show in the footer cell.
events	data-events	Object	undefined	The cell events listener when you use formatter function, take three parameters: event: the jQuery event. value: the field value. row: the row record data. index: the row index.
sorter	data-sorter	Function	undefined	The custom field sort function that used to do local sorting, take two parameters: a: the first field value. b: the second field value. rowA: the first row. rowB: the second row.
sortName	data-sort-name	String	undefined	Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of "html" such as "abc", but a fieldName to sort is "content" with the value of "abc".
cellStyle	data-cell-style	Function	undefined	The cell style formatter function, take three parameters: value: the field value. row: the row record data. index: the row index. field: the row field. Support classes or css.
searchable	data-searchable	Boolean	true	True to search data for this column.
searchFormatter	data-search-formatter	Boolean	true	True to search use formated data.
escape	data-escape	Boolean	false	Escapes a string for insertion into HTML, replacing &, , ", `, and ' characters.
showSelectTitle	data-show-select-title	Boolean	false	True to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.

使用方法的语法：$('#table').bootstrapTable('method', parameter);。

名称	参数	描述	例子
getOptions	none	返回表格的 Options。	getOptions
getSelections	none	返回所选的行，当没有选择任何行的时候返回一个空数组。	getSelections
getAllSelections	none	返回所有选择的行，包括搜索过滤前的，当没有选择任何行的时候返回一个空数组。	getAllSelections
getData	useCurrentPage	或者当前加载的数据。假如设置 useCurrentPage 为 true，则返回当前页的数据。	getData
getRowByUniqueId	id	根据 uniqueId 获取行数据。	getRowByUniqueId
load	data	加载数据到表格中，旧数据会被替换。	load
showAllColumns	none	显示所有列。	showAllColumns
hideAllColumns	none	隐藏所有列。	hidAllColumns
append	data	添加数据到表格在现有数据之后。	append
prepend	data	插入数据到表格在现有数据之前。	prepend
remove	params	从表格中删除数据，包括两个参数： field: 需要删除的行的 field 名称， values: 需要删除的行的值，类型为数组。	remove
removeAll	-	删除表格所有数据。	removeAll
removeByUniqueId	id	根据 uniqueId 删除指定的行。	removeByUniqueId
insertRow	params	插入新行，参数包括： index: 要插入的行的 index， row: 行的数据，Object 对象。
updateRow	params	更新指定的行，参数包括： index: 要更新的行的 index， row: 行的数据，Object 对象。
showRow	params	显示指定的行，参数包括： index: 要更新的行的 index 或者 uniqueId， isIdField: 指定 index 是否为 uniqueid。	showRow-hideRow
hideRow	params	显示指定的行，参数包括： index: 要更新的行的 index， uniqueId: 或者要更新的行的 uniqueid。	showRow-hideRow
getHiddenRows	show	获取所有隐藏的行，如果show参数为true，行将再次显示，否则，只返回隐藏的行。
mergeCells	options	将某些单元格合并到一个单元格，选项包含以下属性： index: 行索引， field: 字段名称， rowspan: 要合并的rowspan数量， colspan: 要合并的colspan数量。
updateCell	params	更新一个单元格，params包含以下属性：

index: 行索引。
field: 字段名称。
value: 新字段值。 |
| refresh | params | 刷新远程服务器数据，可以设置{silent: true}以静默方式刷新数据，并设置{url: newUrl}更改URL。要提供特定于此请求的查询参数，请设置{query: {foo: 'bar'}}。 |
| refreshOptions | options | 刷新选项。 |
| resetSearch | text | 设置搜索文本。 |
| showLoading | none | 显示加载状态。 |
| hideLoading | none | 隐藏加载状态。 |
| checkAll | none | 选中当前页面所有行。 |
| uncheckAll | none | 取消选中当前页面所有行。 |
| check | index | 选中某一行，行索引从0开始。 |
| uncheck | index | 取消选中某一行，行索引从0开始。 |
| checkBy | params | 按值或数组选中某行，参数包含：
field: 用于查找记录的字段的名称，
values: 要检查的行的值数组。
例子:
$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]}) |
| uncheckBy | params | 按值数组取消选中某行，参数包含：
field: 用于查找记录的字段的名称，
values: 要检查的行的值数组。
例子:
$("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]}) |
| resetView | params | 重置引导表视图，例如重置表高度。 |
| resetWidth | none | 调整页眉和页脚的大小以适合当前列宽度。 |
| destroy | none | 销毁表。 |
| showColumn | field | 显示指定的列。 |
| hideColumn | field | 隐藏指定的列。 |
| getHiddenColumns | - | 获取隐藏的列。 |
| getVisibleColumns | - | 获取可见列。 |
| scrollTo | value | 滚动到指定位置，单位为 px，设置 'bottom' 表示跳到最后。 |
| getScrollPosition | none | 获取当前滚动条的位置，单位为 px。 |
| filterBy | params | （只能用于 client 端）过滤表格数据，你可以通过过滤{age: 10}来显示 age 等于 10 的数据。 |
| selectPage | page | 跳到指定的页。 |
| prevPage | none | 跳到上一页。 |
| nextPage | none | 跳到下一页。 |
| togglePagination | none | 切换分页选项。 |
| toggleView | none | 切换 card/table 视图 |
| expandRow | index | 如果详细视图选项设置为True，可展开索引为 index 的行。 |
| collapseRow | index | 如果详细视图选项设置为True，可收起索引为 index 的行。. |
| expandAllRows | none | 如果详细视图选项设置为True，可展开所有行。 |
| collapseAllRows | none | 如果详细视图选项设置为True，可收起开所有行。 |

2.分类表格显示

 //设置过滤方法
    $this->request->filter(['strip_tags']);
    if ($this->request->isAjax()) {
        $search = $this->request->request("search");
        $type = $this->request->request("type");
        $offset = $this->request->request("offset");
        $limit = $this->request->request("limit");

        //构造父类select列表选项数据
        $list = [];
	$tree = Tree::instance();
    $tree->init(collection($this->model->order('id desc')->select())->toArray(), 'pid');
    $this->categorylist = $tree->getTreeList($tree->getTreeArray(0), 'grade');
    $categorydata = [0 => ['type' => 'all', 'name' => __('None')]];
    foreach ($this->categorylist as $k => $v) {
        $categorydata[$v['id']] = $v;
    } 

  
        $total = count( $this->categorylist);
        $result = array("total" => $total, "rows" =>  array_slice($this->categorylist,$offset,$limit));

        return json($result);
    }
    return $this->view->fetch();

3.表格列表页（一张图）

功能描述

请根据图片上的数字索引查看对应功能说明。

1.菜单名称和描述
默认生成的CRUD是没有菜单名称和描述显示的，如果需要显示则可以修改权限管理->菜单规则，给对应菜单的添加上备注信息后即可显示，支持HTML

2.TAB过滤选项卡
在一键生成CRUD时，如果表中存在status字段且为ENUM类型，则会生成相应的TAB过滤选项卡，如果需要生成其它字段的过滤选项卡则可以在使用php think crud时使用--headingfilterfield=你的字段名称来指定字段

<div class="panel panel-default panel-intro">

    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="status">
            <li class="active"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            <li><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>
    </div>


    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
<!--                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('unishop/order/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>-->
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('unishop/order/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('unishop/order/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
<!--                        <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('unishop/order/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="fa fa-upload"></i> {:__('Import')}</a>-->

                        <div class="dropdown btn-group {:$auth->check('unishop/order/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>

                        <a class="btn btn-success btn-recyclebin btn-dialog {:$auth->check('unishop/order/recyclebin')?'':'hide'}" href="unishop/order/recyclebin" title="{:__('Recycle bin')}"><i class="fa fa-recycle"></i> {:__('Recycle bin')}</a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('unishop/order/edit')}"
                           data-operate-del="{:$auth->check('unishop/order/del')}"            
                           data-search="false"
                           data-show-toggle="false"
                           data-show-columns="false"
                           data-show-export="false"
                           data-common-search="false" 
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

3.通用搜索
通用搜索的的内容是根据bootstrap-table配置的字段columns决定的，渲染的内容及格式由FastAdmin自动进行渲染，如果需要禁用或删除某一选项，可以在JS中配置operate:false来删除通用搜索中的选项。例如通常情况下我们的在JS中进行字段的配置如下：

{field: 'createtime', title: __('Create Time')},

这里默认是启用的通用搜索，针对通用搜索，有以下几个常用的配置：

operate:'=' //用于查询时的操作符，默认为=，为false表示禁用此字段的通用搜索，支持!=、LIKE、NOT LIKE、>、<、>=<=、FIND_IN_SET、IN、NOT IN、BETWEEN、NOT BETWEEN、RANGE、NOT RANGE、NULL、NOT NULL、false
searchList: //用于渲染列表的数据，支持的格式有JSON Array、JSON Object、$.getJSON、Function
addclass: //用于给input或select添加额外的class属性
type: //用于定义input文本框的类型,默认为text
data: //用于给input或select添加额外的属性

常用配置示例如下：

//时间区间搜索
{field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
//金额区间搜索
{field: 'money', title: __('Money'), operate: 'RANGE'},
//下拉列表搜索
{field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
//动态下拉列表搜索
{field: 'type', title: __('Type'), searchList: $.getJSON("ajax/dynamicselect")},
//禁用通用搜索
{field: 'keywords', title: __('Keywords'), operate: false},

如果我们需要完全自定义我们的通用搜索栏，我们可以在配置bootstrap-table时定义searchFormTemplate选项来完全重写我们的通用搜索栏，具体请参考开发示例插件中的自定义搜索示例
如果希望默认显示通用搜索，可以使用searchFormVisible: true来强制显示通用搜索。

4.工具栏按钮
FastAdmin在一键CRUD时会自动生成添加、编辑、删除、导入、更多按钮的HTML，这些按钮会根据用户所拥有的权限控制基是否显示或隐藏。我们可以在控制器对应的index.html视图文件中任意修改或删除对应的按钮。请特别注意这几个自动生成的按钮都通过基拥有的class属性来绑定相关的事件，例如添加按钮拥有btn-add这个class、框架所已经占用的class如下：

btn-add: 添加按钮使用
btn-edit: 编辑按钮使用
btn-del: 删除按钮使用
btn-import: 导入按钮使用
btn-more: 更多按钮使用
btn-multi: 指操作使用
btn-disabled: 添加此class后则只有在列表有选中数据时按钮才会变为可使用

如果我们想点击添加按钮后默认全屏，则可以给添加按钮加上data-area='["100%","100%"]'即可默认全屏
如果我们想自定义按钮并添加事件，我们需要在视图中添加相应的HTML代码，然后在对应的JS文件中添加按钮的执行事件，切记不可在视图中直接编写JS或jQuery代码来绑定事件

5.动态渲染统计信息
很多时候我们需要在页面额外显示服务端传回的动态数据，此时我们只需要在index.html视图中添加

<a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
    <i class="fa fa-dollar"></i>
    <span class="extend">
        金额：<span id="money">0</span>
        单价：<span id="price">0</span>
    </span>
</a>

然后在控制器对应的JS中的index方法中添加以下的JS

//当表格数据加载完成时
table.on('load-success.bs.table', function (e, data) {
    //这里可以获取从服务端获取的JSON数据
    console.log(data);
    //这里我们手动设置底部的值
    $("#money").text(data.extend.money);
    $("#price").text(data.extend.price);
});

注意务必将这段代码添加在var table = $("#table");之后
其中data.extend.money和data.extend.price就是我们在服务端动态返回的数据，如下

$result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
return json($result);

通过以上配置即可动态显示服务端返回的额外数据

6.快速搜索
快速搜索在键入关键词时将实时从服务端搜索数据，如果你的数据表数据较大，建议关闭此功能，关闭的方法是使用search:false，其次快速搜索默认只会搜索主键id这个字段，如果你需要搜索其它字段，则需要在服务端你的控制器中定义$searchFields这个值，如下

protected $searchFields = 'id,name,title';

这样在快速搜索时将会搜索id,name,title这三个字段。
如果需要修改默认文本框的placeholder，可以在表格初始化前定义

$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "自定义placeholder文本";};

隐藏

<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('scrb/elecall/edit')}" 
                           data-operate-del="{:$auth->check('scrb/elecall/del')}" 
                           data-search="false"
                           data-show-toggle="false"
                           data-show-columns="false"
                           data-show-export="false"
                           data-common-search="false"
 
 
                           width="100%">
 </table>

7.浏览模式、显示隐藏列、导出、通用搜索
浏览模式可以切换卡片视图和表格视图两种模式，如果不需要此功能，可以设置showToggle: false
显示隐藏列可以快速切换字段列的显示和隐藏，如果不需要此功能，可以设置showColumns: false，如果想要表格中的字段列默认隐藏可以设置字段属性visible: false即可默认隐藏
导出按钮默认将导出整个表的所有行，如果需要仅导出当前分页的数据，需要设置exportDataType: 'basic'，如果想导出选中的行，则可以设置为exportDataType: 'selected'，如果不需要此功能，可以设置showExport: false
通用搜索指表格上方的搜索，通用搜索的表单默认是隐藏的，如果需要默认显示，需要设置searchFormVisible: true，如果不需要通用搜索功能，可以设置commonSearch: false。如果想要控制字段列不参考搜索则可以设置字段列属性为operate: false即可。

8.字段配置
默认字段的控制是根据控制器对应的JS来配置的，因此字段配置是通过JS，而在我们的视图index.html中是没有任何字段配置的，通常我们的配置如下：

columns: [
    [
        {checkbox: true},
        {field: 'id', title: __('Id')},
        {field: 'admin_id', title: __('Admin_id')},
        {field: 'category.name', title: __('分类名称'), formatter:Table.api.formatter.search},
        {field: 'category_id', title: __('Category_id'), visible: false},
        {field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
        {field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
        {field: 'title', title: __('Title')},
        {field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
        {field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
        {field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
        {field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false},
        {field: 'weigh', title: __('Weigh'), operate: false, visible: false},
        {field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle},
        {field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
    ]
]

字段配置的参数有

checkbox:true, //是否为首列复选框
field:'name' //字段名称,如果启用了关联查询这里可以使用别名,比如:category.name,请注意服务端返回的字段一一对应，如果使用了一个不存在的字段，将不会渲染任何数据
title:'名称' //字段标题,显示于头部的标题
operate:'=' //通用搜索的操作符,详见上方通用搜索介绍
visible:false //字段是否可见，为false时将默认不可见
formatter:Table.api.formatter.search //格式化显示的内容,FastAdmin内部定义了许多通用的格式化方法
events: //定义元素响应的事件
searchList: //定义通用搜索下拉列表的数据
addclass: //通用搜索文本框或下拉列表的额外class
type: //通用搜索文本框的类型
data: //通用搜索文本框或下拉列表的额外属性
buttons: //配置的按钮组

FastAdmin封装了许多常用的formatter方法，我们可以快速的调用即可。

> `Table.api.formatter.icon` 快速将字段渲染成一个按钮，仅支持Fontawesome按钮
> `Table.api.formatter.image` 快速将字段渲染成图片展示的形式
> `Table.api.formatter.images` 快速将字段渲染成多图片展示的形式,字段数据请以`,`进行分隔
> `Table.api.formatter.status` 快速将字段渲染成状态，默认`normal/hidden/deleted/locked`这四个状态
> `Table.api.formatter.url` 快速将字段渲染成URL框
> `Table.api.formatter.search` 快速将字段渲染成可搜索的链接，点击后将执行搜索
> `Table.api.formatter.addtabs` 快速将字段渲染成可添加到选项卡的链接，点击后将把链接添加到选项卡
> `Table.api.formatter.flag` 快速将字段渲染成标志，仅支持`index/hot/recommend/new`这四种标志
> `Table.api.formatter.label` 快速将字段渲染Label标签
> `Table.api.formatter.datetime` 快速时间戳数据渲染成日期时间数据
> `Table.api.formatter.operate` 操作栏固定按钮
> `Table.api.formatter.buttons` 快速生成多个按钮
> `Table.api.formatter.toggle` 快速生成切换按钮

如果我们需要固定表头，可以在初始化表格时给表格添加一个固定的高度即可，例如：

height:300

9.复选框
如果我们需要不需要复选框则移除{checkbox: true}即可
从FastAdmin1.2.0版本开始已经支持跨页选择功能，如果需要启用跨页选择功能，可以在表格初始化时添加以下参数来启用：

//启用跨页选择
maintainSelected: true,

10.分类名称(关联搜索出分类表的名称)
这里显示的分类名称是根据分类表关联查询出来的结果，如果我们启用关联查询，我们必须在当前控制器中设置属性protected $relationSearch = true;，同时我们的index方法也需要重写，请参考下方的完整代码中PHP部分。如果我们启用了关联查询，当两个表中的字段有冲突时，我们必须在字段中加上别名。请参考下方的完整代码中JS部分。

11.标志
我们可以使用formatter:Table.api.formatter.flag来渲染标志字段，默认会将数据库的值渲染以下几种颜色

{index: 'success', hot: 'warning', recommend: 'danger', 'new': 'info'}

如果我们需要扩展额外的颜色，则可以使用

custom:{aaa: 'info', bbb:'danger'}

这样当值为aaa时会显示为蓝色，bbb时显示为红色

12.图片和图片组
我们可以使用

formatter:Table.api.formatter.image
formatter:Table.api.formatter.images

以上两种方式来渲染图片或图片组
请注意如果是图片组的情况下,数据值应该是以,进行分隔的

13.开关
我们可以使用formatter:Table.api.formatter.toggle来生成开关组件
默认情况下是根据数据库值1和0来表示开和关
我们可以通过额外的配置和定义开和关，比如

yes: 'open', no: 'close'

则此时会根据数据库值是open还是close来展示开关，
开关在点击的时候默认是只允许修改数据库的status字段的，如果我们开关不是status字段，我们需要在服务端对应的控制器中定义protected $multiFields="id,name,swith";，多个字段以,进行分隔

14.状态渲染
我们可以使用formatter:Table.api.formatter.status来渲染状态
默认根据以下值进行状态的颜色渲染

{normal: 'success', hidden: 'gray', deleted: 'danger', locked: 'info'}

如果我们状态有额外的值，我们可以使用custom来进行扩展显示的颜色，如下

custom: {rejected:'danger', agreed:'success'}

状态渲染显示的文本是根据searchList配置的值进行渲染的

15.自定义按钮
按钮组的功能是根据第8项中的Table.api.formatter.buttons进行生成的，代码如下

 {
    field: 'buttons',
    width: "120px",
    title: __('按钮组'),
    table: table,
    events: Table.api.events.operate,
    buttons: [
        {
            name: 'detail',
            text: __('弹出窗口打开'),
            title: __('弹出窗口打开'),
            classname: 'btn btn-xs btn-primary btn-dialog',
            icon: 'fa fa-list',
            url: 'example/bootstraptable/detail',
            callback: function (data) {
                Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
            },
            visible: function (row) {
                //返回true时按钮显示,返回false隐藏
                return true;
            }
        },
        {
            name: 'ajax',
            text: __('发送Ajax'),
            title: __('发送Ajax'),
            classname: 'btn btn-xs btn-success btn-magic btn-ajax',
            icon: 'fa fa-magic',
            url: 'example/bootstraptable/detail',
            confirm: '确认发送',
            success: function (data, ret) {
                Layer.alert(ret.msg + ",返回数据：" + JSON.stringify(data));
                //如果需要阻止成功提示，则必须使用return false;
                //return false;
            },
            error: function (data, ret) {
                console.log(data, ret);
                Layer.alert(ret.msg);
                return false;
            }
        },
        {
            name: 'addtabs',
            text: __('新选项卡中打开'),
            title: __('新选项卡中打开'),
            classname: 'btn btn-xs btn-warning btn-addtabs',
            icon: 'fa fa-folder-o',
            url: 'example/bootstraptable/detail'
        }
    ],
    formatter: Table.api.formatter.buttons
}

按钮配置支持的参数有：

name按钮唯一标识,其中add/edit/del/dragsort已经被占用,如果使用将覆盖相应的按钮配置。如果需要按钮按钮显示，我们可以在HTML视图文件的table添加data-buttons-标识来根据权限控制显示
text按钮的文本内容,如果不需要显示文本可忽略,支持function和string类型
title鼠标移上去的标题或弹窗/选项显示的标题,支持function和string类型
icon按钮的图标,请使用font-awesome图标库,比如fa fa-home
classname按钮的class, 其中classname中的btn-dialog、btn-ajax、btn-addtabs、btn-click，FastAdmin已经为这几个固定的Class注册了事件，所以可以直接使用，如果想要实现其它功能，需要自己手动编写代码绑定事件才可使用。
url按钮的链接/Ajax事件请求的URL/弹窗链接/选项卡链接，直接function和string类型,此链接会自动在链接后添加ids/{ids},{ids}为当行主键ID，如果需要传递其它字段值，请在URL中使用{字段名}占位即可
refresh自动刷新,只针对btn-ajax事件
confirm确认框提示文字,配置后会在确认操作再执行对应的事件，只针对btn-ajax/btn-dialog/btn-addtabs事件
success事件成功的回调,只针对btn-ajax事件
error事件失败的回调,只针对btn-ajax事件
callback弹窗回传的回调,只针对btn-dialog事件,需要在对应打开的页面中使用Fast.api.close(data);进行回传数据
hidden是否隐藏按钮,按钮默认显示,支持function和bool类型
visible是否显示按钮,按钮默认显示,支持function和bool类型
disable是否禁用按钮,按钮默认不禁用,支持function和bool类型
click当classname包含btn-click时的点击回调事件
extend按钮扩展信息,可以任意定制按钮的参数,比如我们想在新窗口中打开链接，则配置extend:' target="_blank"'即可
dropdown下拉列表分组的名称,当多个按钮需要显示为一级时,该值为显示的文字

如果，确认窗口没有展示的话
修改下public/assets/js/require-table.js第645行，改成：

 
confirm = typeof j.confirm === 'function' ? j.confirm.call(table, row, j) : (typeof j.confirm !== 'undefined' ? j.confirm : false);

16.操作
操作区域默认是排序、编辑、删除这三个按钮，此功能也是根据第8项中Table.api.formatter.operate来实现的。排序按钮只在表中存在weigh字段时才会出现，编辑按钮和删除按钮会根据管理员所拥有的权限进行按需显示。如果我们需要重写编辑(排序、删除)按钮的相关属性，则可以使用buttons来定义编辑(排序、删除)的相关属性。其次Table.api.formatter.operate也支持buttons属性来配置多个其它按钮，如示例图中的详情按钮，配置参数请参考第15.自定义按钮。请参考下方完整代码中JS部分。
如果希望禁用编辑、删除按钮，可以通过修改视图中表格的属性置为空即可。

<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
       data-operate-edit="" 
       data-operate-del="" 
       width="100%">
</table>

从FastAdmin1.2.0版本开发已经支持固定列功能，我们可以将右侧最后一定固定住，当出现横向滚动条时让最后一列始终固定在可视窗口中，如果需要开启此功能，请在初始化表格时添加以下两个参数即可。

//启用固定列
fixedColumns: true,
//固定右侧列数
fixedRightNumber: 1,

17.分页信息
分页信息显示的文字可以通过在表格初始化前定义

$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function (pageFrom, pageTo, totalRows) {
    return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
};

分页大小或分页大小选项可以在表格初始化时传入以下参数进行配置

pageSize: 10,
pageList: [10, 25, 50, 'All'],

18.翻页信息
翻页信息会根据服务端返回的数据行数自动进行渲染，如果返回的行数不满足分页条件时，此项是不会显示的

完整代码

PHP代码

<?php
namespace app\admin\controller;
use app\common\controller\Backend;
/**
 * 测试管理
 *
 * @icon fa fa-circle-o
 * @remark 此列表是通过php think crud -t test一键生成的针对数据表的查看、添加、编辑、删除、批量修改等功能，只需在设计表时符合FastAdmin相关字段名称、备注要求，即可生成相关的表单组件
 */
class Test extends Backend
{
    protected $model = null;
    protected $relationSearch = true;
    public function _initialize()
    {
        parent::_initialize();
        $this->model = model('Test');
    }
    /**
     * 查看
     */
    public function index()
    {
        if ($this->request->isAjax())
        {
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
            $total = $this->model
                    ->with("category")
                    ->where($where)
                    ->order($sort, $order)
                    ->count();
            $list = $this->model
                    ->with("category")
                    ->where($where)
                    ->order($sort, $order)
                    ->limit($offset, $limit)
                    ->select();
            $result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
            return json($result);
        }
        return $this->view->fetch();
    }
}

JS代码：

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'test/index',
                    add_url: 'test/add',
                    edit_url: 'test/edit',
                    del_url: 'test/del',
                    multi_url: 'test/multi',
                    table: 'test',
                }
            });

            var table = $("#table");

            //当表格数据加载完成时
            table.on('load-success.bs.table', function (e, data) {
                //这里可以获取从服务端获取的JSON数据
                console.log(data);
                //这里我们手动设置底部的值
                $("#money").text(data.extend.money);
                $("#price").text(data.extend.price);
            });

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'weigh',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'admin_id', title: __('Admin_id')},
                        {field: 'category.name', title: __('分类名称'), formatter:Table.api.formatter.search},
                        {field: 'category_id', title: __('Category_id'), visible: false},
                        {field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
                        {field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
                        {field: 'title', title: __('Title')},
                        {field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
                        {field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
                        {field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false},
                        {field: 'weigh', title: __('Weigh'), operate: false, visible: false},
                        {field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle},
                        {field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
                        {
                            field: 'buttons',
                            width: "120px",
                            title: __('按钮组'),
                            table: table,
                            events: Table.api.events.operate,
                            buttons: [
                                {
                                    name: 'detail',
                                    text: __('弹出窗口打开'),
                                    title: __('弹出窗口打开'),
                                    classname: 'btn btn-xs btn-primary btn-dialog',
                                    icon: 'fa fa-list',
                                    url: 'example/bootstraptable/detail',
                                    callback: function (data) {
                                        Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
                                    },
                                    visible: function (row) {
                                        //返回true时按钮显示,返回false隐藏
                                        return true;
                                    }
                                },
                                {
                                    name: 'ajax',
                                    text: __('发送Ajax'),
                                    title: __('发送Ajax'),
                                    classname: 'btn btn-xs btn-success btn-magic btn-ajax',
                                    icon: 'fa fa-magic',
                                    url: 'example/bootstraptable/detail',
                                    confirm: '确认发送',
                                    success: function (data, ret) {
                                        Layer.alert(ret.msg + ",返回数据：" + JSON.stringify(data));
                                        //如果需要阻止成功提示，则必须使用return false;
                                        //return false;
                                    },
                                    error: function (data, ret) {
                                        console.log(data, ret);
                                        Layer.alert(ret.msg);
                                        return false;
                                    }
                                },
                                {
                                    name: 'addtabs',
                                    text: __('新选项卡中打开'),
                                    title: __('新选项卡中打开'),
                                    classname: 'btn btn-xs btn-warning btn-addtabs',
                                    icon: 'fa fa-folder-o',
                                    url: 'example/bootstraptable/detail'
                                }
                            ],
                            formatter: Table.api.formatter.buttons
                        },
                        {
                            field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
                            buttons: [
                                {
                                    name: 'detail',
                                    title: __('详情'),
                                    classname: 'btn btn-xs btn-primary btn-dialog',
                                    icon: 'fa fa-list',
                                    url: 'test/detail',
                                    callback: function (data) {
                                        Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
                                    }
                                }],
                            formatter: Table.api.formatter.operate
                        }
                    ]
                ]
            });

            // 绑定TAB事件
            $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var field = $(this).closest("ul").data("field");
                var value = $(this).data("value");
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                options.queryParams = function (params) {
                    var filter = {};
                    if (value !== '') {
                        filter[field] = value;
                    }
                    params.filter = JSON.stringify(filter);
                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});

HTML代码：

<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="status">
            <li class="active"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            <li><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('test/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('test/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('test/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('test/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="fa fa-upload"></i> {:__('Import')}</a>

                        <div class="dropdown btn-group {:$auth->check('test/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>
                        <a class="btn btn-info btn-disabled disabled btn-selected" href="javascript:;"><i class="fa fa-leaf"></i> 获取选中项</a>
                        <a class="btn btn-success btn-singlesearch" href="javascript:;"><i class="fa fa-user"></i> 自定义搜索</a>
                        <a class="btn btn-success btn-change btn-start" data-params="action=start" data-url="example/bootstraptable/start" href="javascript:;"><i class="fa fa-play"></i> 启动</a>
                        <a class="btn btn-danger btn-change btn-pause" data-params="action=pause" data-url="example/bootstraptable/pause" href="javascript:;"><i class="fa fa-pause"></i> 暂停</a>
                        <a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
                            <i class="fa fa-dollar"></i>
                            <span class="extend">
                                金额：<span id="money">0</span>
                                单价：<span id="price">0</span>
                            </span>
                        </a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('test/edit')}" 
                           data-operate-del="{:$auth->check('test/del')}" 
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

四、控制器

1.自写编辑和添加等

从这里复制增删改查的方法出去、进行二开

2.使用admin_id

在后台开发的过程中经常会有这样的一个需求，每个管理员单独管理自己添加的数据或单独管理自己下级管理员添加的数据，管理员之间的数据是不相通的，每个管理员看到的数据是不同的。在FastAdmin中可以很方便的实现此功能。

首先我们需要在当前控制器添加以下两个属性

 

protected $dataLimit = 'auth'; //默认基类中为false，表示不启用，可额外使用auth和personal两个值

protected $dataLimitField = 'admin_id'; //数据关联字段,当前控制器对应的模型表中必须存在该字段

$dataLimit = false; //表示不启用，显示所有数据
$dataLimit = 'auth'; //表示显示当前自己和所有子级管理员的所有数据
$dataLimit = 'personal'; //表示仅显示当前自己的数据
$dataLimitField字段默认为admin_id，请注意添加该字段类型为int(10)。

通过以上配置后，在列表数据的时候将默认添加条件过滤不属性自己权限的数据，在添加时会自动维护admin_id的数据，在编辑、删除的时候会自动控制权限避免越权操作。

如果需要将原有的数据加入到FastAdmin后台管理权限控制当中，比如已有的数据已经有标识归属，但这个归属体系并非是FastAdmin的后台管理员体系。在这个时候我们就需要重写基类的getDataLimitAdminIds方法，将此方法返回数据标识的归属ID数组集合，这样即可使用FastAdmin的后台管理权限进行管理。

solitaire.

关注

2
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
fastadmin 基础

fastadmin 基础目录结构一、fastadmin 类库 1.文字转拼音 2.时间类库 3.分类目录结构project 应用部署目录├─application 应用目录（可设置）│ ├─common 公共模块目录（可更改）│ ├─index 模块目录(可更改)│ │ ├─config.php 模块配置文件│ │ ├─common.php 模块函.
复制链接

扫一扫