5

jqGridの編集フォームをカスタマイズして、jQueryのDatePickerを使用して入力するフィールドをいくつか追加しました。colModelオプションで次のように構成しました。

colModel: [
...
    { name: 'Column', editable: true, index: 'Column', width: width,
      align: "center", editrules: { integer: true, required: true }, 
      editoptions: { size: 5, dataInit: function (el) {
                     setTimeout(function () { 
                           SetDatepicker('input[name^="' + el.name + '"]'); 
                     }, 100);                
                   } },
      formoptions: { rowpos: 1 }
    },
...
],

これは、入力フィールドがクリックされたときにDatePickerカレンダーを展開する限り機能します。

SetDatepicker関数は次のようには見えません。

function SetDatepicker(control) {
    $.datepicker.setDefaults($.datepicker.regional['es']);

    $(control).datepicker({
        changeMonth: true,
        changeYear: true,
        monthNamesShort: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
    });
}

changeMonthとchangeYearがtrueに設定されているため、DatePickerのヘッダーには、カレンダーに沿って手動で移動するための矢印とともに、年用と年用の2つの選択が含まれている必要があります。問題は、selectのオプションを表示できないことです。マウスのクリックに反応しないだけです。矢印は機能するので、一度に1か月ずつ前後に移動できますが、これらのオプションを使用するという考えは、そうする必要はありません。

jqGridの編集フォームの外に、同じ関数を使用してDatePickerがアタッチされた別のフィールドがあります。正しく動作するので、問題はjqGridのイベント処理にあると思います。

何か案は？

ありがとう

UPD

Firefoxでは正常に動作しますが、IE9-7でもChromeでも動作しません。

UPD2

datepickerを使用した入力のコードと、その機能を使用するようにjqGridを設定する方法を使用してjsFiddleの例を作成しました：http：//jsfiddle.net/rUkyF/

4

3 に答える 3

8

モーダルモードが問題です。モーダル jqGridをクリックすると、フォームの最初の要素にフォーカスしてみてください。jquery -uiが本文にdivカレンダーを追加し、モーダルdivを出力していることがわかります。コメントするので修正しました。modal: true

grid.jqGrid('editGridRow', rowID, {
    addCaption: "Agregar Proyecto",
    topinfo: "Introduzca los nuevos datos del proyecto.",
    viewPagerButtons: false,
    //modal: true,
    jqModal: true,
    saveicon: [true, "left", "ui-icon-disk"],
    closeicon: [true, "right", "ui-icon-close"],
    closeAfterEdit: true,
    resize: false,
    width: wWidth,
    reloadAfterSubmit: true
});

http://jsfiddle.net/rUkyF/70/

于 2012-10-27T02:43:19.030 に答える
5

使ってみれば問題は解決すると思います

SetDatepicker(el);

それ以外の

SetDatepicker('input[name^="' + el.name + '"]');

更新： jsFiddlerデモにいくつかのバグがありました。変更されたデモhttp://jsfiddle.net/rUkyF/7/を見て、問題を再現してみてください。問題ありません。

更新2：iJDが問題の原因を見つけたことがわかりました。jQueryDatepickerの動作を妨げる理由 を説明したかっただけです。modal: true私はiJDmodal: trueが賞金を授与することを望み、オプションまたはを使用すべきかどうかを理解したい他の読者のためにのみ以下のテキストを書きましたjqModal: false。

modal: trueのオプションを使用すると、フォームを表示するeditGridRowメソッドがオプションとともにここで呼び出され、オプションがモジュールjqModal.jsで定義された（）に転送されます（行を参照） 。その結果、関数はコード行のパラメーターを使用して呼び出されます。したがって、関数はバインドされ（コード行を参照） 、のイベントは次の行で次のように定義されたイベントハンドラーにバインドされます。$.jgrid.viewModalmodal: truejQuery.jqm$.fn.jqmL'bind'jqmLkeypresskeydownmousedowndocumentm

var m = function (e) {
    var h = H[A[A.length - 1]],
        r = (!$(e.target).parents('.jqmID' + h.s)[0]);
    if(r) f(h);
    return !r;
}

ここで、関数fは次のように定義されます

var f = function (h) {
    try {
        $(':input:visible', h.w)[0].focus();
    } catch (_) {}
}

したがって、の使用法は、クラス（通常）modal: trueのdivの親ではないすべてのコントロールのブロックに従うことがわかります。フォームの最初の表示フィールドがフォーカスを取得する場合（関数の呼び出しのため）。'.jqmID' + h.s'.jqmID1'<input>f

多くのjQueryUIコントロールは、の直接の子である要素（メニュー、日付ピッカーなど）を作成することが知られています<body>（たとえば、の<div id="ui-datepicker-div">直接の子であるDatepickerが作成します<body>）。したがって、そのようなコントロールでは、キーボードとマウスのイベントをブロックできます。

したがってmodal: true、jqGridフォーム内で他のコントロールのjQuery UIコントロールを使用する場合は、オプションを使用しないでください。

ちなみに、jqModalオプションのデフォルト値editGridRowはすでにですtrue（ドキュメントを参照）。したがって、。jqModal: trueの他のオプションと同様に、現在のコードからを削除できますeditGridRow。代わりに使用する場合jqModal: false、jqModal.jsプラグインはによって使用されeditGridRowず、modal: trueオプションも無視されます。この場合、HTMLページ全体がブロックされることはありません。現在のグリッドは、対応するグリッドのオーバーレイによってのみブロックされます。

私が使用する個人的なデフォルト設定では$.extend($.jgrid.edit, {...})、jqModalスイッチがオフになっています。

$.extend($.jgrid.edit, {
    recreateForm: true,
    jqModal: false,
    closeAfterAdd: true,
    closeAfterEdit: true,
    ... // other less common settings
});

使用するデフォルト設定は自分で決める必要があります。

更新3：jqGridのコードを修正する方法を提案するバグレポートを投稿しました。行を変更した場合

m=function(e){var h=H[A[A.length-1]],r=(!$(e.target).parents('.jqmID'+h.s)[0]);if(r)f(h);return !r;},

行に

m=function(e){
    var h=H[A[A.length-1]],
        r=(!$(e.target).parents('.jqmID'+h.s)[0]);
    if(r) {
        // e.target could be inside of element with absolute position like menu item
        // in the case parents call above will don't find the modal dialog
        // To fix the problem we verify additionally whether e.target is inside of
        // an element having the class 'jqmID'+h.s
        $('.jqmID'+h.s).each(function() {
            var $self = $(this), offset = $self.offset();
            if (offset.top <= e.pageY && e.pageY <= offset.top + $self.height() &&
                    offset.left <= e.pageX && e.pageX <= offset.left + $self.width()) {
                r = false; // e.target is do inside of the dialog
                return false; // stop the loop
            }
        });
        f(h);
    }
    return !r;
},

その後、問題を修正する必要があります。デモではmodal: trueオプションを使用し、日付ピッカーは編集ダイアログで機能します。それは私が説明した修正を使用します。

更新4 ：私の回答の更新3で説明したバグ修正が、jqGridのメインコードに含まれるようになりました（ここを参照）。したがって、4.4.5を超えるバージョンでは、説明されている問題は発生しないはずです。

于 2012-09-05T13:38:48.220 に答える
1

jsfiddleでは、最初に記号を使用してid属性を設定しました。#私の知る限り、a-zA-Z_記号のみを使用する必要があります。少なくとも私の経験では、主にIEで多くの問題が発生しました。

それを削除した後#（http://jsfiddle.net/tftd/gwC4F/1/）、最新のFF、Chrome、Opera、Safariではすべてが魅力のように機能しました。

于 2012-10-29T19:18:04.500 に答える