Handsontable 复选框不起作用

Posted 2023-03-22

【中文标题】Handsontable 复选框不起作用

【英文标题】：Handsontable checkbox's not working

【发布时间】：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 还是个好主意，这样我们就可以直接修改它，一旦我们有了灵魂，就给你看

明天我会整理一个小提琴。我确实删除了所有数据，但它仍然没有呈现复选框。太奇怪了。将继续切片和切块并报告我的发现。

【参考方案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>