【问题标题】:jqGrid - Select selected cell's text while inline editingjqGrid - 内联编辑时选择选定单元格的文本
【发布时间】:2015-12-18 12:51:59
【问题描述】:

第 1 部分) 在我的网格中,我有一些可编辑的列,我想对其进行内联编辑。但是,当我选择任何特定单元格时,如果该单元格 (editable: true) 上可以进行内联编辑,它应该选择要编辑的文本。

例如,如果这是默认网格: 然后在选择 Quantity 中的任何单元格时,结果应该是这样的:

当我们在 jqGrid 中单击一个单元格来编辑该行时,当前的实现不会像这样突出显示选定的文本。有什么方法可以实现吗?

第 2 部分)根据 Oleg 的建议迁移到 this question

网格代码: jsFiddle

注意:我真正的应用程序数据类型是JSON

【问题讨论】:

    标签: javascript jquery jqgrid free-jqgrid


    【解决方案1】:

    我不确定所有版本的旧网络浏览器,但是您可以将onSelectRow的代码修改为以下

    onSelectRow: function (id) {
        var $self = $(this);
        if (id && id !== lastsel2) {
            $self.jqGrid('restoreRow', lastsel2);
            $self.jqGrid('editRow', id, {
                keys: true,
                focusField: 'Quantity',
                oneditfunc: function (rowid, options) {
                    $control = $("#" + rowid + "_Quantity");
                    if ($control.length > 0) {
                        $control[0].select();
                    }
                },
                aftersavefunc: reload
            });
            lastsel2 = id;
        }
    }
    

    http://jsfiddle.net/OlegKi/HJema/163/。它使用focusField: 'Quantity' 选项将焦点设置在'Quantity' 列上。它使用select() 方法来选择<input> 字段的文本。

    您问题的第二部分(关于bindKeys)在我看来是一个单独的问题。方法bindKeys 允许实现自定义回调onLeftKeyonRightKey。我不太清楚你更想使用哪一个。

    【讨论】:

    • 嗨@Oleg 这非常有效,但仅适用于数量字段。如果有多个可编辑字段怎么办?而且我希望它的重点是任何字段(在这种情况下不仅仅是数量字段)抱歉我应该在我的问题本身中指定这一点。但是我该怎么做呢?我已尝试检索网格的 colModel,但无法与所选列进行比较。有什么更好的方法可以满足我的需求吗?
    • @DipenShah:我不确定我是否完全理解您想要实现的内容。 $("#" + rowid + "_" + columnName).select(); 允许您在任何输入字段中选择文本。另一方面,您可以只将焦点设置在一个输入字段上。
    • 对不起,我之前不清楚。换句话说,我必须假设我不知道“数量”这个名字。假设我有另一个可编辑的名为“已接收”的字段。现在,如果我单击“已接收”列上的任何单元格,这也适用于“已接收”列,它应该选择并突出显示该已接收列的文本。这有帮助吗?
    • @DipenShah:如果我理解正确,那么您可以在内联编辑的<input> 的 onfocus 事件处理程序中执行.select() 方法。您可以使用editoptions.dataEvents 注册focusfocusin 事件处理程序。是你需要的吗?
    • @DipenShah:看看the demo,它有两个可编辑的输入字段I_ItemNumIDQuantityQuantity 最初获得输入,但如果单击I_ItemNumID 或返回Quantity,则始终会在设置焦点上获得选定的文本。是你需要的吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-09-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多