Handsontable 复选框不起作用

Question

非常简单，我一直试图让复选框类型呈现在我的列表中，但我得到的只是值 "no." 这是我的设置对象。难道我做错了什么？该列表在条件着色等方面完美呈现并正常工作，只是没有复选框。帮助！谢谢。

settings = {
    data: bulkListData
    ,dataSchema: {name: {first: null, last: null}, email: null,status: null,action: null}
    ,colHeaders: ['First Name', 'Last Name', 'Email','Status','Action']
    ,columns: [
        {data: 'name.first'},
        {data: 'name.last'},
        {data: 'email'},
        {data: 'status'},
        {data: 'action'
            ,type: 'checkbox'
            ,checkedTemplate: 'yes'
            ,uncheckedTemplate: 'no'
            }
        ]
    ,colWidths:[200,200,300,120,120]
    ,startRows: 5
    ,startCols: 5
    ,minRows: 5
    ,minCols: 5
    ,maxRows: 10
    ,maxCols: 5
    ,minSpareRows: 5
    ,autoWrapRow:true
    ,contextMenu: true}

Answer 1

我把你的示例代码放在 fiddle 中，它对我有用。

我唯一需要做的就是相应地填写bulkListData，否则一切都和你的一模一样。也许你在那里犯了错误 - 这个数组中的 action 属性是以 yes/no 字符串的形式吗？

Answer 2

我有一个渲染器可以改变列的颜色。使用此渲染器时，复选框会更改为 'yes'/'no'。当不使用渲染器时，复选框显示。

  $(document).ready(function () { function getCompData() {
return [
  {Comp: "Annually", year: 2006, Retirement: 'yes'},
  {Comp: "Monthly", year: 2008, Retirement: 'yes'},
  {Comp: "Quarterly", year: 2011,  Retirement: 'no'},
  {Comp: "Semi-Annually", year: 2004,  Retirement: 'yes'},
  {Comp: "Semi-Monthly", year: 2011, Retirement: 'no'}
];}function cellColorRenderer(instance, td, row, col, prop, value, cellProperties) {
          Handsontable.TextCell.renderer.apply(this, arguments);
          if (col === 1) {
              td.style.textAlign = 'right';
              td.style.backgroundColor = "#ccffcc";             
              }
          }var example2 = document.getElementById('example2');  var hot2 = new Handsontable(example2,{    data: getCompData(),
startRows: 7,
startCols: 4,
colHeaders: ["Comp", "Year", "401K"],
colWidths: [120, 50, 60],
columnSorting: true,
columns: [
  {
    data: "Comp"
  },
  {
    data: "year",
    type: 'numeric'
  },
  {
    data: "Retirement",
    type: "checkbox",
    checkedTemplate: 'yes',
    uncheckedTemplate: 'no'
  }
], cells: 
                function (row, col, prop) {
                    var cellProperties = {};
                    cellProperties.renderer = cellColorRenderer;
                    return cellProperties;
                },  }); });

这是jsfiddle中的代码 http://jsfiddle.net/w42cp1y8/1/

Answer 3

只需使用 CheckboxRenderer 而不是 TextRenderer:

$element.handsontable( { 
    cells: function( row, col, prop ) {
        return {
            renderer: function( instance, td, row, col, prop, value, cellProperties ) {
                Handsontable.renderers.CheckboxRenderer.apply( this, arguments );
                td.style.backgroundColor = value ? 'red' : 'white';
                td.style.textAlign = 'center';
            },
            type: 'checkbox'
        };
    }
} );

Answer 4

jExcel 是 handsontable 的替代品。下面的示例使用复选框列类型：

data = [
    ['Brazil', 'Classe A', 'Cheese', 1, '2017-01-12'],
    ['Canada', 'Classe B', 'Apples', 1, '2017-01-12'],
    ['USA', 'Classe A', 'Carrots', 1, '2017-01-12'],
    ['UK', 'Classe C', 'Oranges', 0, '2017-01-12'],
];

$('#my').jexcel({
    data:data,
    colHeaders:  [ 'Country', 'Description', 'Type', 'Stock', 'Next purchase' ],
    colWidths: [ 300, 80, 100, 60, 120 ],
    columns: [
        { type: 'text' },
        { type: 'text' },
        { type: 'dropdown', source:[ {'id':'1', 'name':'Fruits'}, {'id':'2', 'name':'Legumes'}, {'id':'3', 'name':'General Food'} ] },
        { type: 'checkbox' },
        { type: 'calendar' },
    ]
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.2.2/css/jquery.jexcel.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.2.2/js/jquery.jexcel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.2.2/js/jquery.jcalendar.min.js"></script>


<div id="my"></div>

Handsontable 复选框不起作用

Handsontable checkbox's not working

handsontable