jQueryのEasyUIデータグリッド - 拡張エディタ
ユーザーがデータを編集するようにいくつかの一般的なエディタ(エディタ)は、データグリッド(データグリッド)に追加しました。 すべてのエディター(編集者)が、これは新しい継承エディタ(エディタ)をサポートするように拡張することができ、$ .fn.datagrid.defaults.editorsオブジェクトに定義されています。 このチュートリアルでは、データグリッド(データグリッド)に新しいnumberspinnerエディタを追加する方法を紹介します。
継承された拡張numberspinnerエディタ
$ .extend($。Fn.datagrid.defaults.editors、{ numberspinner:{ INIT:関数(コンテナ、オプション){ VAR入力= $( 'の<input type = "text">')appendTo(コンテナ); (オプション)input.numberspinner返します。 }、 破壊:機能(ターゲット){ $(ターゲット).numberspinner( '破棄'); }、 getValue:機能(ターゲット){ リターン$(ターゲット).numberspinner( 'のgetValue'); }、 setValueの:関数(目標値){ $(ターゲット).numberspinner( 'のsetValue'、値); }、 リサイズ:機能(ターゲット、幅){ $(ターゲット).numberspinner( 'リサイズ'、幅); } } });
htmlタグでデータグリッド(DataGridの)の作成
<表のID = "TT"スタイル= "幅:600PX;高さ:250ピクセル" URL = "データ/ datagrid_data.json"タイトル= "編集可能なデータグリッド" iconCls = "アイコン編集」 > singleSelect = "true"をidFieldは= "アイテムID" fitColumns = "true"を <THEAD> <TR> アイテムID </目> <Thのフィールドは=幅= "60" "のItemID"> <Thのフィールド= "listprice"幅= "80"揃える= "右"エディタ= "{タイプ: 'numberbox'オプション:{精度:1}}">価格</目> <Thのフィールド= "unitcost"幅= "80" = "右"エディタ= "numberspinner"揃える>単価</ thに> <Thのフィールド= "ATTR1"幅= "180"エディタ= "テキスト">属性</目> <Thのフィールド= "ステータス"幅= "60"揃える= "センター"エディタ= "{タイプ:「チェックボックス」、オプション:{上: 'P'、オフ: ''}}">ステータス</目> <Thのフィールド= "アクション"幅= "80"揃える= "センター"フォーマッタ= "formatAction">アクション</目> </ TR> </ THEAD> </表>
私たちは、「単価」フィールドにnumberspinnerエディタを割り当てます。 あなたは、行の編集を開始すると、ユーザーはnumberspinnerエディタによってデータを編集することができます。