FastAdmin 基本知识流程一栏

 

fastadmin进阶

安装：出现登陆页无法显示：可能是php的gd2扩展未开启

FastAdmin 在 Nginx 中的配置

用的是AdminLTE后台模板require.js、less、Bower

调试错误：看runtime/log

FastAdmin 的上传代码在哪里？

一张图解析FastAdmin中的表格列表的功能

fastadmin的页面是如何生成的？

FastAdmin 如何隐藏操作栏中的“删除”按钮“？

笔记：FastAdmin 上传设置

如何修改 FastAdmin 弹窗大小？

FastAdmin 的 CRUD 不支持层级模型

fastadmin笔记，应该能解决大部分问题

一键生成数据表的crud 的记录会保存到fa_command表中

当在线命令行管理成功生成crud时生成的文件如下：如fa_tom

application/admin/contorller/Tom.php

application/admin/model/Tom.php

application/admin/validate/Tom.php

application/admin/view/tom/index.html、edit.html、add.html

application/admin/lang/zh-cn/tom.php

/public/assets/js/backend/tom.js

如果是fa_demo_tom则会生成(_分隔成目录)

application/admin/contorller/demo/Tom.php

application/admin/model/demo/Tom.php

application/admin/validate/demo/Tom.php

application/admin/view/demo/tom/index.html、edit.html、add.html

application/admin/lang/zh-cn/demo/tom.php

/public/assets/js/backend/demo/tom.js

生成菜单的记录会更新fa_auth_rule的数据   name不带方法的就是菜单显示的pidwei0是选项卡

一键生成的是层级目录的菜单，在后台展示时父级菜单会以目录名称显示，

如上面的contorller/demo/Tom.php  父菜单显示demo子菜单显示Tom ，我们必须在application/admin/lang/zh-cn.php中添加

'Demo'=>'案例','Tom'=>'案例1'     配置后菜单显示如上：

一键压缩打包（略）

在FastAdmin中如果修改了核心的JS或CSS文件，是需要重新压缩打包后在生产环境下才会生效。FastAdmin采用的是基于RequireJS的r.js进行JS和CSS文件的压缩打包，application/config.php中app_debug的值，当为true的时候是采用的无压缩的JS和CSS，当为false时采用的是压缩版的JS和CSS

多语言：

return[

'Home'=>'前台'

]；

{:__('Home')}的方式调用，而在PHP和JS中均可以使用__('Home')的方式发起调用

如果我们需要跨模块引入其它模块的语言包，则可以在 控制器中使用loadlang方法来引入，如

$this->loadlang('模块名');

如果需要在JS中跨模块引入语言包，则需要修改Ajax.php中的lang这个方法

控制器

我们的控制器都必须继承自application/common/controller/Backend.php的\app\common\controller\Backend这个基类

这个基类application/admin/library/traits/Backend.php里引入的 use \app\admin\library\traits\Backend;它有八个公共方法

index/add/edit/del/multi/recyclebin/destroy/restore/                                 import

查看、添加、编辑、删除、批量更新、回收站、真实删除、还原               导入

common/controller/Backend里还有好多属性：

/**
 * 无需登录的方法,同时也就不需要鉴权了
 * @var array
 */
protected $noNeedLogin = [];

/**
 * 无需鉴权的方法,但需要登录
 * @var array
 */
protected $noNeedRight = [];

/**
 * 布局模板
 * @var string
 */
protected $layout = 'default';

/**
 * 权限控制类
 * @var Auth
 */
protected $auth = null;

/**
 * 快速搜索时执行查找的字段
 */
protected $searchFields = 'id';

/**
 * 是否是关联查询
 */
protected $relationSearch = false;

/**
 * 是否开启数据限制
 * 支持auth/personal
 * 表示按权限判断/仅限个人
 * 默认为禁用,若启用请务必保证表中存在admin_id字段
 */
protected $dataLimit = false;

/**
 * 数据限制字段
 */
protected $dataLimitField = 'admin_id';

/**
 * 是否开启Validate验证
 */
protected $modelValidate = false;

/**
 * 是否开启模型场景验证
 */
protected $modelSceneValidate = false;

/**
 * Multi方法可批量修改的字段
 */
protected $multiFields = 'status';

方法

/**
 * 加载语言文件
 * @param string $name
 */
protected function loadlang($name)
{
}

/**
 * 渲染配置信息
 * @param mixed $name 键名或数组
 * @param mixed $value 值
 */
protected function assignconfig($name, $value = '')
{
}

/**
 * 生成查询所需要的条件,排序方式
 * @param mixed $searchfields 快速查询的字段
 * @param boolean $relationSearch 是否关联查询
 * @return array
 */
protected function buildparams($searchfields = null, $relationSearch = null)
{
}

/**
 * 获取数据限制的管理员ID
 * 禁用数据限制时返回的是null
 * @return mixed
 */
protected function getDataLimitAdminIds()
{
}

/**
 * Selectpage的实现方法
 *
 * 当前方法只是一个比较通用的搜索匹配,请按需重载此方法来编写自己的搜索逻辑,$where按自己的需求写即可
 * 这里示例了所有的参数，所以比较复杂，实现上自己实现只需简单的几行即可
 *
 */
protected function selectpage()
{
}

当两张相似的表意见curd时一个没有关联模型查询一个有时的区别：

class Demo extends Backend
{

    /**
     * Demo模型对象
     * @var \app\admin\model\Demo
     */
    protected $model = null;

    public function _initialize()
    {
        parent::_initialize();
        $this->model = new \app\admin\model\Demo;

    }

    /**
     * 默认生成的控制器所继承的父类中有index/add/edit/del/multi五个基础方法、destroy/restore/recyclebin三个回收站方法
     * 因此在当前控制器中可不用编写增删改查的代码,除非需要自己控制这部分逻辑
     * 需要将application/admin/library/traits/Backend.php中对应的方法复制到当前控制器,然后进行修改
     */

}

traits  的原idnex方法

trait Backend
{

    /**
     * 查看
     */
    public function index()
    {
        //设置过滤方法
        $this->request->filter(['strip_tags']);
        if ($this->request->isAjax()) {
            //如果发送的来源是Selectpage，则转发到Selectpage
            if ($this->request->request('keyField')) {
                return $this->selectpage();
            }
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
            $total = $this->model
                ->where($where)
                ->order($sort, $order)
                ->count();

            $list = $this->model
                ->where($where)
                ->order($sort, $order)
                ->limit($offset, $limit)
                ->select();

            $list = collection($list)->toArray();
            $result = array("total" => $total, "rows" => $list);

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

有关联时的控制器：

class Dash extends Backend
{

    /**
     * Dash模型对象
     * @var \app\admin\model\Dash
     */
    protected $model = null;

    public function _initialize()
    {
        parent::_initialize();
        $this->model = new \app\admin\model\Dash;

    }

    /**
     * 默认生成的控制器所继承的父类中有index/add/edit/del/multi五个基础方法、destroy/restore/recyclebin三个回收站方法
     * 因此在当前控制器中可不用编写增删改查的代码,除非需要自己控制这部分逻辑
     * 需要将application/admin/library/traits/Backend.php中对应的方法复制到当前控制器,然后进行修改
     */

    /**
     * 查看
     */
    public function index()
    {
        //当前是否为关联查询
        $this->relationSearch = true;
        //设置过滤方法
        $this->request->filter(['strip_tags']);
        if ($this->request->isAjax())
        {
            //如果发送的来源是Selectpage，则转发到Selectpage
            if ($this->request->request('keyField'))
            {
                return $this->selectpage();
            }
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
            $total = $this->model
                    ->with(['category'])
                    ->where($where)
                    ->order($sort, $order)
                    ->fetchSql(false)
                    ->count();

            $list = $this->model
                    ->with(['category'])
                    ->where($where)
                    ->order($sort, $order)
                    ->limit($offset, $limit)
                    ->fetchSql(false)
                    ->select();
            //file_put_contents(__DIR__.'/../../../runtime/log/sql_'.time().'_log.txt', $total);
            //file_put_contents(__DIR__.'/../../../runtime/log/sql_'.time().'_log1.txt', $list);
            foreach ($list as $row) {

            }
            $list = collection($list)->toArray();
            $result = array("total" => $total, "rows" => $list);

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

无关联时的model

class Demo extends Model
{
    // 表名
    protected $name = 'demo';

    // 自动写入时间戳字段
    protected $autoWriteTimestamp = false;

    // 定义时间戳字段名
    protected $createTime = false;
    protected $updateTime = false;

    // 追加属性
    protected $append = [
    ];
}

有关联时的model（多出了一个方法）

class Dash extends Model
{
    // 表名
    protected $name = 'dash';

    // 自动写入时间戳字段
    protected $autoWriteTimestamp = false;

    // 定义时间戳字段名
    protected $createTime = false;
    protected $updateTime = false;

    // 追加属性
    protected $append = [

    ];

    public function category()
    {
        return $this->belongsTo('Category', 'category_id', 'id', [], 'LEFT')->setEagerlyType(0);
    }
}

js

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

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

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'name', title: __('Name')},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            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;
});

关联后的js

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

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

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'name', title: __('Name')},
                        {field: 'category_id', title: __('Category_id')},
                        {field: 'category.id', title: __('Category.id')},
                        {field: 'category.pid', title: __('Category.pid')},
                        {field: 'category.type', title: __('Category.type')},
                        {field: 'category.name', title: __('Category.name')},
                        {field: 'category.nickname', title: __('Category.nickname')},
                        {field: 'category.flag', title: __('Category.flag'), operate:'FIND_IN_SET', formatter: Table.api.formatter.label},
                        {field: 'category.image', title: __('Category.image'), formatter: Table.api.formatter.image},
                        {field: 'category.keywords', title: __('Category.keywords')},
                        {field: 'category.description', title: __('Category.description')},
                        {field: 'category.diyname', title: __('Category.diyname')},
                        {field: 'category.createtime', title: __('Category.createtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'category.updatetime', title: __('Category.updatetime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'category.weigh', title: __('Category.weigh')},
                        {field: 'category.status', title: __('Category.status'), 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);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});

fastadmin关于table的说明及示例

bootstraptable详细的参数

更详细教程

var table = $("#table");

// 初始化表格
table.bootstrapTable({
    url: '/Home/GetDepartment',         //请求后台的URL（*）用于从远程站点请求数据的URL
    method: 'get',                      //请求方式（*）
    toolbar: '#toolbar',                //工具栏按钮用哪个容器 一个jQuery 选择器，指明自定义的 buttons toolbar。例如:#buttons-toolbar, .buttons-toolbar 或 DOM 节点
    toolbarAlign:'left'                 //指示如何对齐自定义工具栏。可以使用'left'，'right'
    buttonsToolbar:'',                  //一个jQuery选择器，指示按钮工具栏，例如：＃buttons-toolbar，.buttons-toolbar或DOM节点
    buttonsAlign:'right',               //指示如何对齐工具栏按钮。可以使用'left'，'right'。
    buttonsClass:'secondary',           //定义表按钮的Bootstrap类（在'btn-'之后添加）
    striped: true,                      //是否显示行间隔色
    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true,                   //是否显示分页（*） 设置为true以在表格底部显示分页工具栏默认false
    sortable: true,                     //是否启用排序  列中也有此变量
    sortName:'',                        //定义要排序的列   没定义默认都不排列，同sortOrder结合使用，sortOrder没写的话列默认递增（asc）
    sortOrder: "asc",                   //定义列排序顺序，只能是'asc'或'desc'。
    sortStable: false,                   //如果你把此属性设为了true）我们将为此行添加'_position'属性 （别看错了，是sortStable，sortable在下面）设为true，则和sort部分一样，区别是：在排序过程中，如果存在相等的元素，则原来的顺序不会改变
    queryParams: oTableInit.queryParams,//传递参数（*）
    sidePagination: "server",           //分页方式：client客户端分页（默认），server服务端分页（*）
    silentSort:true,//设置为false以便对加载的消息数据进行排序。当sidePagination选项设置为“server”时，此选项有效。
    pageNumber:1,                       //初始化加载第一页，默认第一页
    pageSize: 10,                       //每页的记录行数（*）
    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
    search: true,                       //是否显示表格搜索input，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
    strictSearch: true,                 //启用严格搜索
    showColumns: false,                 //是否显示所有的列 设置为true以显示列下拉列表（一个可以设置显示想要的列的下拉f按钮）
    showRefresh: true,                  //是否显示刷新按钮 默认false
    minimumCountColumns: 1,             //最少允许的列数  要从列下拉列表中隐藏的最小列数
    clickToSelect: true,                //是否启用点击选中行
    height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    idField:'',                         //表明哪个是字段是标识字段
    uniqueId: "ID",                     //表明每一行的唯一标识字段，一般为主键列
    showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
    cardView: false,                    //是否显示详细视图  设置为true以显示卡片视图表，例如mobile视图（卡片视图）
    detailView: false,                   //设置为true以显示detail 视图表（细节视图）
    locale:'zh-CN',
    height:800,                           //固定表格的高度
    classes:'table table-bordered table-hover',//表的类名。可以使用'table'，'table-bordered'，'table-hover'，'table-striped'，'table-dark'，'table-sm'和'table-borderless'。默认情况下，表格是有界的。
    theadClasses:'',// 表thead的类名 如使用.thead-light或.thead-dark使theads显示为浅灰色或深灰色。
    rowStyle:function(row,index){},//    行样式格式化程序函数支持类或css
    rowAttributes:function(row,index){},//  row属性formatter函数，支持所有自定义属性
    undefinedText:'-',// 定义默认的未定义文本
    sortClass:'',//已排序的td元素的类名
    rememberOrder:false,//设置为true以记住每列的顺序
    data:[],//    要加载的数据 [] or {}
    contentType:'application/json',//请求远程数据的contentType，例如：application/x-www-form-urlencoded。
    dataType:'json',//您希望服务器返回的数据类型
    totalField:'total',//Key in incoming json containing 'total' data.
    dataField:'rows',//名称写自己定义的每列的字段名，也就是key，通过key才能给某行的某列赋value原文：获取每行数据json内的key
    onlyInfoPagination:false,//设置为true以仅显示表中显示的数据量。它需要将分页表选项即pagination设置为true
    paginationLoop:true,//设置为true以启用分页连续循环模式
    paginationHAlign:'right',//分页条水平方向的位置，默认right（最右），可选left
    totalRows:0,//该属性主要由分页服务器传递，易于使用
    paginationDetailHAlign:'left',//如果解译的话太长，举个例子，paginationDetail就是“显示第 1 到第 8 条记录，总共 15 条记录 每页显示 8 条记录”，默认left（最左），可选right
    paginationVAlign:'bottom',//分页条垂直方向的位置，默认bottom（底部），可选top、both（顶部和底部均有分页条）
    paginationPreText:'<',//上一页的按钮符号
    paginationNextText:'>',//下一页的按钮符号
    paginationSuccessivelySize:5,//分页时会有<12345...80>这种格式而5则表示显示...左边的的页数
    paginationPagesBySide:1,//...右边的最大连续页数如改为2则 <1 2 3 4....79 80>
    paginationUseIntermediate:false,//计算并显示中间页面以便快速访问 true 会将...替换为计算的中间页数42
    searchOnEnterKey:false,// true时搜索方法将一直执行，直到按下Enter键（即按下回车键才进行搜索）
    trimOnSearch:true,//默认true，自动忽略空格
    searchAlign:'right',//指定搜索输入框的方向。可以使用'left'，'right'。
    searchTimeOut:500,//设置搜索触发超时
    searchText:'',//设置搜索文本框的默认搜索值
    showHeader:true,//设置为false以隐藏表头
    showFooter:false,//设置为true以显示摘要页脚行(固定也交 比如显示总数什么的最合适)
    showPaginationSwitch:false,//设置为true以显示分页组件的切换按钮
    showFullscreen:false,// 设置为true以显示全屏按钮
    smartDisplay:true,//设置为true以巧妙地显示分页或卡片视图
    escape:false,// 转义字符串以插入HTML，替换 &, <, >, “, `, 和 ‘字符  跳过插入HTML中的字符串，替换掉特殊字符
    selectItemName:'btSelectItem',//  设置radio 或者 checkbox的字段名称
    clickToSelect:false,//设置为true时 在点击列时可以选择checkbox或radio
    singleSelect:false,// 默认false，设为true则允许复选框仅选择一行(不能多选了？)
    checkboxHeader:true,//设置为false以隐藏标题行中的check-all复选框 即隐藏全选框
    maintainSelected:false,// true时点击分页按钮或搜索按钮时，记住checkbox的选择项    设为true则保持被选的那一行的状态
    icons:{//定义工具栏，分页和详细信息视图中使用的图标
        paginationSwitchDown: 'fa-caret-square-down',
        paginationSwitchUp: 'fa-caret-square-up',
        refresh: 'fa-sync',
        toggleOff: 'fa-toggle-off',
        toggleOn: 'fa-toggle-on',
        columns: 'fa-th-list',
        detailOpen: 'fa-plus',
        detailClose: 'fa-minus',
        fullscreen: 'fa-arrows-alt'
    },
    iconSize:'undefined',// 定义icon图表的尺寸大小html对应为data-icon-undefined （默认btn）、data-icon-lg 大按钮的尺寸（btn-lg）...;  这里的值依次为undefined => btnxs => btn-xssm => btn-smlg => btn-lg
    iconsPrefix:'fa',//定义图标集名称（FontAwesome的'glyphicon'或'fa'）。默认情况下，'fa'用于Bootstrap v4    

    queryParamsType:'limit',//设置'limit'以使用RESTFul类型发送查询参数。
    ajaxOptions:{},//提交ajax请求的其他选项。值列表：jQuery.ajax。
    customSort:function(sortName,sortOrder,data){},//自定义排序功能（用来代替自带的排序功能），需要两个参数（可以参考前面）：
    ajax:function(){},// 一种替换ajax调用的方法。应该实现与jQuery ajax方法相同的API
    queryParams: function(params) { // 请求远程数据时，您可以通过修改queryParams来发送其他参数
        return params
    },
    responseHandler:function(res) { //在加载远程数据之前，处理响应数据格式，参数对象包含
        return res
    },
    customSearch:function(data,text){// 执行自定义搜索功能替换内置搜索功能，需要两个参数
        return data.filter(function (row) {return row.field.indexOf(text) > -1})
    },
    footerStyle:function(column){//  页脚样式格式化程序函数，只需一个参数 m默认｛｝
        return {
            css: { 'font-weight': 'normal' },
            classes: 'my-class'
        }
    },
    detailFormatter:function(index,row,element){//前提：detailView设为true，启用了显示detail view。- 用于格式化细节视图- 返回一个字符串，通过第三个参数element直接添加到细节视图的cell（某一格）中，其中，element为目标cell的jQuery element
        return '';
    },    detailFilter:function(index,row){//当detailView设置为true时，每行启用扩展。返回true并且将启用该行以进行扩展，返回false并禁用该行的扩展。默认函数返回true以启用所有行的扩展。
        return true
    },    ignoreClickToSelectOn:function(element){// 包含一个参数：element: 点击的元素。返回 true 是点击事件会被忽略，返回 false 将会自动选中。该选项只有在 clickToSelect 为 true 时才生效。
        return $.inArray(element.tagName, ['A', 'BUTTON']
    },   

    columns: [
        {checkbox: false},
        {radio: false},
        {
            radio: false,//此列转成radio上面单独领出来是应为有字段显示就不需要它呀
            checkbox: false,//此列转成checkbox  单独拎出来同上
            field: 'operate', //设置data-field的值
            title: __('Operate'),//设置data-field的值
            table: table,
            events: Table.api.events.operate,
            formatter: Table.api.formatter.operate,//单元格格式函数 this上下文是当前列对象
            formatter: function (value, row, index,field){},
            titleTooltip:'列标题工具提示文本。此选项还支持标题HTML属性',
            class:'定义列的类名',
            rowspan:1,//指定单元格应占用的行数。
            colspan:1,//指定单元格应占用的列数。
            align:'center',//指定如何对齐列数据。可以使用'left'，'right'，'center'。
            halign:'center',//指定如何对齐表头。可以使用'left'，'right'，'center'。
            falign:'center',//指示如何对齐表格页脚。可以使用'left'，'right'，'center'。
            valign:'middle',//指出如何对齐单元格数据。可以使用'top','middle','bottom'
            width:'10%',//列的宽度。如果未定义，宽度将自动扩展以适合其内容。格式'100px','10%'，100,如果想表格保持列自适应并且尺寸太小，则可以忽略这项（通过类等使用min / max-width）
            sortable:false,//设置为true以允许列可以排序。
            order:'asc',//默认排序顺序，只能是'asc'或'desc'。
            visible:true,//设置为false以隐藏列项。
            cardVisible:true,//设置为false以隐藏card 视图状态中的列项
            switchable:true,//设置为false以禁用可切换的列项
            clickToSelect:true,//设置为true时 在点击列时可以选择checkbox或radio
            footerFormatter:function(data){},//当前列对象函数该函数应返回一个字符串，其中包含要在页脚单元格中显示的文本
            events::{},//使用格式化函数时的单元事件监听器 四个参数event,value,row,index； html可以这么用 <th .. data-events="operateEvent">
            sorter:function(a,b,rowA,rowB){},//用于进行本地排序的自定义字段排序函数(第一个字段值，第二个字段值，第一行，第二行)
            sortName:'',//提供可自定义的排序名称，而不是标题中的默认排序名称或列的字段名称
            cellStyle:function(value,row,index,field){},//单元格样式格式化函数 支持classs和css
            searchable:true,//设置为true以搜索此列的数据。
            searchFormatter:true,//设置为true以搜索使用格式化数据
            escape:false,//转义字符串以插入HTML，替换 &, <, >, “, `, and ‘ 字符。
            showSelectTitle:false,//设置为true以使用'radio'或'singleSelect''复选框'选项显示列的标题。
        }

    ]
});
var operateEvents = {
    /* 'click .like' 是类名？*/
    'click .like': function (e, value, row, index) {}
}

bootstrapTable

bootstraptable文档2

中文文档

模态框

require.js

require.js作为基本的js来启动所有的js  data-main属性指向了一个启动脚本加载过程的文件（一般和require文件同目录）

<script src="/assets/js/require.js" data-main="/assets/js/require-backend.js?v=1551577968"></script>

然后在 data-main指向的js文件中定义模板加载选项  注意data-main里定义加载的文件是异步的哦，如果用了require.js那么就不要在之外定义对require.js里加载的文件有依赖的js

require使用分两步;  基本的require例子

1、define（）定义模块（必须返回个对象）

2、调用模块  require(function(){})

//全局配置
require.config({
    // 根路径设置，paths下面全部都是根据baseUrl的路径去设置
    baseUrl:'./js/',//显式的定义baseUrl；不显式定义的情况下默认是和require.js同一个目录如果定义了data-main则以data-main的路径（path以/开头、以.js结尾、含有https等协议时不会使用baseUrl？）

    paths:{//显式的映射哪些不是在baseUrl目录路径的文件
            // 引入jQuery.js
           jquery:'plugin/jquery',
           // 引入bootstrap.js
           bootstrap:'plugin/bootstrap',
           //引入其他的js
           //custom:'cunstom'
    },
    shim:{//为那些没有使用define（）来声明依赖关系 想要实际加载指或者涉及的模块仍然需要一个常规的require、define调用，设置shim本身不会触发代码的加载
        bootstrap:{
            //deps定义依赖的，这里的bootstrap依赖jquery
            deps:["jquery"],
            exports:'该依赖没有加载成功输出这段'或者这里也可以是个函数
        }
    },
     //map 对于给定的模块前缀，使用一个不同的模块ID来加载该模块
      该特性仅适用于那些调用了define()并将其注册为匿名模块的真正AMD模块脚本。并且，请在map配置中仅使用绝对模块ID，“../some/thing”之类的相对ID不能工作。

      另外在map中支持“*”，意思是“对于所有的模块加载，使用本map配置”。如果还有更细化的map配置，会优先于“*”配置

     //当“some/newmodule”调用了“require('foo')”，它将获取到foo1.2.js
     //而当“some/oldmodule”调用“`require('foo')”时它将获取到foo1.0.js。
     //当调用其它时将获取到fool1.1.js
     foo1.0.js
     foo1.1.js
     foo1.2.js
     some/
         newmodule.js
         oldmodule.js

    map: {
        '*': {
            'foo': 'foo1.1'
        },
        'some/oldmodule': {
            'foo': 'foo1.2'
        },
        'some/oldmodule': {
            'foo': 'foo1.0'
        }
    }

});

urlArgs：RequireJS获取资源时附加在URL后面的额外的query参数。作为浏览器或服务器未正确配置时的“cache bust”手段很有用。使用cache bust配置的一个示例：

urlArgs: "bust=" +  (new Date()).getTime()

packages：从CommonJS包(package)中加载模块。参见从包中加载模块。

include：xx

paths：xx

shim：xx

baseUrl:xx

map:xx

waitSeconds:命名一个加载上下文。这允许require.js在同一页面上加载模块的多个版本，如果每个顶层require调用都指定了一个唯一的上下文字符串。想要正确地使用，请参考多版本支持一节

charset:xx

config:常常需要将配置信息传给一个模块。这些配置往往是application级别的信息，需要一个手段将它们向下传递给模块。在RequireJS中，基于requirejs.config()的config配置项来实现。要获取这些信息的模块可以加载特殊的依赖“module”，并调用module.config()

nodeIdCompat: 在放弃加载一个脚本之前等待的秒数。设为0禁用等待超时。默认为7秒。

context: 指定要加载的一个依赖数组。当将require设置为一个config object在加载require.js之前使用时很有用。一旦require.js被定义，这些依赖就已加载。使用deps就像调用require([])，但它在loader处理配置完毕之后就立即生效。它并不阻塞其他的require()调用，它仅是指定某些模块作为config块的一部分而异步加载的手段而已。

deps: 指定要加载的一个依赖数组。当将require设置为一个config object在加载require.js之前使用时很有用。一旦require.js被定义，这些依赖就已加载。使用deps就像调用require([])，但它在loader处理配置完毕之后就立即生效。它并不阻塞其他的require()调用，它仅是指定某些模块作为config块的一部分而异步加载的手段而已。

callback: 在deps加载完毕后执行的函数。当将require设置为一个config object在加载require.js之前使用时很有用，其作为配置的deps数组加载完毕后为require指定的函数。

enforceDefine: 如果设置为true，则当一个脚本不是通过define()定义且不具备可供检查的shim导出字串值时，就会抛出错误。参考在IE中捕获加载错误一节。

xhtml: 如果设置为true，则使用document.createElementNS()去创建script元素。

使用：

1、

require(
    ['jquery', 'bootstrap'],
    function ($, undefined) {

    }
);

2、定义模块：具有作用域来避免全局名称空间污染

简单定义：

define({
    color: "black",
    size: "unisize"
});

函数式定义：

define(function () {
    //Do setup work here

    return {
        color: "black",
        size: "unisize"
    }
});

存在依赖的函数式定义：

模块函数以参数"cart"及"inventory"使用这两个以"./cart"及"./inventory"名称指定的模块。在这两个模块加载完毕之前，模块函数不会被调用。

严重不鼓励模块定义全局变量。遵循此处的定义模式，可以使得同一模块的不同版本并存于同一个页面上(参见 高级用法 )。另外，函参的顺序应与依赖顺序保存一致。

返回的object定义了"my/shirt"模块。这种定义模式下，"my/shirt"不作为一个全局变量而存在。

// my/shirt.js现在有一些依赖项，cart和inventory
// 假设他们与shirt.js在同一目录中的模块
define(["./cart", "./inventory"], function(cart, inventory) {
        //返回一个对象来定义"my/shirt"模块。
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

将模块定义为一个函数

// foo/title.js中的模块定义。 它使用之前的my/cart 和my/inventory模块，
//但由于foo/title.js与"my" 模块位于不同的目录中，因此它使用模块依赖项名称中的"my" 来查找它们。
//名称的"my" 部分可以映射到任何目录，但默认情况下，它被假定相邻"foo"目录。
define(["my/cart", "my/inventory"],
    function(cart, inventory) {
        //返回一个函数用来定义"foo/title".
        //它获取或者设置 window title.
        return function(title) {
            return title ? (window.title = title) :
                   inventory.storeName + ' ' + cart.name;
        }
    }
);

定义一个命名模块

这些常由优化工具生成。你也可以自己显式指定模块名称，但这使模块更不具备移植性——就是说若你将文件移动到其他目录下，你就得重命名。一般最好避免对模块硬编码，而是交给优化工具去生成。优化工具需要生成模块名以将多个模块打成一个包，加快到浏览器的载人速度。

    //明确地定义 "foo/title"模块:
    define("foo/title",
        ["my/cart", "my/inventory"],
        function(cart, inventory) {
            //Define foo/title object in here.
       }
    );

当定义的模块依赖太多的模块时

如：

//如：
define(
    ['dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6', 'dep7', 'dep8'],
    function(dep1,   dep2,   dep3,   dep4,   dep5,   dep6,   dep7,   dep8){
        ...
    }
);

//可以简化成这样
define(
    function (require) {
        var dep1 = require('dep1'),
            dep2 = require('dep2'),
            dep3 = require('dep3'),
            dep4 = require('dep4'),
            dep5 = require('dep5'),
            dep6 = require('dep6'),
            dep7 = require('dep7'),
            dep8 = require('dep8');

            ...
    }

});

注意：

一个文件一个模块

为了能在define（）内部使用require的调用可以将require作一个依赖注入到模块中

生成与相对于模块的url

实例：

文件：

<script src="./require.js" data-main="main.js" type="text/javascript" defer async="true"></script>    

全局配置文件main.js：

 /*全局配置*/
 require.config({
     baseUrl:'./',
     paths:{
         layer:"plugin/layer",
         jquery:["https://cdn.bootcss.com/jquery/3.3.1/jquery","plugin/jquery"],//可配置多个地址第一个加载不上加载第二个
         bootstrap:"https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min",
         custom1:"js/custom1.0",
         custom2:"js/custom1.2",//custom1.2.js
         math:"js/math",//math.js
         datatable:"datatable",//和baseUrl同一文件下无需在这指定都行(可省略)
     },
     shim:{
         'datatable':{//这个键名为要是载入的目标文件的文件名，不能随便命名。
             exports: '_' //exports的值为datatable.js提供的 对外接口的名称??不理解  在其他模块require引入时可以引用它
         },
         'datatables':{
             'init':function(){
                 return{
　　　　　　　　　　sayHi: datatable,//键可以随便取名(定义数据的键)，值必须和datatables.js里的变量名一致
　　　　　　　　　　sayHello: datatableDemo,
　　　　　　　　　　sayname: name,
　　　　　　　　　　sayLike: like,
                 }
             },
             'deps':['jquery','bootstrap'],//设置的依赖只datatable在jquery和bootstrap加载完毕后才会加载
             //如果木有init这些参数我们可以简化依赖设置 例如 'datatables':['jquery','bootstrap']
             //z注意bootstrap是依赖jqury的所以下面必须填上'bootstrap':['jquery'],
         },
         'layui':{

         },
         'bootstrap':['jquery'],

     }

 });

require(['math'], function (math){
    //math:为math.js return回来的数据 {add: ƒ, mathAdd: ƒ, controller: {…}}
    console.log(math.add('1   ',1));
    console.log(math.controller);
});

模块文件math.js

//不依赖其他模块
//define(function (){
//define([],function (){
//依赖其他模块则第一个参数为数组值为依赖的模块(这里依赖jquey和layui还有datatable),
//jqury和layui在main.js显式指定了位置，datatable.js没有在paths里没有指定那么他的路径会默认在baseUrl
define(['jquery','layer','datatable','datatables'],function ($,layer,_,tables){
    var mathAdd = function (x,y){

        console.log(datatable);//这里得到datatable是undefined，非规范化的模块我们需要定义在shim中
        console.log(_);//？？
        console.log(tables);

        return parseInt($.trim(x))+parseInt($.trim(y));
    };
    var updateData=function(){
        return '需要的代码';
    };

    var controller={
        sex:'男',
        params:{
            id:'1',
            name:'tom',
            phone:13132613871
        },
        index:function(){

        },
        add:updateData,
        eidt:function(){

        }
    };

    return {
        add: mathAdd,
        mathAdd: mathAdd,
        controller:controller
    };
});

非规范化模块

datatable。js

var datatable={

    showRow:function(index){
        return idnex;
    }
};

datatable。js

/*非规范的模块有许多变量对象等情况*/
var datatable={

    showRow:function(index){
        return idnex;
    }
};

function datatableDemo(){
    return 'demo';
}
var name='tom';
var like=['sing','jump','drink'];

生成的模板  两表字段 id、name、category_id（关联的多的字段）

add.html

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button><!--确定-->
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button><!--重置-->
        </div>
    </div>
</form>

index:

<div class="panel panel-default panel-intro">
    {:build_heading()}

    <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('demo/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('demo/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('demo/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('demo/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('demo/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>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('demo/edit')}"
                           data-operate-del="{:$auth->check('demo/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

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

edit.html

<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="{$row.name}">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

关联后的模板

add

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Category_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-category_id" data-rule="required" data-source="category/selectpage" data-params='{"custom[type]":"dash"}' class="form-control selectpage" name="row[category_id]" type="text" value="">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

index:

<div class="panel panel-default panel-intro">
    {:build_heading()}

    <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('dash/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('dash/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('dash/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('dash/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('dash/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>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('dash/edit')}"
                           data-operate-del="{:$auth->check('dash/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

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

{:$auth->check('dash/add')?'':'hide'} 检查权限 无权限加hide类隐藏

edit.html

<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="{$row.name}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Category_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-category_id" data-rule="required" data-source="category/selectpage" data-params='{"custom[type]":"dash"}' class="form-control selectpage" name="row[category_id]" type="text" value="{$row.category_id}">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

新增输出下拉列表的数据：

在_initialize方法里分配查出来的管理组变量给模板

edit模板

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Group')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_select('group[]', $groupdata, null, ['class'=>'form-control selectpicker', 'multiple'=>'', 'data-rule'=>'required'])}
        </div>
    </div>

模板的函数解析出来为：

 echo build_select('group[]', $groupdata, null, ['class'=>'form-control selectpicker', 'multiple'=>'', 'data-rule'=>'required']);

调用该函数生成一个下拉列表的html（第一个参数是name值，第二个参数是数组或者,分隔的字符串）

<select class="form-control selectpicker" multiple="" name="group[]" tabindex="-98">
    <option value="1"> 超级管理组</option>
    <option value="2">&nbsp;├ 二级管理组</option>
    <option value="3">&nbsp;│&nbsp;├ 三级管理组</option>
    <option value="5">&nbsp;│&nbsp;└ 三级管理组2</option>
    <option value="4">&nbsp;└ 二级管理组2</option>
</select>

common.php

if (!function_exists('build_select')) {

    /**
     * 生成下拉列表
     * @param string $name
     * @param mixed $options
     * @param mixed $selected
     * @param mixed $attr
     * @return string
     */
    function build_select($name, $options, $selected = [], $attr = [])
    {
        $options = is_array($options) ? $options : explode(',', $options);
        $selected = is_array($selected) ? $selected : explode(',', $selected);
        return Form::select($name, $options, $selected, $attr);
    }
}