checkbox - 在 Handsontable 中添加复选框列

Question

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

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

当用户单击标题上的复选框时，会检查列中的所有行。

谢谢你的帮助。

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

有关更多详细信息，请参阅此示例

Answer 2

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/

希望这对您有所帮助。

Answer 3

Handsontable 文档中现在有一个复选框教程。