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; });
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) {} }
模态框
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"> ├ 二级管理组</option> <option value="3"> │ ├ 三级管理组</option> <option value="5"> │ └ 三级管理组2</option> <option value="4"> └ 二级管理组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); } }
