#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
функции.
На этом примере вы можете узнать, как создать компонент с включенным режимом редактирования без одиночного двойного щелчка