Handsontable에 체크 박스 열 추가

Question

체크 박스 열을 에 입력했습니다. Handsontable?

나는 모든 것을 사용하려고 노력하지만 작동하지 않습니다.

헤더의 체크 박스를 클릭하면 열의 모든 행을 확인합니다.

도움 주셔서 감사합니다.

Answer 1

단순히 열 유형 옵션을 'checkbox'로 설정하여 확인란 열을 만들 수 있습니다.

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

자세한 내용을 위해 Handsontable 문서에 checkbox tutorial 지금있다 this example

Answer 2

를 참조하십시오.

Answer 3

HTML :

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

자바 스크립트 :

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/

희망을 찾고있는 예입니다.