时间戳

首页 > 解决方案 > 向下滚动时，yii2 在下拉 div 中越来越多地显示通知

php - 向下滚动时，yii2 在下拉 div 中越来越多地显示通知

问题描述

我正在努力在 select2 kartik 小部件中获取通知，并且一切都运行良好，现在我正在尝试修改我的代码以在我的下拉 div 中获取我的数据，但我没有这样做的想法。

这是我要在视图中修改的代码

    <div class="dropdown-menu animated flipInX">

    <div class="dropdown-body niceScroll ">

     <!-- Start notification list -->
    <div class="media-list small">
     <a href="#" class="media">
     <?php
     $notificationUrl = Url::to(['site/notification-list']);

    echo Select2::widget([
      'name' => 'state_800',
    'pluginOptions' => [
             'ajax' => [
               'url' => $notificationUrl,
                      'dataType' => 'json',
  'data' => new JsExpression('function(params) { return {q:params.term, page:params.page || 1}; }')
                                                    ],
  'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
   'templateResult' => new JsExpression('function(product) {;return product.text; }'),
     'templateSelection' => new JsExpression('function (subject) { return subject.text; }'),
                       ],
      ]);
                     ?>
                      </a>
        </div> .......

我需要显示如下图所示的通知 在不使用 select2 小部件的情况下显示它们

这是我正在检索数据的操作；所以我的问题是如何在我的下拉 div 中显示它

public function actionNotificationList($page, $q = null, $id = null) {
        $offset = ($page - 1) * 10;

        Yii::$app->response->format = Response::FORMAT_JSON;
        $out = ['results' => ['id' => '', 'text' => '']];
        $query = new Query;
        $query->select(['notification_id as id', new Expression("notification_text AS text")])
                ->from('notification')
                ->offset($offset)
                ->limit(10);

        $command = $query->createCommand();
        $data = $command->queryAll();
        $out['results'] = array_values($data);
        $out['pagination'] = ['more' => !empty($data) ? true : false];
        return $out;
    }

提前致谢。

标签： phphtmljsonyii2infinite-scroll

解决方案

好吧，据我了解，您正在尝试动态更新 select2 中的选项，如果正确，您可以使用 javascript 来更新 select2 选项。

看起来您的通知来自某些数据库表，您可以发送 ajax 调用以检查是否有任何未读通知并将通知列表返回为 JSON 并Selec2在运行时更新选项。

我可以演示通过单击按钮，因为 ajax 无法在 SO 上实现，您可以click用您的 ajax 调用替换按钮并将通知传递给refreshDataSelect2将更新选项的函数。

$('.notifications').select2({
  placeholder: 'Select an option',
  'width': '100%'
});

$.fn.refreshDataSelect2 = function(data) {
  this.select2('data', data);
  // Update options
  var $select = $(this[0]);
  var options = data.map(function(item) {
    return '<option value="' + item.id + '">' + item.text + '</option>';
  });
  $select.append(options.join('')).change();
};

$("#add").on("click", function() {
  let data = [{
    id: $('.notifications').children('option').length + 1,
    text: "A New Message number " + $('.notifications').children('option').length
  }]
  $(".notifications").refreshDataSelect2(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />

<select name="notifications" class="notifications">
  <option>some Message</option>
  <option>Admin Message</option>
  <option>Private Message</option>
</select>
<button id="add">Add Message</button>

推荐阅读