Question

我正在将Ag-grid与本机JavaScript一起使用。我正在尝试在一个单元格中使用一个滑块来工作。我已经实现了单元格渲染器，并在其中使用了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和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和cellEditor功能。

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

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

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

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

顺便说一下，slider的初始化方法是正确的：

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

您必须在附加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。

Demo

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

带有滑块的Ag-grid单元格渲染器不起作用

2 个答案: