fastadmin 使用手记
目录
常用css类：
组件的使用
Bootstrap-datetimepicker组件
Table的使用
通用搜索
自定义通用搜索
nice validator 表单验证组件
单选表格
常用css类：
系统默认注册了事件的 class :
btn-add: 添加按钮 系统绑定了打开添加窗口的事件
btn-edit: 编辑按钮 系统绑定了打开编辑窗口的事件
btn-del: 删除按钮 系统绑定了打开删除窗口的事件
btn-import: 导入按钮 系统绑定了打开导入窗口的事件
btn-more: 更多按钮使用 系统绑定了打开导入窗口的事件
btn-multi: 指操作使用
btn-disabled: 添加此class后则只有在列表有选中数据时按钮才会变为可使用
btn-dialog 将 href 在 对话框中打开
btn-ajax
btn-addtabs 将连接在 新的系统选项卡中打开
将元素属性设置 data-area='["100%","100%"]'即可 默认全屏 页面。
Fast.api.close(""); //js 中关闭当前弹出层
组件的使用
Bootstrap-datetimepicker组件
Bootstrap-datetimepicker 组件事件的监听：
首先要在监听页面的js文件中引入Bootstrap-datetimepicker，形如：
define(['jquery', 'bootstrap',"bootstrap-datetimepicker", 'backend', 'table', 'form'], function ($, undefined, undefined1,Backend, Table, Form) {
监听相关的事件：
$("#start-date").datetimepicker().on("dp.hide",function () {
});关于Bootstrap-datetimepicker 的更多用法请戳：http://www.bootcss.com/p/bootstrap-datetimepicker/
Table的使用
JS配置选项：
url: '',
undefinedText:'-', //未定义列的默认显示符号
sidePagination: 'server',
method: 'get', //请求方法
toolbar: ".toolbar", //工具栏
search: true, //是否启用快速搜索
cache: false,
commonSearch: true, //是否启用搜索表单
searchFormVisible: false, //是否始终显示搜索表单
titleForm: '', //为空则不显示标题，不定义默认显示：普通搜索
idTable: 'commonTable',
showExport: true,
exportDataType: "all", //可用值 all 当前搜索条件下所有的可见列的数据 selected 选中行的数据 basic 当前分页下的数据
exportTypes: ['json', 'xml', 'csv', 'txt', 'doc', 'excel'],
exportOptions:{ //导出设置选项; 更多选项：https://www.npmjs.com/package/tableexport.jquery.plugin
ignoreColumn:[0,9]
},
pageSize: 10,
pageList: [10, 25, 50, 'All'],
pagination: true,
clickToSelect: true, //是否启用点击选中
dblClickToEdit: true, //是否启用双击编辑
singleSelect: false, //是否启用单选
showRefresh: false, //是否显示刷新按钮
locale: 'zh-CN',
showToggle: true,
showColumns: true,
pk: 'id',
sortName: 'id',
sortOrder: 'desc',
paginationFirstText: __("First"),
paginationPreText: __("Previous"),
paginationNextText: __("Next"),
paginationLastText: __("Last"),
cardView: false, //卡片视图
checkOnInit: true, //是否在初始化时判断
escape: true, //是否对内容进行转义
extend: {
index_url: '',
add_url: '',
edit_url: '',
del_url: '',
import_url: '',
multi_url: '',
dragsort_url: 'ajax/weigh',
},
通用搜索
fastadmin 通过 bootstraptabe-commonsearch插件,以下简称(bt-cs)，实现通用搜索，可以很方便的将数据库中的字段，通过在js中，设置bootstrapTable 的列属性，使其成为搜索项。下面是人员管理 auth/admin 控制器中 index方法对应的js代码：
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
columns: [
[
{field: 'state', checkbox: true, },
{field: 'id', title: 'ID'},
{field: 'username', title: __('Username')},
{field: 'nickname', title: __('Nickname')},
{field: 'area_info', title:'所在地区'},
{field: 'groups_text', title: __('Group'), operate:false, formatter: Table.api.formatter.label},
{field: 'email', title: __('Email')},
{field: 'status', title: __("Status"), formatter: Table.api.formatter.status},
{field: 'logintime', title: __('Login time'), formatter: Table.api.formatter.datetime},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: function (value, row, index) {
if(row.id == Config.admin.id){
return '';
}
return Table.api.formatter.operate.call(this, value, row, index);
}}
]
],
});
operate:false, formatter: Table.api.formatter.label},
{field: 'email', title: __('Email')},
{field: 'status', title: __("Status"), formatter: Table.api.formatter.status},
{field: 'logintime', title: __('Login time'), formatter: Table.api.formatter.datetime},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: function (value, row, index) {
if(row.id == Config.admin.id){
return '';
}
return Table.api.formatter.operate.call(this, value, row, index);
}}
]
],
});
bt-sc 会为除特殊列之外的其他列，创建一个input元素，放置在新建的用与搜索的form中。我们可以通过$(".from-commonsearch")来选择该from。 如果不想把某一列作为搜索项，可以将列的operate属性设置为false; 可已通过为类设置 type,addclass,data属性，来设置其相应input元素的type,class值和自定义属性。如:
{field: 'area_info', title:'所在地区',type:'input',addclass:'text areainfo' ,data:'data-id=1 data-other=test'},如果进行日期搜索，可以将type设置为：datatime，系统自动将值转换为时间戳进行搜索。
特殊列：field属性为operate的列及 指定了searchList属性的通。
关于searchList和按时间筛选的内容请查看：https://forum.fastadmin.net/thread/323
自定义通用搜索
```
#table的options 参数设定:
searchFormVisible: true, searchFormTemplate: 'customformtpl',
#在view文件中定义搜索模板:
```
nice validator 表单验证组件
官方地址： https://validator.niceue.com/docs/
* **match** 规则如果传两个以上参数，参数必须用 ，+空格分开。逗号后一定要加空格，否则会导致验证规则无效
* **remote:** 请求服务端验证，官方的服务端返回结果格式:
-
直接返回字符串结果
// 为空代表通过 "" // 不为空则代表错误 "名字已被占用" -
返回 JSON 格式
// 验证通过 {"ok": "名字很棒"} // 验证不通过 {"error": "名字已被占用"} // 结果在第二级 data {"status": 200, "data": {"error": "名字已被占用"}}
fastadmin 对其做了重写，要求的返回格式为：
```
{"code":0,"msg":"验证失败"}
{"code":1,"msg":"验证成功"}
```
通常在控制器中使用 success或error 方法来返回验证结果。
单选表格
//表格js片段
columns: [
[
{checkbox:true,radio:true},
{field: 'nickname', title: __('Nickname'), operate: 'LIKE'},
{field: 'mobile', title: __('手机号'), operate: 'LIKE'},
{field: 'avatar', title: __('头像'), formatter: Table.api.formatter.image, operate: false},
]
]
//在确定按钮中取得选中项ID的代码
$("button[type='submit']").click(function(){
var ids = Table.api.selectedids(table);
var id = ids.pop();
if(typeof id == "undefined"){
Toastr.error("请选择一个司机");
}
console.log(id);
});