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

有关详细信息，请参阅this example

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文档中现在有checkbox tutorial。

在Handsontable中添加一个复选框列

3 个答案: