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

更多細節見this example

Answer 2

有現在Handsontable文檔中的一個checkbox tutorial。

Answer 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/

希望這有助於你的例子。