提问者:小点点

没有可编辑文本的可触摸下拉列表?


在没有可编辑文本框的情况下,可以在HandsOnTable中使用< code>dropdown列吗?

我知道您可以将< code>type设置为< code>dropdown,当您输入无效值时,它会验证/突出显示红色,但是有没有办法完全禁用< code>dropdown列的文本输入?似乎只是在列上使用< code>readOnly属性就可以完全阻止< code>dropdown。


共2个答案

匿名用户

正如您所说,只读选项将禁用您的下拉列表。所以我相信您可以使用的最接近的解决方案是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不能使下拉元素只读,而保留打开-关闭下拉功能,我找不到任何可行的建议。检查了“下拉”和“日期”类型,它有效。