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,
            clickTo