5

関連するデータ、ステータスなどのフィールドを含む会社の LAN IP アドレスが事前に入力されたテーブルがあります。(jquery-)jtable フィールド コレクションは次のように構成されています。

fields: {
  id: { title: 'ID'},
  ip: { title: 'IP address, edit: false }
  more: { ... }
}

これは機能しますが、編集ダイアログがポップアップしたときに、jtable の編集フォームにフィールドが表示されないため、編集中のレコードの IP アドレスがユーザーに表示されないという問題があります。

ドキュメントを読みましたが、編集フォームでフィールドを読み取り専用として表示する方法がわかりません。何か案は？

4

4 に答える 4

4

jTable ライブラリ アセットをハックする必要はありません。これは、新しいバージョンに更新するときに苦労するだけです。必要なことは、jTable フィールド オプション " input " を使用してカスタム入力を作成することだけです。ここで必要なことを達成するためのフィールド設定の例を参照してください。

JobId: {
    title: 'JobId',
    create: true,
    edit: true,
    list: true,
    input: function (data) {
        if (data.value) {
            return '<input type="text" readonly class="jtable-input-readonly" name="JobId" value="' + data.value + '"/>';
        } else {
            //nothing to worry about here for your situation, data.value is undefined so the else is for the create/add new record user interaction, create is false for your usage so this else is not needed but shown just so you know when it would be entered
        }
    },
    width: '5%',
    visibility: 'hidden'
},

そしてシンプルなスタイルクラス:

.jtable-input-readonly{
    background-color:lightgray;
}
于 2013-11-05T10:30:42.180 に答える
2

私は簡単な解決策を持っています:

formCreated: function (event, data) 
{
    if(data.formType=='edit') {
        $('#Edit-ip').prop('readonly', true);
        $('#Edit-ip').addClass('jtable-input-readonly');
    }
},

ドロップダウンでは、現在のもの以外の他のオプションを無効にします:

$('#Edit-country option:not(:selected)').attr('disabled', true);

そしてシンプルなスタイルクラス:

.jtable-input-readonly{
     background-color:lightgray;
}
于 2015-03-19T02:52:31.247 に答える
1

jtable.js をハックする必要がありました。行 2427 あたりから開始します。変更された行は「*」でマークされています。

            //Do not create element for non-editable fields
            if (field.edit == false) {
               //Label hack part 1: Unless 'hidden' we want to show fields even though they can't be edited. Disable the 'continue'.
*              //continue;      
            }

            //Hidden field
            if (field.type == 'hidden') {
                $editForm.append(self._createInputForHidden(fieldName, fieldValue));
                continue;
            }

            //Create a container div for this input field and add to form
            var $fieldContainer = $('<div class="jtable-input-field-container"></div>').appendTo($editForm);

            //Create a label for input
            $fieldContainer.append(self._createInputLabelForRecordField(fieldName));

            //Label hack part 2: Create a label containing the field value.
*           if (field.edit == false) {
*               $fieldContainer.append(self._myCreateLabelWithText(fieldValue));
*               continue;       //Label hack: Unless 'hidden' we want to show fields even though they can't be edited.
*           }

            //Create input element with it's current value

_createInputLabelForRecordField の後に、この関数を追加します (1430 行付近):

/* Hack part 3: Creates label containing non-editable field value.
*************************************************************************/
_myCreateLabelWithText: function (txt) {
   return $('<div />')
     .addClass('jtable-input-label')
     .html(txt);
},

Metro テーマでは、フィールド名と値の両方が灰色になります。

戻す更新スクリプトには注意してください。//edit: false// フィールドには値が返されないため、更新クエリに含めないでください。

于 2013-09-28T22:17:56.933 に答える
0

ドロップダウンのよりシンプルなバージョン

$('#Edit-country').prop('disabled',true);

すべてのオプションを無効にする必要はありません:)

于 2015-10-23T14:25:27.867 に答える