# CRUD命令大全
`Bwsaas`框架已内置快速生成CURD的命令, 包括控制器、视图、模型、JS文件。能够使开发者效率得到进一步提升。
备注:在进行CURD命令行之前, 请按照规范设计表结构, 请参数`表结构规范`模块说明。
## 常用命令
~~~
# 生成bw_crud_demo表的CURD
php think crud -t crud_demo
# 生成bw_crud_demo表的CURD, 文件冲突时强制覆盖
php think crud -t crud_demo -f 1
# 删除bw_crud_demo表的CURD
php think crud -t crud_demo -d 1
# 生成bw_crud_demo表的CURD, 控制器在目录demo下的CrudDemo.php文件
php think crud -t crud_demo -c demo/CrudDemo
# 生成bw_crud_demo表的CURD, 模型在目录demo下的CrudDemo.php文件
php think crud -t crud_demo -m demo/CrudDemo
# 生成bw_crud_demo表的CURD, 并关联bw_crud_demo_catee表, 并设置外键为cate_id
php think crud -t crud_demo -r crud_demo_catee --foreignKey=cate_id --primaryKey=id
# 生成bw_crud_demo表的CURD, 并关联bw_crud_demo_catee表, 并设置只显示title,image两个字段
php think crud -t crud_demo -r crud_demo_catee --foreignKey=cate_id --relationOnlyFileds=title,image
# 生成bw_crud_demo表的CURD, 并关联bw_crud_demo_catee表, 并设置主表外键cate_id在表单的下拉选择显示的关联表的title字段
php think crud -t crud_demo -r crud_demo_catee --foreignKey=cate_id --relationBindSelect=title
# 生成bw_crud_demo表的CURD, 并设置logo字段后缀为单图片
php think crud -t crud_demo --imageFieldSuffix=logo
# 生成bw_crud_demo表的CURD, 并设置忽略remark, stock字段
php think crud -t crud_demo --ignoreFields=remark --ignoreFields=stock
~~~
## 参数介绍
# 参数介绍
| 短参 | 长参 | 说明 |
| --- | --- | --- |
| \-t | \--table=VALUE | 主表名 |
| \-c | \--controllerFilename=VALUE | 控制器文件名 |
| \-m | \--modelFilename=VALUE | 主表模型文件名 |
| \-f | \--force=VALUE | 强制覆盖模式 |
| \-d | \--delete=VALUE | 删除模式 |
| | \--checkboxFieldSuffix=VALUE | 复选框字段后缀 |
| | \--radioFieldSuffix=VALUE | 单选框字段后缀 |
| | \--imageFieldSuffix=VALUE | 单图片字段后缀 |
| | \--imagesFieldSuffix=VALUE | 多图片字段后缀 |
| | \--fileFieldSuffix=VALUE | 单文件字段后缀 |
| | \--filesFieldSuffix=VALUE | 多文件字段后缀 |
| | \--dateFieldSuffix=VALUE | 时间字段后缀 |
| | \--switchFields=VALUE | 开关的字段 |
| | \--selectFileds=VALUE | 下拉的字段 |
| | \--editorFields=VALUE | 富文本的字段 |
| | \--sortFields=VALUE | 排序的字段 |
| | \--ignoreFields=VALUE | 忽略的字段 |
| \-r | \--relationTable=VALUE | 关联表名 |
| | \--foreignKey=VALUE | 关联外键 |
| | \--primaryKey=VALUE | 关联主键 |
| | \--relationOnlyFileds=VALUE | 关联模型中只显示的字段 |
| | \--relationBindSelect=VALUE | 关联模型中的字段用于主表外键的表单下拉选择 |
| | \--relationModelFilename=VALUE | 关联模型文件名 |
# 表结构规范
## 特殊字段
* 默认`开关`字段:
* status
* 默认`忽略`字段:
* update\_time
* delete\_time
## 以特殊字符结尾的规则
* 默认`单图片`字段后缀:
* image
* logo
* photo
* icon
* 默认`多图片`字段后缀:
* images
* photos
* icons
* 默认`单文件`字段后缀:
* file
* 默认`多文件`字段后缀:
* files
## 注释说明
类型和数据可以通过特殊字符进行定义, 例如:`性别 {radio} (1:男, 2:女, 0:未知)`, 代表的就是单选框, 数据集合为:`['1'=>'男','2'=>'女','0'=>'未知']`。
### 字符说明
* 类型:
* `{}`包起来, 例如:`{radio}`
* 数据集:
* `()`包起来, 例如:`(1:男, 2:女, 0:未知)`
### 类型大全
类型说明备注text普通文本框image单图片images多图片file单文件files多文件date时间组件需配合数据集使用,时间控件类型选择editor富文本textarea普通文本select下拉选择需配合数据集使用switch开关组件需配合数据集使用checkbox多选框需配合数据集使用radio单选框需配合数据集使用
# 实战实例
## linux一键生成命令:
~~~
php think crud -t crud_demo -m zhu/CrudDemo --ignoreFields=h_video,s_videos,crt_file -r crud_demo_catee --relationModelFilename=relation/CrudDemoCatee --relationOnlyFileds=headimage,name --foreignKey=cate_id --relationBindSelect=name -f true
~~~
## 生成的目录和文件
### 目录展示
![](https://cdn.nlark.com/yuque/0/2020/png/1020295/1602663747008-85383374-971e-4cdb-b046-fb84310f50a0.png)
### 文件下载
生成示例文件(根文件.zip)[下载链接](https://buwangyun.oss-cn-zhangjiakou.aliyuncs.com/bw/%E6%A0%B9%E7%9B%AE%E5%BD%95.zip)
# 生成文件使用说明
## 控制器Controller
### 基类
* 总后台控制器继承基类`buwang/base/AdminBaseController.php`
* 租户后台控制器继承基类`buwang/base/MemberBaseController.php`
### 目前系统内部默认的属性有:
参数说明类型默认model当前模型对象modelnullrelationSearch是否关联查询boolfalsesort列表排序规则array['id' => 'desc']allowModifyFields允许修改的字段array['status', 'sort', 'remark', 'is_delete', 'is_auth', 'title']noExportFields不导出的字段信息array['delete_time', 'update_time']selectWhere下拉选择条件array[]layout模板布局, false取消string'layout/default'
### Crud方法引用
后台使用Curd trait, 能大大提高开发效率以及代码的可复用性, 文件位置:`buwang/traits/Crud.php`
默认的CURD方法有:
参数说明index列表add添加edit编辑delete删除export导出modify属性修改
### 使用方法
* 在类里面引入`use \buwang\traits\Crud;`
* 初始化当前模型
代码示例
~~~
<?php
namespace app\admin\controller\crud;
use buwang\base\AdminBaseController;
/**
* crud测试表
*/
class Demo extends AdminBaseController
{
use \buwang\traits\Crud;
protected $relationSearch = true;
public function initialize()
{
parent::initialize();
$this->layout && $this->app->view->engine()->layout($this->layout);
$this->model = new \app\admin\model\zhu\crudDemo();
$this->assign('getCrudDemoCateeList', $this->model->getCrudDemoCateeList());
$this->assign('getSwitchList', $this->model->getSwitchList());
$this->assign('getStatusList', $this->model->getStatusList());
$this->assign('getFruitList', $this->model->getFruitList());
$this->assign('getInterestList', $this->model->getInterestList());
$this->assign('getCateIdList', $this->model->getCateIdList());
}
}
~~~
### 覆盖方法修改
因为默认的Curd不适用你的需求,请复制`app/admin/traits/Curd.php`对应的方法到你的控制器下进行覆盖修改。
#### `index()`列表关联查询
* 修改控制器的属性`relationSerach`为true
* 模型关联请使用该方法`withJoin()`
代码示例`控制器`
~~~
<?php
namespace app\admin\controller\crud;
use buwang\base\AdminBaseController;
/**
* crud测试表
*/
class Demo extends AdminBaseController
{
use \buwang\traits\Crud;
protected $relationSearch = true;
public function initialize()
{
parent::initialize();
$this->layout && $this->app->view->engine()->layout($this->layout);
$this->model = new \app\admin\model\zhu\crudDemo();
$this->assign('getCrudDemoCateeList', $this->model->getCrudDemoCateeList());
$this->assign('getSwitchList', $this->model->getSwitchList());
$this->assign('getStatusList', $this->model->getStatusList());
$this->assign('getFruitList', $this->model->getFruitList());
$this->assign('getInterestList', $this->model->getInterestList());
$this->assign('getCateIdList', $this->model->getCateIdList());
}
/**
* @NodeAnotation(title="列表")
*/
public function index()
{
if ($this->request->isAjax()) {
if (input('selectFieds')) {
return $this->selectList();
}
list($page, $limit, $where) = $this->buildTableParames();
$count = $this->model
->withJoin('crudDemoCatee', 'LEFT')
->where($where)
->count();
$list = $this->model
->withJoin('crudDemoCatee', 'LEFT')
->where($where)
->page($page, $limit)
->order($this->sort)
->select();
$data = [
'total' => $count,
'list' => $list,
];
return $this->success('success', $data);
}
return view();
}
}
~~~
代码示例`模型`
~~~
<?php
namespace app\admin\model\zhu;
use buwang\base\TimeModel;
class CrudDemo extends TimeModel
{
protected $name = "crud_demo";
protected $deleteTime = "delete_time";
public function crudDemoCatee()
{
return $this->belongsTo('\app\admin\model\relation\CrudDemoCatee', 'cate_id', 'id');
}
public function getCrudDemoCateeList()
{
return \app\admin\model\relation\CrudDemoCatee::column('name', 'id');
}
public function getSwitchList()
{
return ['0'=>'关闭','1'=>'打开',];
}
public function getStatusList()
{
return ['0'=>'下架','1'=>'上架',];
}
public function getFruitList()
{
return ['apple'=>'苹果','orange'=>'橘子','banana'=>'香蕉',];
}
public function getInterestList()
{
return ['swim'=>'游泳','run'=>'跑步','basket'=>'篮球',];
}
public function getCateIdList()
{
return ['1'=>'服装','2'=>'家电',];
}
}
~~~
#### `modify()`属性修改限制
为了安全,modify方法默认允许修改的字段有:
* status
* sort
* remark
* is\_delete
* is\_auth
* title
如果默认字段不适用你的需求请, 请在控制器下覆盖该属性`allowModifyFileds`值即可。
~~~
<?php
namespace app\admin\controller\crud;
use buwang\base\AdminBaseController;
/**
* crud测试表
*/
class Demo extends AdminBaseController
{
use \buwang\traits\Crud;
protected $allowModifyFileds = ['username','sort'];
}
~~~
## 模型Model
参考ThinkPHP6.0官方文档,用法完全一致
## 视图View
`index.html``add.html` `edit.html`分别对应 `Controller`中的 `index()``add()``edit()` 方法,与ThinkPHP一致
### form表单
* form表单已经集成了快速验证以及提交的方法,无需手动重组数据再进行提交
* 默认提交的数据是提交当前`url`,如需提交到其它页面,修改一下`lay-submit`的值即可
* 在对应的js文件内引入`easy-admin`模块,并执行`ea.listen();`进行监听
#### 必填值
使用`lay-verify="required"`,会自动生成必填小红点, 并且会在提交的时候进行必填验证
~~~
<div class="layui-form-item">
<label class="layui-form-label">权限名称</label>
<div class="layui-input-block">
<input type="text" name="title" class="layui-input" lay-verify="required" placeholder="请输入权限名称" value="">
<tip>填写权限名称。</tip>
</div>
</div>
~~~
#### `lay-submit`事件监听
使用该事件监听,会自动获取表单数据以`POST`方式自动提交。
与`lay-submit`事件监听的相关参数:
参数说明类型是否必填默认备注lay-submit监听表单自动提交string是当前地址为空则提交的当前地址。如果需要提交到其它地址,此处填写对应的地址。data-refresh提交成功后是否需要刷新bool否true提交成功后,关闭弹出层,刷新父层的table列表,如果不需要刷新,或者没有用到弹出层,此处改为falselay-filterlayui内置过滤器string否自动生成唯一值无特殊需求,此处无需填写,会自动生成
例子
~~~
<div class="layui-form-item text-center">
<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
</div>
~~~
#### 提交前置操作
提交前置操作需写在js文件中,请前往 `前端Js` 分类下查看使用方法
#### 动态下拉选择
根据接口动态获取下拉选择
参数说明类型是否必填默认值备注data-select拉下选择string是参数值为请求的urldata-fields查询的字段string是data-value下拉选中的值string否
代码示例
~~~
<div class="layui-form-item">
<label class="layui-form-label">商品分类</label>
<div class="layui-input-block">
<select name="cate_id" lay-verify="required" data-select="{:url('mall.cate/index')}" data-fields="id,title" data-value="{$row.cate_id|default=''}">
</select>
</div>
</div>
~~~
返回的json格式
~~~
{
"code":200,
"msg":"ok",
"time":1605158685,
"data":
{
"errcode":0,
"data":[{
"id": 9,
"title": "手机"
}, {
"id": 10,
"title": "家用"
}, {
"id": 11,
"title": "如何"
}]
}
}
~~~
#### 上传组件
##### 上传参数
参数说明类型是否必填默认值备注data-upload上传选中的inputstring是data-upload-number单传还是多传string是onedata-upload-exts限制上传的文件类型string否*使用分割符连接data-upload-icon文件失效时显示图标string否imagedata-upload-sign多文件拼接的分割符string否/
* 选择参数
参数说明类型是否必填默认值备注id唯一的ID值string是data-upload-select下拉选中的inputstring是data-upload-number单传还是多传string是onedata-upload-exts限制上传的文件类型string否*使用分割符连接
##### 代码示例
~~~
<div class="layui-form-item">
<label class="layui-form-label required">商品LOGO</label>
<div class="layui-input-block layuimini-upload">
<input name="logo" class="layui-input layui-col-xs6" lay-verify="required" placeholder="请上传分类图片" value="{$row.logo|default=''}">
<div class="layuimini-upload-btn">
<span><a class="layui-btn" data-upload="logo" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
<span><a class="layui-btn layui-btn-normal" id="select_logo" data-upload-select="logo" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
</div>
</div>
</div>
~~~
#### 时间控件
##### 时间控件参数
* 系统默认内置了快速初始化控件的方法。
* 如果无法满足你当前需求, 请参考layui的文档自行编写。
参数说明类型是否必填默认值备注data-date开启时间控件string是如果填写值, 此处是 format - 自定义格式data-date-type选择类型string否datetimedata-date-range开启范围选择string否-此处的值用于拼接
相关参数说明
* `data-date-type`类型有:
* `year` 年选择器
* `month` 年月选择
* `date` 日期选择器
* `time` 时间选择器
* `datetime` 日期时间选择器
##### 代码示例
~~~
<div class="layui-form-item">
<label class="layui-form-label">上架时间</label>
<div class="layui-input-block">
<input type="text" name="up_date" data-date="" data-date-type="date" data-date-range="-" class="layui-input" placeholder="请选择上架时间" value="">
</div>
</div>>
~~~
#### 富文本编辑器
##### 富文本编辑器初始化
* 系统默认内置了`ckeditor4`编辑器, 只需要简单的初始化操作就可以轻松使用富文本编辑器。
* 在`class`引入`editor`样式即可完成初始化操作。
* 可以使用`rows`来控制编辑器的高度。
##### 代码示例
~~~
<div class="layui-form-item">
<label class="layui-form-label">商品描述</label>
<div class="layui-input-block">
<textarea name="describe" rows="20" class="layui-textarea editor" placeholder="请输入商品描述">{$row.describe|default=''}</textarea>
</div>
</div>
~~~
### auth权限验证
* 第一种示例, 通过php的`auth()`方法生成`layui-hide`样式属性。
~~~
<button class="layui-btn layui-btn-normal layui-btn-sm {if !auth('system.menu/add')}layui-hide{/if}" data-open="system.menu/add" data-title="添加" data-full="true"><i class="fa fa-plus"></i> 添加</button>
~~~
* 第二种, 通过php的`auth()`方法判断, 是否显示html
~~~
{if !auth('system.menu/add')}
<button class="layui-btn layui-btn-normal layui-btn-sm" data-open="system.menu/add" data-title="添加" data-full="true"><i class="fa fa-plus"></i> 添加</button>
{/if}
~~~
## 前端Js
### 后台控制器与JS的绑定
* 控制器中JS的目录对应为:`public/static/admin/js`
* 文件命名为: `小写+下划杠`
* `控制器`的每一个`方法`对应JS的`Controller`对象的一个`属性`
* 每一个JS文件都需要引入`admin`模块,并执行监听`ea.listen();`;
例子
* 控制器对应的PHP文件`app/admin/controller/mall/Cate.php`
* 控制器对应的JS文件`public/static/admin/js/mall/cate.js`
* 每一个控制里面的`方法`对应js里面的`属性`就会自动进行加载
~~~
define(["jquery", "easy-admin"], function ($, ea) {
var init = {
table_elem: '#currentTable',
table_render_id: 'currentTableRenderId',
index_url: 'crud.Demo/index',
add_url: 'crud.Demo/add',
edit_url: 'crud.Demo/edit',
delete_url: 'crud.Demo/del',
export_url: 'crud.Demo/export',
modify_url: 'crud.Demo/modify',
};
var Controller = {
index: function () {
ea.table.render({
init: init,
cols: [[
{type: 'checkbox'},
{field: 'id', title: 'ID'},
{field: 'name', title: '名称'},
{field: 'image', title: '单图', templet: ea.table.image},
{field: 'images', title: '多图', templet: ea.table.image},
{field: 'sales', title: '销量'},
{field: 'switch', search: 'select', selectList: ["关闭","打开"], tips: '打开|关闭', title: '开关', templet: ea.table.switch},
{field: 'pay_time', title: '支付时间', search: 'range', searchTip: ' - ', templet: ea.table.date},
{field: 'status', search: 'select', selectList: ["下架","上架"], tips: '上架|下架', title: '状态', templet: ea.table.switch},
{field: 'create_time', title: '创建时间', search: 'range', searchTip: ' - ', templet: ea.table.date},
{field: 'send', title: '发放时间'},
{field: 'fruit', search: 'select', selectList: {"apple":"苹果","orange":"橘子","banana":"香蕉"}, title: '水果', templet: ea.table.text},
{field: 'interest', search: 'select', selectList: {"swim":"游泳","run":"跑步","basket":"篮球"}, title: '爱好', templet: ea.table.text},
{field: 'cate_id', search: 'select', selectList: {"1":"服装","2":"家电"}, title: '分类'},
{field: 'crudDemoCatee.name', title: '分类名称'},
{field: 'crudDemoCatee.headimage', title: '头像', templet: ea.table.image},
{width: 250, title: '操作', templet: ea.table.tool},
]],
});
ea.listen();
},
add: function () {
ea.listen();
},
edit: function () {
ea.listen();
},
};
return Controller;
});
~~~
### table数据表格
#### `init` 初始化配置
建议在此处统一配置table容器以及相关的链接地址。另外还可以自己进行扩展属性。
初始化的参数有
参数说明类型是否必填备注table_elemtable容器或者domstring/dom是table_render_id容器唯一 idstring否index_url列表接口string是add_url添加接口string否需用添加功能必填edit_url编辑接口string否需用编辑功能必填delete_url删除接口string否需用删除功能必填export_url导出接口string否需用导出功能必填modify_url属性修改接口string否需用属性修改功能必填(例如:状态的切换)
实例,下方`stock_url`就是扩展属性
~~~
var init = {
table_elem: '#currentTable',
table_render_id: 'currentTableRenderId',
index_url: 'crud.Demo/index',
add_url: 'crud.Demo/add',
edit_url: 'crud.Demo/edit',
delete_url: 'crud.Demo/del',
export_url: 'crud.Demo/export',
modify_url: 'crud.Demo/modify',
};
~~~
#### 表格实例化
表格实例化方法为`ea.table.render()`, 兼容layui table的所有功能,另外还扩展了一些新的功能。
#### 扩展表格参数
这些是基于layui的table的进行扩展的基础参数,如需查看其他的参数,请去layui官网查看。
参数说明类型是否必填默认值备注initinit初始化配置object是一般情况下,请传入上方配置好的初始化参数search是否开启搜索功能bool否true开启会自动根据列生成搜索表单modifyReload修改属性时是否刷新表格bool否truetoolbartable操作栏object否['refresh','add','delete','export']除了这些内置的,还可以自己进行扩展
代码示例
~~~
ea.table.render({
init: init,
toolbar: [...表格toolbar...],
cols: [...请参考下方列参数...],
});
~~~
#### 表格toolbar操作栏
* 默认内置有四种toolbar操作方法,分别是:
* `refresh`
* `add`
* `delete`
* `export`
* 另外可以根据下方提供的参数进行自定义扩展
参数说明类型是否必填默认值备注class样式信息string否icon图标信息string否在行操作里面,不建议使用图标title提示信息string否为空则读取text属性text文本信息string否为空则读取title属性method执行方式string否open可用值,请参考下方参数说明url请求链接string/function是visible显示/隐藏string/function否true是否显示按钮,默认显示auth权限规则string是权限规则,具体请参考配置auth权限验证模块checkbox是否多选bool否false如果为true, 不管是弹出层还是直接请求, 请求时会携带上勾选的id值extend扩展属性string否例如弹出层全屏操作,可以加上:data-full="true"
相关参数说明
* `method`执行方式:
* `open` 弹出层打开
* `request` 直接请求
示例
~~~
toolbar: ['refresh',
[{
text: '添加',
url: init.add_url,
method: 'open',
auth: 'add',
class: 'layui-btn layui-btn-normal layui-btn-sm',
icon: 'fa fa-plus ',
extend: 'data-full="true"',
}],
'delete', 'export'],
~~~
#### 扩展列参数
列参数完美兼容layui的table所有列参数,具体请查看layui官网。
#### 搜索表单生成器
提供快捷搜索表单生成器,根据table表格初始化时的列参数进行动态生成。
下方是相关的表格列参数
参数说明类型是否必填默认值备注search搜索类型string/bool否true可用值,请参考下方参数说明searchOp搜索条件string否%*%可用值,请参考下方参数说明searchTip搜索提示语string否默认获取title参数值自动生成searchValue表单初始化值string否selectList下拉列表值object否需要search参数等于select时才生效fieldAlias字段别名string否与field参数相等某些特殊情况下才需要,正常用不上
相关参数说明
* `search`搜索类型:
* `false` 关闭搜索
* `true` 开启搜索
* `select` 下拉选择
* `range` 时间范围
* `time` 时间格式
* `searchOp`搜索条件:
* `=` 精确搜索
* `%*%` 模糊搜索
* `*%` 右匹配模糊搜索
* `%*` 左匹配模糊搜索
* `range` 范围搜索
代码示例
~~~
cols: [[
{type: 'checkbox'},
{field: 'id', title: 'ID'},
{field: 'name', title: '名称'},
{field: 'image', title: '单图', templet: ea.table.image},
{field: 'images', title: '多图', templet: ea.table.image},
{field: 'sales', title: '销量'},
{field: 'switch', search: 'select', selectList: ["关闭","打开"], tips: '打开|关闭', title: '开关', templet: ea.table.switch},
{field: 'pay_time', title: '支付时间', search: 'range', searchTip: ' - ', templet: ea.table.date},
{field: 'status', search: 'select', selectList: ["下架","上架"], tips: '上架|下架', title: '状态', templet: ea.table.switch},
{field: 'create_time', title: '创建时间', search: 'range', searchTip: ' - ', templet: ea.table.date},
{field: 'send', title: '发放时间'},
{field: 'fruit', search: 'select', selectList: {"apple":"苹果","orange":"橘子","banana":"香蕉"}, title: '水果', templet: ea.table.text},
{field: 'interest', search: 'select', selectList: {"swim":"游泳","run":"跑步","basket":"篮球"}, title: '爱好', templet: ea.table.text},
{field: 'cate_id', search: 'select', selectList: {"1":"服装","2":"家电"}, title: '分类'},
{field: 'crudDemoCatee.name', title: '分类名称'},
{field: 'crudDemoCatee.headimage', title: '头像', templet: ea.table.image},
{width: 250, title: '操作', templet: ea.table.tool},
]],
~~~
#### 列operat操作栏
* 默认内置有两种operat操作方法,分别是:
* `edit`
* `delete`
* 另外可以根据下方提供的参数进行自定义扩展
参数说明类型是否必填默认值备注class样式信息string否icon图标信息string否在行操作里面,不建议使用图标title提示信息string否为空则读取text属性text文本信息string否为空则读取title属性method执行方式string否open可用值,请参考下方参数说明url请求链接string是auth权限规则string是权限规则,具体请参考配置auth权限验证模块field绑定行字段string否id会自动根据此字段生成链接后缀extend扩展属性string否例如弹出层全屏操作,可以加上:data-full="true"
相关参数说明
* `method`执行方式:
* `open` 弹出层打开
* `request` 直接请求
示例
~~~
operat: [
[{
text: '编辑',
url: init.edit_url,
method: 'open',
auth: 'edit',
class: 'layui-btn layui-btn-xs layui-btn-success',
extend: 'data-full="true"',
}, {
text: '入库',
url: function(row){
return init.stock_url;
},
visible: function(row){
return row.status == 1;
},
method: 'open',
auth: 'stock',
class: 'layui-btn layui-btn-xs layui-btn-normal',
}],
'delete']
~~~
#### 列内置templet方法
方法说明备注ea.table.list根据行的selectList返回对应列表值一般类型之类的会用到ea.table.image显示图片行参数imageHeight是控制图片的高度ea.table.url格式化显示链接ea.table.switch生成开关组件ea.table.price格式化为价格ea.table.percent格式化为百分比ea.table.icon显示图标ea.table.value格式化数据多层对象数据的显示ea.table.tool列操作栏自动生成列操作栏
示例
~~~
cols: [[
{field: 'status', search: 'select', selectList: ["下架","上架"], tips: '上架|下架', title: '状态', templet: ea.table.switch},
{field: 'crudDemoCatee.headimage', title: '头像', templet: ea.table.image},
{width: 250, title: '操作', templet: ea.table.tool},
]],
~~~
#### auth权限验证
* table表格里面,一种table表格`上方`的操作栏`toolbar`需要权限判断是否显示。
* 另外一种是table表格`里面`的列操作栏`operat`也需要权限判断是否显示。
#### 事先定义权限规则
* 需要在对应的表格的`dom`事先全好对应的权限规则。
* 权限规则为:`data-auth-` + 规则名
* 例如:data-auth-`add`\="{:auth('goods.cate/add')}", `add`就是对应的权限规则。
下方例子中共定义了:`add` `edit` `delete` `stock` 四种权限规则
~~~
<div class="layuimini-container">
<div class="layuimini-main">
<table id="currentTable" class="layui-table layui-hide"
data-auth-add="{:auth('crud.Demo/add')}"
data-auth-edit="{:auth('crud.Demo/edit')}"
data-auth-delete="{:auth('crud.Demo/delete')}"
lay-filter="currentTable">
</table>
</div>
</div>
~~~
#### 表格上方的`toolbar`权限验证
下面简单讲解权限验证,完整的`toolbar`的使用和配置请查看`table`模块。
* `toolbar`内置三个内置权限验证:`add`,`delete`,`export`
~~~
toolbar: ['refresh','add', 'delete', 'export']
~~~
* 自定义`toolbar`, 在`auth`属性上填写`权限规则`
~~~
toolbar: ['refresh',
[{
text: ' 添加',
open: init.add_url,
class: 'layui-btn layui-btn-normal layui-btn-sm',
icon: 'fa fa-plus ',
title: '添加',
auth: 'add',
extend: ' data-full="true"',
}],
'delete', 'export'],
~~~
#### 表格内列操作`operat`的权限验证
* `operat`内置三个内置权限验证:`edit`,`delete`
~~~
operat: ['edit', 'delete']
~~~
* 自定义`operat`, 在`auth`属性上填写`权限规则`
~~~
operat: [
[{
class: 'layui-btn layui-btn-xs layui-btn-success',
method: 'open',
text: '编辑',
auth: 'edit',
url: init.edit_url,
extend: 'data-full="true"',
}, {
class: 'layui-btn layui-btn-xs layui-btn-normal',
method: 'open',
text: '入库',
auth: 'stock',
url: init.stock_url,
extend: '',
}],
'delete']
~~~
### 提交前置操作
事件监听方法:`ea.listen(preposeCallback, ok, no, ex)`,可能用得比较多的还是`preposeCallback`的提交前置回调。
参数说明类型是否必填备注preposeCallback表单提交前的前置回调function否一般用于需要重新组装一些特殊的数据再提交ok提交成功后的回调function否no提交失败后的回调function否ex提交异常后的回调function否
~~~
ea.listen(function (data) {
// 此处进行数据重组再返回
data.test = '测试重组数据';
return data;
});
~~~
### 完整例子
~~~
define(["jquery", "easy-admin"], function ($, ea) {
var init = {
table_elem: '#currentTable',
table_render_id: 'currentTableRenderId',
index_url: 'crud.Demo/index',
add_url: 'crud.Demo/add',
edit_url: 'crud.Demo/edit',
delete_url: 'crud.Demo/del',
export_url: 'crud.Demo/export',
modify_url: 'crud.Demo/modify',
};
var Controller = {
index: function () {
ea.table.render({
init: init,
cols: [[
{type: 'checkbox'},
{field: 'id', title: 'ID'},
{field: 'name', title: '名称'},
{field: 'image', title: '单图', templet: ea.table.image},
{field: 'images', title: '多图', templet: ea.table.image},
{field: 'sales', title: '销量'},
{field: 'switch', search: 'select', selectList: ["关闭","打开"], tips: '打开|关闭', title: '开关', templet: ea.table.switch},
{field: 'pay_time', title: '支付时间', search: 'range', searchTip: ' - ', templet: ea.table.date},
{field: 'status', search: 'select', selectList: ["下架","上架"], tips: '上架|下架', title: '状态', templet: ea.table.switch},
{field: 'create_time', title: '创建时间', search: 'range', searchTip: ' - ', templet: ea.table.date},
{field: 'send', title: '发放时间'},
{field: 'fruit', search: 'select', selectList: {"apple":"苹果","orange":"橘子","banana":"香蕉"}, title: '水果', templet: ea.table.text},
{field: 'interest', search: 'select', selectList: {"swim":"游泳","run":"跑步","basket":"篮球"}, title: '爱好', templet: ea.table.text},
{field: 'cate_id', search: 'select', selectList: {"1":"服装","2":"家电"}, title: '分类'},
{field: 'crudDemoCatee.name', title: '分类名称'},
{field: 'crudDemoCatee.headimage', title: '头像', templet: ea.table.image},
{width: 250, title: '操作', templet: ea.table.tool},
]],
});
ea.listen();
},
add: function () {
ea.listen();
},
edit: function () {
ea.listen();
},
};
return Controller;
});
~~~