修复树形表格子级行选择器选中后无法触发批量操作按钮问题

resources/assets/dcat/js/Dcat.js

@@ -113,7 +113,6 @@ export default class Dcat {
             };
 
         $document.one('pjax:complete', clear);
-        $document.one('init:off', clear);
 
         clear();
 
@@ -138,8 +137,19 @@ export default class Dcat {
         });
     }
 
-    offInit() {
-        $(document).trigger('init:off')
+    /**
+     * 清理注册过的init回调.
+     *
+     * @param selector
+     */
+    offInit(selector) {
+        if (initialized[selector]) {
+            initialized[selector].disconnect();
+        }
+
+        $(document).trigger('init:off', selector, initialized[selector])
+
+        initialized[selector] = null;
     }
 
     /**

resources/assets/dcat/js/extensions/RowSelector.js

@@ -1,108 +1,108 @@
-
-export default class RowSelector {
-    constructor(options) {
-        let _this = this;
-
-        _this.options = $.extend({
-            // checkbox css选择器
-            checkboxSelector: '',
-            // 全选checkbox css选择器
-            selectAllSelector: '',
-            // 选中效果颜色
-            background: 'rgba(255, 255,213,0.4)',
-            // 点击行事件
-            clickRow: false,
-            // 表格选择器
-            container: 'table',
-        }, options);
-
-        _this.init()
-    }
-
-    init() {
-        let options = this.options,
-            checkboxSelector = options.checkboxSelector,
-            $document = $(document),
-            selectAll = options.selectAllSelector;
-
-        $(selectAll).on('change', function() {
-            let checked = this.checked;
-
-            $.each($(this).parents(options.container).find(checkboxSelector), function (_, checkbox) {
-                let $this = $(checkbox);
-
-                if (! $this.attr('disabled')) {
-                    $this.prop('checked', checked).trigger('change');
-                }
-            });
-        });
-        if (options.clickRow) {
-            $document.off('click', checkboxSelector).on('click', checkboxSelector, function (e) {
-                if (typeof e.cancelBubble != "undefined") {
-                    e.cancelBubble = true;
-                }
-                if (typeof e.stopPropagation != "undefined") {
-                    e.stopPropagation();
-                }
-            });
-
-            $document.off('click', options.container+' tr').on('click', options.container+' tr', function () {
-                $(this).find(checkboxSelector).click();
-            });
-        }
-
-        $document.off('change', checkboxSelector).on('change', checkboxSelector, function () {
-            var tr = $(this).closest('tr');
-            if (this.checked) {
-                tr.css('background-color', options.background);
-
-                if ($(checkboxSelector + ':checked').length === $(checkboxSelector).length) {
-                    $(selectAll).prop('checked', true)
-                }
-            } else {
-                tr.css('background-color', '');
-            }
-        });
-    }
-
-    /**
-     * 获取选中的主键数组
-     *
-     * @returns {Array}
-     */
-    getSelectedKeys() {
-        let selected = [];
-
-        $(this.options.checkboxSelector+':checked').each(function() {
-            var id = $(this).data('id');
-            if (selected.indexOf(id) === -1) {
-                selected.push(id);
-            }
-        });
-
-        return selected;
-    }
-
-    /**
-     * 获取选中的行数组
-     *
-     * @returns {Array}
-     */
-    getSelectedRows() {
-        let selected = [];
-
-        $(this.options.checkboxSelector+':checked').each(function() {
-            var id = $(this).data('id'), i, exist;
-
-            for (i in selected) {
-                if (selected[i].id === id) {
-                    exist = true
-                }
-            }
-
-            exist || selected.push({'id': id, 'label': $(this).data('label')})
-        });
-
-        return selected;
-    }
-}
+
+export default class RowSelector {
+    constructor(options) {
+        let _this = this;
+
+        _this.options = $.extend({
+            // checkbox css选择器
+            checkboxSelector: '',
+            // 全选checkbox css选择器
+            selectAllSelector: '',
+            // 选中效果颜色
+            background: 'rgba(255, 255,213,0.4)',
+            // 点击行事件
+            clickRow: false,
+            // 表格选择器
+            container: 'table',
+        }, options);
+
+        _this.init()
+    }
+
+    init() {
+        let options = this.options,
+            checkboxSelector = options.checkboxSelector,
+            $document = $(document),
+            selectAll = options.selectAllSelector;
+
+        $(selectAll).on('change', function() {
+            let checked = this.checked;
+
+            $.each($(this).parents(options.container).find(checkboxSelector), function (_, checkbox) {
+                let $this = $(checkbox);
+
+                if (! $this.attr('disabled')) {
+                    $this.prop('checked', checked).trigger('change');
+                }
+            });
+        });
+        if (options.clickRow) {
+            $document.off('click', checkboxSelector).on('click', checkboxSelector, function (e) {
+                if (typeof e.cancelBubble != "undefined") {
+                    e.cancelBubble = true;
+                }
+                if (typeof e.stopPropagation != "undefined") {
+                    e.stopPropagation();
+                }
+            });
+
+            $document.off('click', options.container+' tr').on('click', options.container+' tr', function () {
+                $(this).find(checkboxSelector).click();
+            });
+        }
+
+        $document.off('change', checkboxSelector).on('change', checkboxSelector, function () {
+            var tr = $(this).closest('tr');
+            if (this.checked) {
+                tr.css('background-color', options.background);
+
+                if ($(checkboxSelector + ':checked').length === $(checkboxSelector).length) {
+                    $(selectAll).prop('checked', true)
+                }
+            } else {
+                tr.css('background-color', '');
+            }
+        });
+    }
+
+    /**
+     * 获取选中的主键数组
+     *
+     * @returns {Array}
+     */
+    getSelectedKeys() {
+        let selected = [];
+
+        $(this.options.checkboxSelector+':checked').each(function() {
+            var id = $(this).data('id');
+            if (selected.indexOf(id) === -1) {
+                selected.push(id);
+            }
+        });
+
+        return selected;
+    }
+
+    /**
+     * 获取选中的行数组
+     *
+     * @returns {Array}
+     */
+    getSelectedRows() {
+        let selected = [];
+
+        $(this.options.checkboxSelector+':checked').each(function() {
+            var id = $(this).data('id'), i, exist;
+
+            for (i in selected) {
+                if (selected[i].id === id) {
+                    exist = true
+                }
+            }
+
+            exist || selected.push({'id': id, 'label': $(this).data('label')})
+        });
+
+        return selected;
+    }
+}

resources/views/grid/batch-actions.blade.php

@@ -16,15 +16,18 @@
 @endif
 
 <script>
-$(document).off('change', '.{{ $parent->getRowName() }}-checkbox').on('change', '.{{ $parent->getRowName() }}-checkbox', function () {
-    var btn = $('.{{ $selectAllName }}-btn'), selected = Dcat.grid.selectedRows('{{ $parent->getName() }}').length;
-    if (selected) {
-        btn.show()
-    } else {
-        btn.hide()
-    }
-    setTimeout(function () {
-        btn.find('.selected').html("{!! trans('admin.grid_items_selected') !!}".replace('{n}', selected));
-    }, 50)
-});
-</script>
+Dcat.init('.{{ $parent->getRowName() }}-checkbox', function ($this) {
+    $this.on('change', function () {
+        var btn = $('.{{ $selectAllName }}-btn'), selected = Dcat.grid.selectedRows('{{ $parent->getName() }}').length;
+
+        if (selected) {
+            btn.show()
+        } else {
+            btn.hide()
+        }
+        setTimeout(function () {
+            btn.find('.selected').html("{!! trans('admin.grid_items_selected') !!}".replace('{n}', selected));
+        }, 50)
+    })
+})
+</script>