带滑块的 Ag-grid 单元格渲染器不工作

Question

我正在使用原生 JavaScript 的 Ag-grid。我正在尝试让单元格中的滑块正常工作。我已经实现了单元格渲染器并在其中使用了 jQuery 滑块。但是，滑块没有移动。我尝试停止事件传播但结果不成功。任何帮助表示赞赏。

这是一个工作示例 link。 https://jsbin.com/netavepeme/1/edit?html,js,console,output

  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");

  }

Answer 1

我成功了

https://jsbin.com/coyakeluci/edit?html,js,console,output

所以基本上我所做的只是 return 我添加的 cellrenderer 和 onGridReady 事件中的 html 我初始化了插件。我还删除了您添加的防止它滑动的事件。

  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");
      }
    });
  },

Answer 2

实际上，现有答案并不完全正确

首先，您混合了 cellRenderer and cellEditor 功能。

cellRenderer - 用于 RENDERING（用于显示单元格信息，不用于编辑）

cellEditor - 用于 EDITING（这意味着，编辑器组件只有在激活编辑模式时才能访问）

So if you will try to get an updated cell value from cellRenderer it wouldn't be successfully achieved.

您可以玩和 ag-grid settings 通过单击或额外的按键激活编辑模式，甚至将 cellRenderer 与悬停逻辑结合起来实现即时编辑模式激活。

顺便说一句，slider 应该如何以正确的方式初始化：

我相信您已经提到（从上面的链接）如何创建您自己的 cellRenderer 或 cellEditor（在 javascript 中）所以，我只会注意到 slider 初始化。

您必须在附加 Gui 后定义 slider：

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();
};

并且还在 slide 函数中获取和设置 value。

Demo

在 this 示例中，您可以了解如何在不 single\double 单击

的情况下创建启用编辑模式的组件

带滑块的 Ag-grid 单元格渲染器不工作

Ag-grid cell renderer with slider not working

javascript

ag-grid