关于使用fastadmin的一些技巧

关于使用fastadmin的一些技巧
1.在对应js中使用后端的数据
     后端：$this->assignConfig('变量名','变量值');
     前端：Config.变量名

     例如：

$this->assignConfig('title','标题');

Config.title

 2.在原有的初始化表格基础上传自己想传的参数

     table.bootstrapTable({
         url: $.fn.bootstrapTable.defaults.extend.index_url,
         pk: 'id',
         sortName: 'id',
         search:false,
         showToggle: false,
         commonSearch: false,
         columns: [
             [
                 {field: 'name', title: __('Name')},
                 {field: 'image', title: __('Image'), events: Table.api.events.image, formatter: Table.api.formatter.images},
                 {field: 'address', title: __('Address')},
                 {field: 'room_num', title: __('Room_num')},
                 {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                 {field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                 {field: 'telphone', title: __('Telphone')},
                 {
                     field: 'operate', 
                     title: __('Operate'), 
                     table: table, 
                     events: Table.api.events.operate, 
                     formatter: function (value, row, index) {
                         var that = $.extend({}, this);
                         var table = $(that.table).clone(true);
                         $(table).data("operate-del", null);
                         that.table = table;
                         return Table.api.formatter.operate.call(that, value, row, index);
                     }
                 }
             ]
         ],
         queryParams: function (params) {
             // 自定义搜索条件
             var filter = params.filter ? JSON.parse(params.filter) : {};
             var op = params.op ? JSON.parse(params.op) : {};
             //filter.后跟的是在ajax里使用的名称只需修改这两行
             filter.id = Config.hotel_id;
             //opop后跟的也是ajax里使用的名称，后面是条件
             op.id = '=';
             params.filter = JSON.stringify(filter);
             params.op = JSON.stringify(op);
             // console.log(params);
             return params;
         }
     });

     关键代码：
   

queryParams: function (params) {
         // 自定义搜索条件
         var filter = params.filter ? JSON.parse(params.filter) : {};
         var op = params.op ? JSON.parse(params.op) : {};
         //filter.后跟的是在ajax里使用的名称只需修改这两行
         filter.id = Config.hotel_id;
         //opop后跟的也是ajax里使用的名称，后面是条件
         op.id = '=';
         params.filter = JSON.stringify(filter);
         params.op = JSON.stringify(op);
         // console.log(params);
         return params;
     }

 3.添加或者修改后局部局部刷新表格而不刷新页面的做法
     

$('.btn-add').click(function(){
        // Fast.api.open('memorandum/memorandum/add');
        Backend.api.open('memorandum/memorandum/add', '添加备忘录',{
            callback:function(r){
                table.bootstrapTable('refresh');
            }
        });
    });

   

 //这样可以接收返回值
    Form.api.bindevent("form[role=form]", function(data, ret){
        //这里只要返回false，就会阻止我们的弹窗自动关闭和自动提示
        Fast.api.close(ret);//这里是重点
    },function(data,ret){

    });

4.关闭窗口并回传数据
 

Fast.api.close(data) 

5.选择一个选项后关闭弹窗并把数据回传给父级
弹窗里的js

{
    field: 'operate', 
    title: __('Operate'), 
    events: {
        'click .btn-chooseone': function (e, value, row, index) {
            var multiple = Backend.api.query('multiple');
            multiple = multiple == 'true' ? true : false;
            Fast.api.close({room_num: row.room_num,id:row.id ,multiple: false});
        },
    }, 
    formatter: function () {
        return '<a href="javascript:;" class="btn btn-danger btn-chooseone btn-xs"><i class="fa fa-check"></i> ' + __('Choose') + '</a>';
    }
}

父级里的js

$('.select').click(function(){
    obj=$(this);
    Fast.api.open(url,title,{callback: function (data) {
        obj.prev().html(data.room_num);
        obj.next().val(data.room_num);
    }});
});

6.去除操作栏中的删除

{
    field: 'operate', 
    title: __('Operate'), 
    table: table, 
    events: Table.api.events.operate,
    formatter: function (value, row, index) {
        var that = $.extend({}, this);
        var table = $(that.table).clone(true);
        $(table).data("operate-del", null);
        that.table = table;
        return Table.api.formatter.operate.call(that, value, row, index);
    }
}

7.默认编辑的弹窗100%

var table = $("#table");
$('.btn-editone').data('area',['100%','100%']);
table.on('load-success.bs.table', function (e, data) {
    $('.btn-editone').data('area',['100%','100%']);               
});

8.layer加载风格
  

 var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

     关闭
    

Layer.closeAll('loading');

9.打开一个新窗口（不是弹窗）
    

Backend.api.addtabs('order/order/edit?ids='+r.order_id,'订单详情');

10.tpl模版的使用
    注意js中define中增加template
    html中
  

 <script id='roomstatustpl' type="text/html">
        <div class="panel panel-primary" style="border-bottom: 0;border-left: 0;border-right: 0;">
            <div class="panel-heading room_num"><%=num%> 房间</div>
            <div class="panel-body">
                <% for(var i=0;i<statusList.length;i++){%>
                <%if(statusList[i].status == 1){%>
                <button class="btn btn-warning status" data-status='1' data-index="<%=id%>">退换房</button>
                <%}%>
                <%if(statusList[i].status == 2){%>
                <button class="btn btn-success status" data-status='2' data-index="<%=id%>">办理入住</button>
                <%}%>
                <%if(statusList[i].status == 4){%>
                <button class="btn btn-danger status" data-status='4' data-index="<%=id%>">保洁</button>
                <%}%>
                <%if(statusList[i].status == 5){%>
                <button class="btn btn-success status" data-status='5' data-index="<%=id%>">保洁完成</button>
                <%}%>
                <%}%>
            </div>
        </div>
    </script>

    js中
    

$(document).on('click','.room',function(){
        num=$(this).find('p').eq(0).html();
        id=$(this).data('index');
        status=$(this).data('status');
        statusList=[];
        console.log(status);
        switch(status){
            case '1':  //未入住
                statusList.push({'title':'办理入住','status':2});
                statusList.push({'title':'保洁','status':4});
            break;
            case '2': //已入住
                statusList.push({'title':'办理退房','status':1});
            break;
            case '4': //保洁
                statusList.push({'title':'保洁完成','status':5});
            break;
        }
        console.log(statusList);
        console.log(statusList.length);
        data={
            'num':num,
            'id':id,
            'statusList':statusList
        }
        Layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            skin: 'yourclass',
            content: Template('roomstatustpl',data),
        });
    })

11.监听回车键按下
  

 document.onkeydown = keyListener;
    function keyListener(e) {
        // 当按下回车键，执行我们的代码
        if (e.keyCode == 13) {
            //要执行的逻辑
        }
    }

12.datetimepicker自定义加载及使用（可以控制开始和结束时间的联动）

html代码

<form class="" role="form" method="get" action="{:url('index')}">
            <div class="select">
                <div>
                    选择日期
                </div>
                <div>
                    <input class="form-control datetimepicker" data-date-format="YYYY-MM-DD" data-date-max-date="{:date('Y-m-d')}"  name="row[begin]" id="begin" value="{$begin??date('Y-m-d')}" type="text" placeholder="开始日期">
                </div>
                <div>
                    至
                </div>
                <div>
                    <input class="form-control  datetimepicker" data-date-format="YYYY-MM-DD" data-date-max-date="{:date('Y-m-d')}" data-date-min-date="{:date('Y-m-d')}"  name="row[end]" type="text" id="end" value="{$end??date('Y-m-d')}" placeholder="结束日期">
                </div>
                <div>
                    <button type="button" class="btn btn-success btn-tongji">统计</button>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>

            <div style="height: 20px;"></div>
            <div class="row tongji">
                <div class="col-md-12">
                <span class="text-red">2019-12-10</span> 至 <span class="text-red">2019-12-30</span> 共成交 <span class="text-red">100</span> 单，营收 <span class="text-red">1000</span> 元 &nbsp;&nbsp;<a class="btn btn-primary baobiao" href="{:url('export')}">导出报表</a> 
                </div>
            </div>
        </form>

js代码：

define(['jquery', 'bootstrap', 'backend', 'table', 'form','bootstrap-datetimepicker'], function ($, undefined, Backend, Table, Form,Datetimepicker) {

    var Controller = {
        index: function () {
            var options = {
                format: 'YYYY-MM-DD',
                useCurrent: false,
                icons: {
                    time: 'fa fa-clock-o',
                    date: 'fa fa-calendar',
                    up: 'fa fa-chevron-up',
                    down: 'fa fa-chevron-down',
                    previous: 'fa fa-chevron-left',
                    next: 'fa fa-chevron-right',
                    today: 'fa fa-history',
                    clear: 'fa fa-trash',
                    close: 'fa fa-remove'
                },
                showTodayButton: true,
                showClose: true
            };
            $('#begin').datetimepicker(options);
            $('#end').datetimepicker(options);
            $("#begin").on("dp.change", function (e) {
                begin=$(this).val();
                end=$('#endtime').val();
                b1=(new Date(begin)).getTime();
                e1=(new Date(end)).getTime();
                if(b1>=e1){
                    $('#endtime').data("DateTimePicker").date(e.date);
                }
               $('#end').data("DateTimePicker").minDate(e.date);
            });
            $("#end").on("dp.change", function (e) {
               $('#begin').data("DateTimePicker").maxDate(e.date);
            });
            Controller.api.bindevent();
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        order: function (){
            
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});

关键是：define中增加bootstrap-datetimepicker

12.在表中以某个字段排序关键 sortable

{field: 'id', title: __('Id'), sortable: true},