【问题标题】:Slickgrid multiple checkbox columnsSlickgrid 多个复选框列
【发布时间】:2021-02-14 06:13:52
【问题描述】:

我希望在我的 slickgrid 中有多个复选框列,以及列的标题,并在选择该列时选择该列中的所有项目。

我在 slickgrid 示例中看到它似乎只用于没有标题的一列中。

我正在使用 VS 2019,在尝试构建一列并将其放入复选框列时,我显示错误下划线(预期)

 var checkboxSelector = new Slick.CheckboxSelectColumn({
          cssClass: "slick-cell-checkboxsel"
      });

          var columns = [

              { id: "JobCards", name: "Job Card", field: "JobCards", checkboxSelector.getColumnDefinition(), maxWidth: 35, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox },

              { id: "Enabled", name: "Enabled", field: "Enabled", checkboxSelector.getColumnDefinition(), maxWidth: 35, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox }

          ];

  var mygrid = new Slick.Grid("#GridAppUserList", AppUserRows, columns, sboptions);

  mygrid.registerPlugin(checkboxSelector);

如何创建可以选择该列中所有行的列(带有列标题)?

谢谢。

【问题讨论】:

    标签: slickgrid


    【解决方案1】:

    看起来没有办法使用预构建的复选框选择器来做你想做的事。它没有为标题和标题复选框设置。但是它应该很容易修改它来做你想做的事情。
    或者您可以尝试将您的列定义与其生成的列定义相结合:

    var checkboxSelector1 = new Slick.CheckboxSelectColumn({
      columnId: "JobCards",
      cssClass: "slick-cell-checkboxsel"
    });
    
    var col1 = checkboxSelector1.getColumnDefinition();
    col1.name = "Job Card " + col1.name; 
    col1.field = "JobCards";
    col1.maxWidth = 35;
    col1.formatter = Slick.Formatters.Checkmark;
    col1.editor = Slick.Editors.Checkbox;
    
    columns.push(col1);
    
    // and same for column 2 ....
    

    请注意,您上面的错误是因为您只是将 getColumnDefinition() 调用转储到对象中:

    , field: "JobCards", checkboxSelector.getColumnDefinition(), 
    

    要消除错误,您需要完成它

    , field: "JobCards", someOtherName: checkboxSelector.getColumnDefinition(), 
    

    但是您从 checkboxSelector 获得的列 def 将只是该列的另一个属性,这不是您想要的。

    【讨论】:

    • 谢谢,但很遗憾,这不起作用。它只是在标题列中添加了一个复选框,但没有列名。
    • 行得通,谢谢。我会说 var 末尾有一个虚假的 1,我还更改了 col1.name 的顺序以使其适合我。当我检查 columns 数组时,我还看到它写为 name... Job Card... 所以这也可能是这样做的一种方式。
    猜你喜欢
    • 1970-01-01
    • 2013-04-02
    • 2015-06-07
    • 2011-10-19
    • 2014-10-10
    • 1970-01-01
    • 1970-01-01
    • 2013-02-21
    • 2013-04-27
    相关资源
    最近更新 更多