1

jqgrid の高度な検索ウィンドウで Enter キーを有効にする方法の回答では 、jqgrid の高度な検索ダイアログで Enter キーやその他のキーを有効にする方法について説明しています。

詳細検索ダイアログで [グループの追加]、[サブグループの追加]、[ルールの削除]、または [グループの削除] ボタンをクリックした後、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元は Internet Explorer で (少なくとも IE4 で) 導入され、現在は HTML5 標準の一部であるため、すべての Web ブラウザーでサポートされている document.activeElement 要素を使用するコードを修正することをお勧めします(こちらを参照)。もともとフォーカスがある要素は破棄され、後でフォーカスを設定できなくなります。そのため、要素の要素名とそのクラス (input.add-groupまたは など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();
        }
    }
};

次のデモでわかるように、「サブグループの追加」または「ルールの追加」ボタンを押した後、検索ダイアログのフォーカスは変更されません。「グループの削除」を押した場合に備えて、前の行グループの「ルールの追加」ボタンに設定します。

もう 1 つのデモでは、ボタンの 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 に答える