FastAdmin 個人記錄 - js、控件應用示例

控制台中統計圖加載變形#

從其他菜單進入控制台觸發 btn-refresh resize

//從其他按鈕進入控制台 觸發btn-refresh resize
let chart = Echarts.getInstanceByDom($('#line-chart')[0]);
stat(chart,false);

$(document).on("click", ".btn-refresh", function () {
   setTimeout(function () {
      chart.resize();
   }, 0);
});

控制器方法請求事件#

//提交前確認框 方式一
Form.api.bindevent($("form[role=form]"), function(data, ret){
    // 如果我們需要在提交表單成功後做跳轉，可以在此使用 location.href="鏈接"; 進行跳轉
    //parent.location.reload();// 這裡刷新父頁面，可以換其他代碼
    //提交成功邏輯
}, function(data, ret){
    Layer.closeAll('dialog');
}, function(success, error){
    //bindevent 的第三個參數為提交前的回調
    // 如果我們需要在表單提交前做一些數據處理，則可以在此方法處理
    // 注意如果我們需要阻止表單，可以在此使用 return false; 即可
    // 如果我們處理完成需要再次提交表單則可以使用 submit 提交，如下
    //Form.api.submit(this, success, error);
    var self = this;

    Layer.confirm('yes or no', {
        btn: [__('OK'),__('Cancel')] // 按鈕
    }, function(){
        //Layer.closeAll('dialog');
        //self this
        Form.api.submit(self, success, error);
        //return false;
    }, function(){
        //Layer.closeAll('dialog');
        //return false;
    });
    return false;
});

//提交成功邏輯 Begin (邏輯參考 關閉窗體，顯示信息框，確認框關閉後刷新頁面)
Fast.api.close(1); // 關閉窗體並回傳數據
let _p = parent
parent.Layer.alert(data,{closeBtn: false},()=>{
    _p.location.reload ();// 這裡刷新父頁面，可以換其他代碼
    _p.Layer.closeAll('dialog');
})
return false;
//提交成功邏輯 End

//提交前確認框 方式二(棄用，只能作為參考)
$("#submitbtn").on("click", function(){

                let that = this;

                let content = __('Confirm Application Configuration?');
                Layer.confirm(content, {
                    btn: [__('OK'),__('Cancel')] //按鈕
                }, function(){
                    $(that).closest("form").trigger("submit");
                    Layer.closeAll('dialog');
                    parent.location.reload();//這裡刷新父頁面，可以換其他代碼
                }, function(){
                    Layer.closeAll('dialog');
                });

                return false;

            });
            Form.api.bindevent($("form[role=form]"), function(data, ret){
                //如果我們需要在提交表單成功後做跳轉，可以在此使用location.href="鏈接";進行跳轉
                parent.location.reload();//這裡刷新父頁面，可以換其他代碼
            }, function(data, ret){

            }, function(success, error){
                //bindevent的第三個參數為提交前的回調
                //如果我們需要在表單提交前做一些數據處理，則可以在此方法處理
                //注意如果我們需要阻止表單，可以在此使用return false;即可
                //如果我們處理完成需要再次提交表單則可以使用submit提交,如下
                //Form.api.submit(this, success, error);
            });
            //Controller.api.bindevent();
}

Layer.open 和 Layer.confirm#

//Layer.open 和 Layer.confirm 共存
$(document).on("click", ".setTemplate", function (index,raw){
   var area = ['40%','40%'];
   Layer.open({
      content: Template("setTemplateTpl",[]),
      zIndex: 99,
      area: area,
      title: __('Set Template Name'),
      resize: false,
      type:1,
      btn: [__('Confirm'), __('Close')],
      yes: function (index, layero) {

         let tplName = $('#tplName').val()

         if (!tplName){
            Toastr.error(__('Cannot be empty'));
            return false
         }

         var templateJson = {};
         var formData = $('form').serializeArray();
         $.each(formData, function() {
            if ($.inArray(this.name,['__token__','begin_time','loop_switch']) < 0){
               templateJson[this.name] = this.value;
            }
         });

         let row = {
            name: tplName,
            templateJson:JSON.stringify(templateJson)
         }
         let content = __('是否保存模板？');
         Layer.confirm(content, {
            type:0,
            btn: [__('OK'),__('Cancel')] //按鈕
         }, function(){
            Fast.api.ajax({
               url: "game/game/setTemplate",
               data: {
                  row:row
               }
            }, function (data) {
               layer.closeAll();
            },function (){
               layer.closeAll('dialog');
            });
            //Layer.closeAll();
         }, function(){
            Layer.closeAll('dialog');
         });

      },
      btn2: function(index, layero){
         //按鈕【按鈕二】的回調
         layer.close(index)
         //return false //禁用該按鈕
      },
      success: function (layero, index) {
         //綁定時間控件
         Form.events.datetimepicker($("form"));
      }
   });

   /*let content = __('是否保存模板？');
   Layer.confirm(content, {
       btn: [__('OK'),__('Cancel')] //按鈕
   }, function(){
       Fast.api.open("game/game/setTemplate", __('設置模板名稱'), {
           area:['400px', '200px']
       });
       Layer.closeAll('dialog');
   }, function(){
       Layer.closeAll('dialog');
   });*/
})

//按鈕應用 和 Layer.open 綁定時間控件
{field: 'operate', title: __('Operate'), table: table, events: {
   'click .btn-chooseone': function (e, value, row, index) {

      if (row.game_mode == 3 && row.play_mode == 0){

         var area = ['60%','80%'];
         Layer.open({
            content: Template("selectTimeTpl",[]),
            zIndex: 99,
            area: area,
            title: __('Begin_time'),
            resize: false,
            btn: [__('Confirm'), __('Close')],
            yes: function (index, layero) {

               let begin_time = $('#begin_time').val()

               if (!begin_time){
                  Toastr.error(__('Cannot be empty'));
                  return false
               }

               let templateJson = row.templateJson
               templateJson.begin_time = begin_time
               Fast.api.close({templateJson: templateJson});
               layer.closeAll();

            },
            btn2: function(index, layero){
               //按鈕【按鈕二】的回調
               layer.close(index)
               //return false //禁用該按鈕
            },
            success: function (layero, index) {
               //綁定時間控件
               Form.events.datetimepicker($("form"));
            }
         });
      }else{
         let content = __('Confirm Use Template?');
         Layer.confirm(content, {
            btn: [__('OK'),__('Cancel')] //按鈕
         }, function(){
            Fast.api.close({templateJson: row.templateJson});
            Layer.closeAll('dialog');
         }, function(){
            Layer.closeAll('dialog');
         });
      }


   },
}, formatter: function () {
   return '<a href="javascript:;" class="btn btn-danger btn-chooseone btn-xs"><i class="fa fa-check"></i> ' + __('Use Template') + '</a>';
},
},

模板遍歷對象字典#

<script id="catJsonTpl" type="text/html">
    <div class="showTpl wrap">
        <%for (var key in data) {%>
        <div class="col-4"><%=key%>:<%=data[key]%></div>
        <%}%>
    </div>
</script>

時間控件 autocomplete off 全局和局部設置#

//在public/assets/js/require-form.js 設置 $(this).attr('autocomplete','off'); 並重新壓縮js
$(".datetimerange", form).each(function () {
   $(this).attr('autocomplete','off');
   var callback = typeof $(this).data('callback') == 'function' ? $(this).data('callback') : origincallback;
   $(this).on('apply.daterangepicker', function (ev, picker) {
      callback.call(picker, picker.startDate, picker.endDate);
   });
   $(this).on('cancel.daterangepicker', function (ev, picker) {
      $(this).val('').trigger('blur');
   });
   $(this).daterangepicker($.extend(true, options, $(this).data()), callback);
});

//在當前控制器js設置
table.on('post-body.bs.table',function (e,settings,json,xhr) {
   $('.datetimerange').each(function () {
      $(this).attr('autocomplete','off')
   })
});

// 生成的 input
/extend/fast/Form.php 裡，找到 public function input 裡的 return 自已加上。然後重新生成一下
// 搜索框 form
如果是查看頁頂部的搜索，那是在
public/assets/js/bootstrap-table-commonsearch.js 這個文件裡改。差不多在 54 行左右。在 FORM 裡加上就行了

input data-rule 控制生效失效#


//過濾中文和空格
$("input[name='row[utr]']").attr('data-rule','required;filter(\u0391-\uFFE5\\s)')

//過濾非大小寫字母和數字
$("input[name='row[backu]']").attr('data-rule',"required;filter(^A-Za-z0-9)")

//通過js 控制data-rule 生效失效
$("input[name='row[type]']").on("click",function(){

    var menu_li = $(this).val();

    if(menu_li==0){
        $("#rechargeShow").show();
        $("#withdrawShow").hide();
        $("select[name='row[channelID]']").attr('data-rule','required')
        $("select[name='row[channelID]']").attr('disabled',false)
        $("input[name='row[utr]']").attr('data-rule','required;filter(\u0391-\uFFE5\\s)')
        $("input[name='row[utr]']").attr('disabled',false)
        $("input[name='row[usdtAccount]']").attr('disabled','disabled')
        $("input[name='row[usdtAccount]']").remove('data-rule')
    }
    else{
        $("#rechargeShow").hide();
        $("#withdrawShow").show();
        $("select[name='row[channelID]']").attr('disabled','disabled')
        $("select[name='row[channelID]']").remove('data-rule')
        $("input[name='row[utr]']").attr('disabled','disabled')
        $("input[name='row[utr]']").remove('data-rule')
        $("input[name='row[usdtAccount]']").attr('data-rule','required;filter(\u0391-\uFFE5\\s)')
        $("input[name='row[usdtAccount]']").attr('disabled',false)
    }
})

selectpage 聯動查詢#

selectpage 動態下拉組件的參數 data-params（自定義擴展參數）可以進行搜索篩選過濾
類型下面的代碼監聽 $("#c-type") 的 selectpage 動態傳參

$("#c-name").data("params", function (obj) {
    return {custom: {type: $("#c-type").val()}};
});

selectpage 示例，（多字段搜索等）#

額外參數 data-params='{"custom [status]":["notin",0]}'
自定義顯示 data-field="name" data-format-item="{id} | {name}"
多字段搜索 data-andOr="OR" data-search-field="id,name"


<input id="c-channel" data-source="channel/index" data-params='{"custom[status]":["notin",0]}' data-order-by="id" data-andOr="OR" data-search-field="id,name" data-primary-key="id" data-field="name" data-format-item="{id} | {name}" class="form-control selectpage" name="row[channel]" type="text">

自定義搜索的時間區間控件選擇時分秒#

require-form.js 找到 daterangepicker 修改 options 的 timePicker: true
關閉調試模式需要修改 require-backend.min.js 或重新壓縮 php think min -m backend -r all

var options = {
    timePicker: true,
    autoUpdateInput: false,
    timePickerSeconds: true,
    timePicker24Hour: true,
    autoApply: true,
    locale: {
        format: 'YYYY-MM-DD HH:mm:ss',
        customRangeLabel: __("Custom Range"),
        applyLabel: __("Apply"),
        cancelLabel: __("Clear"),
    },
    ranges: ranges,
};

觸發表格刷新#

$(".btn-refresh").trigger("click")

FastAdmin 個人記錄 - js、控件應用示例

控制台中統計圖加載變形#

控制器方法請求事件#

Layer.open 和 Layer.confirm#

模板 遍歷對象字典#

時間控件 autocomplete off 全局和局部設置#

input data-rule 控制生效失效#

selectpage 聯動查詢#

selectpage 示例，（多字段搜索等）#

自定義搜索的時間區間控件選擇時分秒#

觸發表格刷新#

模板遍歷對象字典#