Handsontable 复选框不起作用答案

【问题标题】：Handsontable checkbox's not workingHandsontable 复选框不起作用
【发布时间】：2015-04-04 18:50:33
【问题描述】：

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

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}

【问题讨论】：

发布 jsfiddle？是它没有呈现实际复选框的问题吗？您从未将渲染器设置为使用复选框渲染器，这可能是问题
我一直在 Handsontable.com 网站上查看示例，我的示例是相同的。我没有看到他们在做渲染器。我确实包含了 src 文件夹中的 cellTypes.js。我的例子是基于 PHP 的。
是的，你是对的，你不需要自定义渲染器，尽管它会帮助你调试。你能发布一个示例 bulkListData 吗？放个 jsfiddle 还是个好主意，这样我们就可以直接修改它，一旦我们有了灵魂，就给你看
明天我会整理一个小提琴。我确实删除了所有数据，但它仍然没有呈现复选框。太奇怪了。将继续切片和切块并报告我的发现。

标签： handsontable

【解决方案1】：

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

我唯一需要的就是相应地填写bulkListData，否则一切都和你的一模一样。也许您确实犯了错误 - 此数组中的 action 属性是否以 yes/no 字符串的形式出现？

【讨论】：

我发现后期渲染功能是罪魁祸首。删除后，我得到了复选框。不知道为什么会这样。我只是根据单个列值对 td 进行颜色编码。
也许您可以按照建议发布您的代码的工作小提琴（使用 post render 函数），我们会尽力使其工作。

【解决方案2】：

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

  $(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/

【讨论】：

【解决方案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'
        };
    }
} );

【讨论】：

可能会稍微解释一下，也许引用一些文档。

【解决方案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>

【讨论】：