在 Handsontable 中添加复选框列答案

【问题标题】：Add a checkbox column in Handsontable在 Handsontable 中添加复选框列
【发布时间】：2013-04-30 01:27:02
【问题描述】：

您是否曾经在 Handsontable 中制作过复选框列？

我尝试使用各种方法来做到这一点，但它不起作用。

当用户点击标题上的复选框时，列中的所有行都被选中。

感谢您的帮助。

【问题讨论】：

你解决了这个问题？我也有。

标签： checkbox header handsontable

【解决方案1】：

您可以通过简单地将列类型选项设置为“复选框”来创建复选框列。

var $container = $("#example1");
$container.handsontable({
  data: data,
  startRows: 5,
  colHeaders: true,
  minSpareRows: 1,
  columns: [
    {data: "id", type: 'text'},
    //'text' is default, you don't actually have to declare it
    {data: "isActive", type: 'checkbox'},
    {data: "date", type: 'date'},
    {data: "color",
      type: 'autocomplete',
      source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
    }
  ]
});

更多详情见this example

【讨论】：

【解决方案2】：

Handsontable 文档中现在有一个checkbox tutorial。

【讨论】：

【解决方案3】：

HTML：

<div id="example2" class="handsontable"></div>

Javascript：

var myData = [{
    name: "Marcin",
    active: true
}, {
    name: "Jude",
    active: false
}, {
    name: "Zylbert",
    active: false
}, {
    name: "Henry",
    active: false
}]

var $container = $("#example2");
$container.handsontable({
    data: myData,
    rowHeaders: true,
    columns: [{
        data: 'name'
    }, {
        type: 'checkbox',
        data: 'active'
    }],
    colHeaders: function (col) {
        switch (col) {
            case 0:
                return "<b>Bold</b> and <em>Beautiful</em>";

            case 1:
                var txt = "<input type='checkbox' class='checker' ";
                txt += isChecked() ? 'checked="checked"' : '';
                txt += "> Select all";
                return txt;
        }
    }
});

$container.on('mouseup', 'input.checker', function (event) {
    var current = !$('input.checker').is(':checked'); //returns boolean
        for (var i = 0, ilen = myData.length; i < ilen; i++) {
            myData[i].active = current;
        }
    $container.handsontable('render');
});

function isChecked() {
    for (var i = 0, ilen = myData.length; i < ilen; i++) {
        if (!myData[i].active) {
            return false;
        }
    }
    return true;
}

这是您要查找的示例

http://jsfiddle.net/yr2up2w5/

希望对你有所帮助。

【讨论】：