Не работает средство визуализации ячеек Ag-grid со слайдером

#javascript #ag-grid

#javascript #ag-grid

Вопрос:

Я использую Ag-grid с собственным JavaScript. Я пытаюсь заставить работать слайдер в ячейке. Я реализовал средство визуализации ячеек и использовал внутри него ползунок jQuery. Однако ползунок не перемещается. Я пытался остановить распространение события с неудачными результатами. Приветствуется любая помощь.

Вот ссылка на рабочий пример. https://jsbin.com/netavepeme/1/edit?html , js, консоль, вывод

   cellRenderer: function(params) {
    var sUI = "<div class='slider' style='margin:5px'></div>";

    // create jQuery slider
    var sliderObj = $(sUI).slider({
      min: 1,
      max: 5,
      step: 1, 
      value: params.data.val,
      slide: function(event, ui) {
        console.log("slided");
      }, 
      stop: function(event, ui) {
        console.log("stopped");
      }
    });

    return $(sliderObj).prop("outerHTML");

  }
  

Ответ №1:

У меня получилось

https://jsbin.com/coyakeluci/edit?html , js, консоль, вывод

Итак, в основном, что я сделал, это просто вернул html-код внутри cellrenderer, и добавленное мной событие onGridReady инициализировало плагин. Я также удалил ваши события, которые вы добавили, которые также препятствуют скольжению.

   cellRenderer: function(params) {      
    return "<div class='slider' style='margin:5px'></div>";
  }


  onGridReady: function(event) {   
    $(".slider").slider({
      min: 1,
      max: 5,
      step: 1,       
      slide: function(event, ui) {
        console.log("slided");
      }, 
      stop: function(event, ui) {
        console.log("stopped");
      }
    });
  },
  

Комментарии:

1. Спасибо за ответ. Хотя ваш подход работает, я бы предпочел инициализировать слайдеры в средстве визуализации ячеек. Знаете ли вы, почему слайдер не работает при инициализации внутри средства визуализации ячеек?

2. вы должны сделать это в ongridready, потому что таким образом плагин jquery найдет html. Другого способа обойти это нет

Ответ №2:

На самом деле, существующий ответ не полностью правильный

Прежде всего, вы смешали cellRenderer и cellEditor функциональность.

cellRenderer — используется для РЕНДЕРИНГА (для отображения информации о ячейке, а не для редактирования)

cellEditor — используется для РЕДАКТИРОВАНИЯ (что означает, что компонент editor будет доступен только при активации режима редактирования)

Поэтому, если вы попытаетесь получить обновленное значение ячейки из cellRenderer , это не будет успешно достигнуто.

Вы можете поиграть с настройками ag-grid, чтобы активировать режим редактирования одним щелчком мыши или дополнительным нажатием клавиши или даже комбинировать cellRenderer с логикой наведения курсора мыши для достижения мгновенной активации режима редактирования.

Кстати, вот как slider должно быть правильно инициализировано:

Я полагаю, что вы уже упоминали (по ссылкам выше), как вы можете создать свой собственный cellRenderer or cellEditor (в javascript), поэтому я замечу только об slider инициализации.

Вы должны определить, что прикреплено slider после Gui :

 afterGuiAttached = function() {
    $(this.container).slider({
      min: 1,
      max: 5,
      step: 1,
      value:this.resultValue,
      slide: (event, ui)=> {
          this.resultValue = ui.value;
          console.log("slided", ui.value);
      }, 
      stop: (event, ui) => {
          console.log("stopped", ui.value);
          this.params.stopEditing();
      }
    });
    this.container.focus();
};
  

А также get amp; set value внутри slide функции.

Demo

На этом примере вы можете узнать, как создать компонент с включенным режимом редактирования без одиночного двойного щелчка