主页 / 问题 / 1331975
Accepted
Алексей Шиманский
Asked:2022-09-25 16:25:24 +0800 CST2022-09-25 16:25:24 +0800 CST

为什么将变量放在 pjax 后面会影响 DatePicker？

  • 772

有一个简单的代码：

Pjax::begin(['id' => "test-grid-pjax", 'enablePushState' => false, 'enableReplaceState' => false]);

echo GridView::widget([
    'id' => "test-grid",
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $columns,
]);

Pjax::end();

并且有列的定义。它们被放置在一个变量中：

$columns = [
    'id',
    [
        'attribute' => 'start_guarantee_period',
        'value' => function ($model) {
            return $model->start_guarantee_period;
        },
        'filter' => kartik\date\DatePicker::widget(['value' => $searchModel->start_guarantee_period, 'name' => 'ItemSearch[start_guarantee_period]', 'pluginOptions' => [
                'format' => 'dd.mm.yyyy',
                'todayHighlight' => true
            ],
        ]),
    ],
];

DatePicker从 kartik 使用，即这个 有DatePicker日期选择器和重置图标。

  • 如果变量的初始化$columns放在Pjax中，即 在标签之后Pjax::begin，您可以点击日期图标，选择一个日期，数据将被过滤。然后再次单击，选择日期，过滤掉等。
  • 如果变量的初始化$columns放在Pjax后面，即 在标签之前Pjax::begin，您只能选择第一次的日期。重新加载表格后，单击图标不会触发任何事件。刚死。

是的，JS 在内容重新加载后脱落。是的，您可以通过将$columns其放置在标签内Pjax或重新加载表格后，执行 js 代码$('#w0-kvdate').kvDatepicker(window.kvDatepicker_33d8ead7);重新启动选取器来修复它。

主要问题是：为什么会发生这种魔术？为什么服务器上上述特定PHP代码中变量的位置会以某种方式影响JS的行为？我知道如果有一个echo变量，它会在JSpjax中挂起监听器后缓冲这个输出和输出。但在这里它只是改变了变量定义的位置。它如何影响？为什么它停止工作？

php

1 个回答

  1. Best Answer

    一切都非常简单。当你取出Columnsfor pjax，然后也连接在里面DatePicker，那么所有loadable for它的工作都会在js-скрипты连接之前</body>。

    <html>
<head>
..тут подключаются .css
</head>
<body>

<script src=""></script>
</body>
</html>

    并且css-селекторы它们都注册在特定的类中。

    var initDPRemove = function () {
}, initDPAddon = function () {
};
(function ($) {
    "use strict";
    $.fn.kvDatepicker = $.fn.datepicker.noConflict();
    initDPRemove = function (id, range) {
        var $id = $('#' + id), $el = $id.parent(), $input;
        $el.find('.kv-date-remove').on('click.kvdatepicker', function () {
            if (range) {
                $el.find('input[type="text"]').each(function () {
                    $(this).kvDatepicker('clearDates').trigger('change');
                });
            } else {
                $el.kvDatepicker('clearDates');
                $input = $el.is('input') ? $el : $el.find('input[type="text"]');
                $input.trigger('change');
            }
        });
    };
    initDPAddon = function (id) {
        var $id = $('#' + id), $el = $id.parent(),
            pickers = '.input-group-addon:not(.kv-date-picker):not(.kv-date-remove)' +
                ',.input-group-text:not(.kv-date-picker):not(.kv-date-remove)';
        $el.find(pickers).each(function () {
            var $addon = $(this);
            $addon.on('click.kvdatepicker', function () {
                $el.kvDatepicker('hide');
            });
        });
        $el.find('.input-group-addon.kv-date-picker').on('click.kvdatepicker', function () {
            $id.focus();
        });
    };
})(window.jQuery);

    正如您自己所写的那样-在pjax一切正常之后，bind这些类将消失，因为它们实际上将从 . 消失DOM，然后它们将再次添加到那里，但没有bind. 但是如果你Columns在初始化之后插入，Pjax那么在每次加载内容后，它的操作所需要的一切js-скрипты都会重新连接，pjax因为<script scr="></script>它会在 -container 中注册，因此，将再次调用pjax初始化，并且所有的类都在-script 将再次挂起。datepickerjsbind

    所以要么你仍然把它转移到$columns里面pjax- 要么kartik重写 -ovsky json :)bindbody

    $('body').on('click', '...', function(){
});
    • 2

相关问题