您是否曾经在Handsontable中制作过复选框列?
我尝试使用各种方法来做到这一点,但它不起作用。
当用户单击标题上的复选框时,会检查列中的所有行。
谢谢你的帮助。
您是否曾经在Handsontable中制作过复选框列?
我尝试使用各种方法来做到这一点,但它不起作用。
当用户单击标题上的复选框时,会检查列中的所有行。
谢谢你的帮助。
您可以通过简单地将列类型选项设置为“复选框”来创建复选框列。
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"]
}
]
});
有关更多详细信息,请参阅此示例
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;
}
这是您正在寻找的示例
希望这对您有所帮助。
Handsontable 文档中现在有一个复选框教程。