1

如何在 jqgrid 高级搜索窗口中启用输入的答案描述 了如何在 jqgrid 高级搜索对话框中启用输入和其他键。

在高级搜索对话框中单击添加组、添加子组、删除规则或删除组按钮后，Enter 和其他键仍然被忽略。如何将焦点设置到添加的元素或删除剩余元素以启用 Enter 和其他键？

4

1 回答 1

1

高级搜索对话框的当前版本（参见jqFilter中的定义grid.filter.js）重新创建对话框的所有控件以更改某人。请参阅看起来的reDraw代码

this.reDraw = function() {
    $("table.group:first",this).remove();
    var t = this.createTableForGroup(p.filter, null);
    $(this).append(t);
    if($.isFunction(this.p.afterRedraw) ) {
        this.p.afterRedraw.call(this, this.p);
    }
};

怎样才能看到第一行$("table.group:first",this).remove();删除了所有过滤器的内容。当前的焦点将丢失，并且会出现您描述的问题。

我建议修复reDraw使用 document.activeElement 元素的代码，该元素最初是在 Internet Explorer 中引入的（至少在 IE4 中），并且现在所有 Web 浏览器都支持它，因为它是 HTML5 标准的一部分（参见此处）。原来有焦点的元素会被销毁，以后就不能再设置焦点了。所以我建议保存元素的元素名称及其类（如input.add-groupor input.add-rule.ui-add）并在搜索对话框中找到元素的位置。稍后，在重新创建对话框元素后，我们将焦点设置在具有相同索引的元素上。

我建议将代码更改为reDraw以下

this.reDraw = function() {
    var activeElement = document.activeElement, selector, $dialog, activeIndex = -1, $newElem, $buttons,
        buttonClass,
        getButtonClass = function (classNames) {
            var arClasses = ['add-group', 'add-rule', 'delete-group', 'delete-rule'], i, n, className;
            for (i = 0, n = classNames.length; i < n; i++) {
                className = classNames[i];
                if ($.inArray(className, arClasses) >= 0) {
                    return className;
                }
            }
            return null;
        };
    if (activeElement) {
        selector = activeElement.nodeName.toLowerCase();
        buttonClass = getButtonClass(activeElement.className.split(' '));
        if (buttonClass !== null) {
            selector += '.' + buttonClass;
            if (selector === "input.delete-rule") {
                $buttons = $(activeElement).closest('table.group')
                    .find('input.add-rule,input.delete-rule');
                activeIndex = $buttons.index(activeElement);
                if (activeIndex > 0) {
                    // find the previous "add-rule" button
                    while (activeIndex--) {
                        $newElem = $($buttons[activeIndex]);
                        if ($newElem.hasClass("add-rule")) {
                            activeElement = $newElem[0];
                            selector = activeElement.nodeName.toLowerCase() + "." +
                                getButtonClass(activeElement.className.split(' '));
                            break;
                        }
                    }
                }
            } else if (selector === "input.delete-group") {
                // change focus to "Add Rule" of the parent group
                $newElem = $(activeElement).closest('table.group')
                    .parent()
                    .closest('table.group')
                    .find('input.add-rule');
                if ($newElem.length > 1) {
                    activeElement = $newElem[$newElem.length-2];
                    selector = activeElement.nodeName.toLowerCase() + "." +
                        getButtonClass(activeElement.className.split(' '));
                }
            }
            $dialog = $(activeElement).closest(".ui-jqdialog");
            activeIndex = $dialog.find(selector).index(activeElement);
        }
    }
    $("table.group:first",this).remove();
    $(this).append(this.createTableForGroup(this.p.filter, null));
    if($.isFunction(this.p.afterRedraw) ) {
        this.p.afterRedraw.call(this, this.p);
    }
    if (activeElement && activeIndex >=0) {
        $newElem = $dialog.find(selector + ":eq(" + activeIndex + ")");
        if ($newElem.length>0) {
            $newElem.focus();
        } else {
            $dialog.find("input.add-rule:first").focus();
        }
    }
};

就像在下一个演示中可以看到的那样，在按下“添加子组”或“添加规则”按钮后，搜索对话框中的焦点保持不变。如果按下“删除组”，我将其设置在前一行组的“添加规则”按钮上。

另一个演示使用按钮的 jQuery UI 样式和按钮中的文本（请参阅答案）。单击“删除”（规则或组）按钮后，我尝试将焦点设置到上一个“添加规则”按钮，因为将焦点设置在另一个“删除”（规则或组）按钮上我觉得很危险。

另外在我使用的演示中

afterShowSearch: function ($form) {
    var $lastInput = $form.find(".input-elm:last");
    if ($lastInput.length > 0) {
        $lastInput.focus();
    }
}

因为在对话框打开时将初始焦点设置在最后一个输入字段上似乎很有意义。

更新：我发现将焦点设置在当前单击的按钮“添加子组”、“添加规则”或“删除组”上也很有意义。在第一次用鼠标单击某个按钮然后想继续使用键盘工作的情况下，人们看到的优势。所以我建议换行

inputAddSubgroup.bind('click',function() {

到

inputAddSubgroup.bind('click',function(e) {
    $(e.target).focus();

更改线路

inputAddRule.bind('click',function() {

到

inputAddRule.bind('click',function(e) {
    $(e.target).focus();

和线

inputDeleteGroup.bind('click',function() {

到

inputDeleteGroup.bind('click',function(e) {
    $(e.target).focus();

和线

ruleDeleteInput.bind('click',function() {

到

ruleDeleteInput.bind('click',function(e) {
    $(e.target).focus();
于 2012-04-08T20:04:43.343 回答