pjax events

resources/assets/dcat/js/Dcat.js

@@ -11,23 +11,66 @@ export default class Dcat {
         this.withConfig(config);
     }
 
-    booting(callback) {
-        bootingCallbacks.push(callback);
+    /**
+     * 初始化事件监听方法
+     *
+     * @param callback
+     * @param once
+     * @returns {Dcat}
+     */
+    booting(callback, once) {
+        once = once === undefined ? true : once;
+
+        bootingCallbacks.push([callback, once]);
 
         return this
     }
 
+    /**
+     * 初始化事件监听方法，每个请求都会触发
+     *
+     * @param callback
+     * @returns {Dcat}
+     */
+    bootingEveryRequest(callback) {
+        return this.booting(callback, false)
+    }
+
+    /**
+     * 初始化
+     */
     boot() {
-        bootingCallbacks.forEach(callback => callback(this));
-        bootingCallbacks = []
+        let _this = this,
+            callbacks = bootingCallbacks;
+
+        bootingCallbacks = [];
+
+        callbacks.forEach(data => {
+            data[0](this);
+
+            if (data[1] === false) {
+                bootingCallbacks.push(data)
+            }
+        });
+
+        // 脚本加载完毕后重新触发
+        _this.onPjaxLoaded(_this.boot.bind(this))
     }
 
+    /**
+     * 监听所有js脚本加载完毕事件，需要用此方法代替 $.ready 方法
+     * 此方法允许在iframe中监听父窗口的事件
+     *
+     * @param callback
+     * @param _window
+     * @returns {*|jQuery|*|jQuery.fn.init|jQuery|HTMLElement}
+     */
     ready(callback, _window) {
         if (! _window || _window === window) {
             if (! pjaxResponded) {
                 return $(callback);
             }
-            return $(document).one('pjax:loaded', callback);
+            return this.onPjaxLoaded(callback);
         }
 
         var proxy = function (e) {
@@ -39,6 +82,66 @@ export default class Dcat {
         _window.Dcat.ready(proxy);
     }
 
+    /**
+     * 如果是 pjax 响应的页面，需要调用此方法
+     *
+     * @returns {Dcat}
+     */
+    pjaxResponded() {
+        pjaxResponded = true;
+
+        return this
+    }
+
+    /**
+     * 使用pjax重载页面
+     *
+     * @param url
+     */
+    reload(url) {
+        let container = this.config.pjax_container_selector;
+        let opt = {container: container};
+
+        url && (opt.url = url);
+
+        $.pjax.reload(opt);
+    }
+
+    /**
+     * 监听pjax加载js脚本完毕事件方法，此事件在 pjax:complete 事件之后触发
+     *
+     * @param callback
+     * @param once 默认true
+     *
+     * @returns {*|jQuery}
+     */
+    onPjaxLoaded(callback, once) {
+        once = once === undefined ? true : once;
+
+        if (once) {
+            return $(document).one('pjax:loaded', callback);
+        }
+
+        return $(document).on('pjax:loaded', callback);
+    }
+
+    /**
+     * 监听pjax加载完毕完毕事件方法
+     *
+     * @param callback
+     * @param once 默认true
+     * @returns {*|jQuery}
+     */
+    onPjaxComplete(callback, once) {
+        once = once === undefined ? true : once;
+
+        if (once) {
+            return $(document).one('pjax:complete', callback);
+        }
+
+        return $(document).on('pjax:complete', callback);
+    }
+
     withConfig(config) {
         this.config = $.extend(defaultOptions, config);
         this.withLang(config.lang);
@@ -61,24 +164,4 @@ export default class Dcat {
 
         return this
     }
-
-    /**
-     * 如果是 pjax 响应的页面，需要调用此方法
-     *
-     * @returns {Dcat}
-     */
-    pjaxResponded() {
-        pjaxResponded = true;
-
-        return this
-    }
-
-    reload(url) {
-        let container = this.config.pjax_container_selector;
-        let opt = {container: container};
-
-        url && (opt.url = url);
-
-        $.pjax.reload(opt);
-    }
 }

resources/assets/dcat/js/bootstrappers/Pjax.js

@@ -53,10 +53,5 @@ export default class Pjax {
             }
             Dcat.NP.done();
         });
-
-        // 新页面加载，重新初始化
-        $d.on('pjax:loaded', function () {
-            _this.boot(Dcat)
-        });
     }
 }

resources/assets/dcat/js/dcat-app.js

@@ -61,13 +61,12 @@ function extend (Dcat) {
 
 // 初始化
 function listen(Dcat) {
-    Dcat.booting(function () {
+    // 只初始化一次
+    Dcat.booting(() => {
         // 菜单点击选中效果
         new Menu(Dcat);
         // 返回顶部按钮
         new Footer(Dcat);
-        // pjax初始化功能
-        new Pjax(Dcat);
 
         // layer弹窗设置
         layer.config({maxmin: true, moveOut: true, shade: false});
@@ -80,6 +79,13 @@ function listen(Dcat) {
 
         Dcat.NP.configure({parent: '.app-content'});
     });
+
+    // 每个请求都初始化
+    Dcat.bootingEveryRequest(() => {
+        // pjax初始化功能
+        new Pjax(Dcat);
+
+    });
 }
 
 // 开始初始化
@@ -87,7 +93,7 @@ function boot(Dcat) {
     extend(Dcat);
     listen(Dcat);
 
-    $(Dcat.boot);
+    $(Dcat.boot.bind(Dcat));
 
     return Dcat;
 }

resources/assets/dcat/sass/components/_table.scss

@@ -37,8 +37,9 @@ table.data-list-view.dataTable tbody tr:hover, table.data-thumb-view.dataTable t
 // 快捷搜索
 .data-list-view-header .table-responsive .top .dataTables_filter .form-control, .data-thumb-view-header .table-responsive .top .dataTables_filter .form-control {
   padding: 1.23rem 2.8rem !important;
-  border-radius: 1.428rem;
-  border: 1px solid #dae1e7;
+  border-radius: 1.4rem;
+  border: 0;
+  box-shadow: $shadow;
 }
 
 .data-list-view-header .table-responsive .top .dataTables_filter label:after, .data-thumb-view-header .table-responsive .top .dataTables_filter label:after {
@@ -47,11 +48,6 @@ table.data-list-view.dataTable tbody tr:hover, table.data-thumb-view.dataTable t
   left: 1.2rem;
 }
 
-.data-list-view-header .table-responsive .top .dataTables_filter .form-control, .data-thumb-view-header .table-responsive .top .dataTables_filter .form-control {
-  border: 0;
-  box-shadow: $shadow;
-}
-
 .quick-search-clear {
   margin-left:-1.45rem;
   position: relative;

resources/dist/dcat/css/app.css

@@ -1886,8 +1886,9 @@ table.data-thumb-view.dataTable tbody tr:hover {
 .data-list-view-header .table-responsive .top .dataTables_filter .form-control,
 .data-thumb-view-header .table-responsive .top .dataTables_filter .form-control {
   padding: 1.23rem 2.8rem !important;
-  border-radius: 1.428rem;
-  border: 1px solid #dae1e7;
+  border-radius: 1.4rem;
+  border: 0;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
 }
 
 .data-list-view-header .table-responsive .top .dataTables_filter label:after,
@@ -1897,12 +1898,6 @@ table.data-thumb-view.dataTable tbody tr:hover {
   left: 1.2rem;
 }
 
-.data-list-view-header .table-responsive .top .dataTables_filter .form-control,
-.data-thumb-view-header .table-responsive .top .dataTables_filter .form-control {
-  border: 0;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
-}
-
 .quick-search-clear {
   margin-left: -1.45rem;
   position: relative;

resources/dist/dcat/js/app.js

@@ -115,23 +115,66 @@ var Dcat = /*#__PURE__*/function () {
 
     this.withConfig(config);
   }
+  /**
+   * 初始化事件监听方法
+   *
+   * @param callback
+   * @param once
+   * @returns {Dcat}
+   */
+
 
   _createClass(Dcat, [{
     key: "booting",
-    value: function booting(callback) {
-      bootingCallbacks.push(callback);
+    value: function booting(callback, once) {
+      once = once === undefined ? true : once;
+      bootingCallbacks.push([callback, once]);
       return this;
     }
+    /**
+     * 初始化事件监听方法，每个请求都会触发
+     *
+     * @param callback
+     * @returns {Dcat}
+     */
+
+  }, {
+    key: "bootingEveryRequest",
+    value: function bootingEveryRequest(callback) {
+      return this.booting(callback, false);
+    }
+    /**
+     * 初始化
+     */
+
   }, {
     key: "boot",
     value: function boot() {
-      var _this = this;
+      var _this2 = this;
+
+      var _this = this,
+          callbacks = bootingCallbacks;
 
-      bootingCallbacks.forEach(function (callback) {
-        return callback(_this);
-      });
       bootingCallbacks = [];
+      callbacks.forEach(function (data) {
+        data[0](_this2);
+
+        if (data[1] === false) {
+          bootingCallbacks.push(data);
+        }
+      }); // 脚本加载完毕后重新触发
+
+      _this.onPjaxLoaded(_this.boot.bind(this));
     }
+    /**
+     * 监听所有js脚本加载完毕事件，需要用此方法代替 $.ready 方法
+     * 此方法允许在iframe中监听父窗口的事件
+     *
+     * @param callback
+     * @param _window
+     * @returns {*|jQuery|*|jQuery.fn.init|jQuery|HTMLElement}
+     */
+
   }, {
     key: "ready",
     value: function ready(callback, _window) {
@@ -140,7 +183,7 @@ var Dcat = /*#__PURE__*/function () {
           return $(callback);
         }
 
-        return $(document).one('pjax:loaded', callback);
+        return this.onPjaxLoaded(callback);
       }
 
       var proxy = function proxy(e) {
@@ -151,28 +194,6 @@ var Dcat = /*#__PURE__*/function () {
 
       _window.Dcat.ready(proxy);
     }
-  }, {
-    key: "withConfig",
-    value: function withConfig(config) {
-      this.config = $.extend(defaultOptions, config);
-      this.withLang(config.lang);
-      this.withToken(config.token);
-      delete config.lang;
-      delete config.token;
-      return this;
-    }
-  }, {
-    key: "withToken",
-    value: function withToken(token) {
-      token && (this.token = token);
-      return this;
-    }
-  }, {
-    key: "withLang",
-    value: function withLang(lang) {
-      lang && (this.lang = lang);
-      return this;
-    }
     /**
      * 如果是 pjax 响应的页面，需要调用此方法
      *
@@ -185,6 +206,12 @@ var Dcat = /*#__PURE__*/function () {
       _pjaxResponded = true;
       return this;
     }
+    /**
+     * 使用pjax重载页面
+     *
+     * @param url
+     */
+
   }, {
     key: "reload",
     value: function reload(url) {
@@ -195,6 +222,67 @@ var Dcat = /*#__PURE__*/function () {
       url && (opt.url = url);
       $.pjax.reload(opt);
     }
+    /**
+     * 监听pjax加载js脚本完毕事件方法，此事件在 pjax:complete 事件之后触发
+     *
+     * @param callback
+     * @param once 默认true
+     *
+     * @returns {*|jQuery}
+     */
+
+  }, {
+    key: "onPjaxLoaded",
+    value: function onPjaxLoaded(callback, once) {
+      once = once === undefined ? true : once;
+
+      if (once) {
+        return $(document).one('pjax:loaded', callback);
+      }
+
+      return $(document).on('pjax:loaded', callback);
+    }
+    /**
+     * 监听pjax加载完毕完毕事件方法
+     *
+     * @param callback
+     * @param once 默认true
+     * @returns {*|jQuery}
+     */
+
+  }, {
+    key: "onPjaxComplete",
+    value: function onPjaxComplete(callback, once) {
+      once = once === undefined ? true : once;
+
+      if (once) {
+        return $(document).one('pjax:complete', callback);
+      }
+
+      return $(document).on('pjax:complete', callback);
+    }
+  }, {
+    key: "withConfig",
+    value: function withConfig(config) {
+      this.config = $.extend(defaultOptions, config);
+      this.withLang(config.lang);
+      this.withToken(config.token);
+      delete config.lang;
+      delete config.token;
+      return this;
+    }
+  }, {
+    key: "withToken",
+    value: function withToken(token) {
+      token && (this.token = token);
+      return this;
+    }
+  }, {
+    key: "withLang",
+    value: function withLang(lang) {
+      lang && (this.lang = lang);
+      return this;
+    }
   }]);
 
   return Dcat;
@@ -377,10 +465,6 @@ var Pjax = /*#__PURE__*/function () {
         }
 
         Dcat.NP.done();
-      }); // 新页面加载，重新初始化
-
-      $d.on('pjax:loaded', function () {
-        _this.boot(Dcat);
       });
     }
   }]);
@@ -468,13 +552,12 @@ function extend(Dcat) {
 
 
 function listen(Dcat) {
+  // 只初始化一次
   Dcat.booting(function () {
     // 菜单点击选中效果
     new _bootstrappers_Menu__WEBPACK_IMPORTED_MODULE_10__["default"](Dcat); // 返回顶部按钮
 
-    new _bootstrappers_Footer__WEBPACK_IMPORTED_MODULE_11__["default"](Dcat); // pjax初始化功能
-
-    new _bootstrappers_Pjax__WEBPACK_IMPORTED_MODULE_12__["default"](Dcat); // layer弹窗设置
+    new _bootstrappers_Footer__WEBPACK_IMPORTED_MODULE_11__["default"](Dcat); // layer弹窗设置
 
     layer.config({
       maxmin: true,
@@ -489,6 +572,11 @@ function listen(Dcat) {
     Dcat.NP.configure({
       parent: '.app-content'
     });
+  }); // 每个请求都初始化
+
+  Dcat.bootingEveryRequest(function () {
+    // pjax初始化功能
+    new _bootstrappers_Pjax__WEBPACK_IMPORTED_MODULE_12__["default"](Dcat);
   });
 } // 开始初始化
 
@@ -496,7 +584,7 @@ function listen(Dcat) {
 function boot(Dcat) {
   extend(Dcat);
   listen(Dcat);
-  $(Dcat.boot);
+  $(Dcat.boot.bind(Dcat));
   return Dcat;
 }
 

resources/views/grid/quick-search.blade.php

@@ -1,6 +1,6 @@
 <style>::-ms-clear,::-ms-reveal{display: none;}</style>
 
-<form action="{!! $action !!}" class="input-no-border" pjax-container style="display:inline-block;">
+<form action="{!! $action !!}" class="input-no-border" pjax-container style="display:inline-block;margin-right: 16px">
     <div class="dataTables_filter">
         <label style="width: {{ $width }}rem">
             <input