Ag-grid cell渲染器，滑块不工作

Question

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

这是一个工作示例链接。 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

基本上我所做的只是返回cellrenderer中的html和我添加的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");
      }
    });
  },

Answer 2

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

首先，你混合了cellRenderer和cellEditor功能。

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

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

因此，如果您尝试从cellRenderer获取更新的单元格值，则无法成功实现。

您可以使用ag-grid settings通过单击或其他按键激活编辑模式，甚至可以将cellRenderer与悬停逻辑组合以实现即时编辑模式激活。

顺便说一句，这就是slider应该以正确的方式初始化的方式：

我相信你已经提到（从上面的链接）你如何创建自己的cellRenderer或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();
};

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

Demo

在this示例中，您可以了解如何使用启用的编辑模式创建组件，而无需单击\双击