如何在handsontable中居中对齐复选框？答案

【问题标题】：How to center align a checkbox in handsontable?如何在handsontable中居中对齐复选框？
【发布时间】：2016-01-25 16:11:20
【问题描述】：

我正在使用 handsontable，我的代码是用 typescript/aurelia 编写的。我无法将复选框列居中对齐。我关注this链接并将我的复选框列上的className设置为“htCenter htMiddle”。在文本列上这个东西有效，但在复选框列上无效。而当我使用我的开发工具并将<td> 上的类设置为“htCenter htMiddle”时，它可以工作。还有其他方法可以设置此复选框列的对齐方式吗？

添加className的代码如下：

this.options.columns = [ { data: "modalValue", renderer: linkButtonRenderer, readOnly: true }, { data: "uri", readOnly: true }, { data: "isPublic", className: "htCenter htMiddle", type: "checkbox" } ];

【问题讨论】：

你是如何设置类名的？你能给我们看看代码吗？
@ZekeDroid 已编辑并将代码放入问题中。
你能提供一个jsfiddle吗？我不确定它是否适用于列，它可能是 cells 唯一的选项。
FWIW，我也有同样的问题。似乎复选框有点特别：github.com/handsontable/handsontable/issues/2925

标签： handsontable

【解决方案1】：

你必须设置

{ data: 'Is_anything', type: 'checkbox', className: "htCenter htMiddle" },

像这样。您将在中心获得复选框。

【讨论】：

【解决方案2】：

我已经为 Handsontable 0.19.0 解决了这个问题

[handsontable.full.js: line 17197]
function checkboxRenderer(instance, TD, row, col, prop, value, cellProperties)

添加这个以允许使用自定义渲染器（不知道他们为什么错过这个）

getRenderer('base').apply(this, arguments);

如果您只想硬编码对齐，请将其作为该函数的第一行：

TD.style.textAlign = "center";

【讨论】：

我采用了你建议的第二种方法。

【解决方案3】：

无法设置复选框（和数字）对齐方式是以前版本的 Handsontable 中的一个错误。从 Handsontable version 0.25.1 开始，此问题已得到修复 --- 请参阅 https://github.com/handsontable/handsontable/issues/2925 和 https://github.com/handsontable/handsontable/issues/3532。

OP 的代码现在应该可以工作了。

【讨论】：