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);
});

コントローラーメソッドリクエストイベント#

//送信前確認ボックス 方法1
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;
});

//送信成功ロジック 開始 (ロジック参照: ウィンドウを閉じて、情報ボックスを表示し、確認ボックスが閉じた後にページをリフレッシュ)
Fast.api.close(1); // ウィンドウを閉じてデータを返す
let _p = parent
parent.Layer.alert(data,{closeBtn: false},()=>{
    _p.location.reload ();// ここで親ページをリフレッシュ、他のコードに変更可能
    _p.Layer.closeAll('dialog');
})
return false;
//送信成功ロジック 終了

//送信前確認ボックス 方法2（廃止、参考用）
$("#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 = __('テンプレートを使用しますか？');
         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")