在没有可编辑文本框的情况下,可以在HandsOnTable中使用< code>dropdown列吗?
我知道您可以将< code>type设置为< code>dropdown,当您输入无效值时,它会验证/突出显示红色,但是有没有办法完全禁用< code>dropdown列的文本输入?似乎只是在列上使用< code>readOnly属性就可以完全阻止< code>dropdown。
正如您所说,只读
选项将禁用您的下拉列表。所以我相信您可以使用的最接近的解决方案是lowIndvald=false
(默认为true):
允许无效:真(可选)-允许手动输入源中不存在的值。在这种情况下,字段背景高亮变为红色,选择前进到下一个单元格
允许无效:false - 不允许手动输入源中不存在的值。在这种情况下,将忽略 ENTER 键,编辑器字段保持打开状态。
文档链接
您可以使用此JSFiddle快速检查此选项
我有同样的问题,并且能够通过以下步骤解决它。也许这会有所帮助:
1创建列时,为必要的列类型添加一个特殊的类名:
{
data: 'priceUnitsName',
type: 'dropdown',
invalidCellClassName: 'colored',
source: Object.keys(unitNames),
width: 100,
className: 'disable-edit',
}
2订阅事件以处理取消编辑:
private targetCell: HTMLTableCellElement;
public settings: GridSettings = {
// your settings
afterOnCellMouseDown: (event: MouseEvent, coords: CellCoords, TD: HTMLTableCellElement) => {
this.targetCell = TD;
},
afterBeginEditing: (row: number, column: number) => {
if (this.targetCell.classList.contains('disable-edit')) { // this handle only necessary columns with special class
setTimeout(() => {
const inputCollection: HTMLCollection = document.getElementsByClassName('handsontableInput');
Array.from(inputCollection).forEach((input: HTMLTextAreaElement) => {
input.blur(); // this calls blur on element manually
});
});
}
},
也许这不是最好的决定,但是默认情况下,handsontable不能使下拉元素只读,而保留打开-关闭下拉功能,我找不到任何可行的建议。检查了“下拉”和“日期”类型,它有效。