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文件中定义搜索模板:

<script id="customformtpl" type="text/html">
    <!--form表单必须添加form-commsearch这个类-->
    <form action="" class="form-commonsearch form-horizontal">
        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:20px;">
            <div class="row">
                
              
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label col-xs-4">旺旺</label>
                        <div class="col-xs-8">
                            <!--显式的operate操作符-->
                            <input type="hidden" class="operate" data-name="wangwang" value="="/>
                            <!--搜索关键字-->
                            <input type="text" class="form-control" name="wangwang" value=""/>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label col-xs-4">状态</label>
                        <div class="col-xs-8">
                            <input type="hidden" class="operate" data-name="status" value="="/>
                            {:build_select('status',$statusList,0)}
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <div class="col-xs-8 col-xs-offset-4">
                            <input type="submit" class="btn btn-success " value="搜索"/>
                            <input type="reset" class="btn btn-primary"  value="重置"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>

```

nice validator 表单验证组件

官方地址: https://validator.niceue.com/docs/

* **match** 规则如果传两个以上参数,参数必须用 ,+空格分开。逗号后一定要加空格,否则会导致验证规则无效

* **remote:** 请求服务端验证,官方的服务端返回结果格式:

  1. 直接返回字符串结果

    // 为空代表通过
    ""
    // 不为空则代表错误
    "名字已被占用"
  2. 返回 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);
 });

 

 

 

发布了31 篇原创文章 · 获赞 17 · 访问量 50万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览