1. Home
  2. jQueryのEasyUIデータグリッド - インライン編集を可能にします

jQueryのEasyUIデータグリッド - インライン編集を可能にします2024 年の最新の入門チュートリアル。このコースでは jQueryのEasyUI例をダウンロード, について学習できます。

jQueryのEasyUIデータグリッド - インライン編集を可能にします

編集可能な機能は、最近のデータグリッド（データグリッド）に追加します。 これは、ユーザーがデータグリッド（データグリッド）に新しい行を追加することができます。 また、ユーザーは、1つまたは複数の行を更新することができます。

このチュートリアルでは、データグリッド（データグリッド）とインラインエディタを作成する方法を示しています。

作成データグリッド（DataGridの） 

	$（関数（）{
		$（ '＃Ttの'）。データグリッド（{
			タイトル：「編集可能なデータグリッド」、
			iconCls：「アイコン編集」、
			幅：660、
			高さ：250、
			singleSelect：trueの場合、
			idFieldは： 'itemidの'
			URL： 'datagrid_data.json」、
			列：[[
				{フィールド： 'itemidの'、タイトル：「アイテムID」、幅：60}、
				{フィールド：「商品コード」、タイトル：「製品」、幅：100、
					フォーマッタ：関数（値）{
						以下のために（VAR I = 0; iはproducts.lengthを<;私は++）{
							場合（製品[i]が.productid ==値）リターン・製品[i]は.nameの。
						}
						値を返します。
					}、
					エディタ：{
						タイプ：「コンボボックス」、
						オプション：{
							valueField：「商品コード」、
							テキストフィールド：「名前」、
							データ：製品、
							必須：○
						}
					}
				}、
				{フィールド： 'listprice'、タイトル：「定価」、幅：80、整列する： '右'を、エディタ：{タイプ： 'numberbox'オプション：{精度：1}}}、
				{フィールド： 'unitcost'、タイトル：「単価」、幅：80、整列する：「右」、編集者： 'numberboxを'}、
				{フィールド： 'ATTR1'、タイトル：「属性」、幅：150、エディタ： 'テキスト'}、
				{フィールド：「ステータス」、タイトル：「ステータス」、幅：50、整列する：「センター」を、
					エディタ：{
						タイプ：「チェックボックス」、
						オプション：{
							上：「P」、
							オフ： ''
						}
					}
				}、
				{フィールド： 'アクション'、タイトル：「アクション」、幅：70、整列する：「センター」を、
					フォーマッタ：関数（値、行、インデックス）{
						場合は{（row.editing）
							VAR S = '<a href="#" onclick="saverow(this)"> </a>の保存';
							するvar C = '<a href="#" onclick="cancelrow(this)"> </a>のキャンセル';
							リターンの+ cを。
						}エルス{
							VAR電子= '<a href="#" onclick="editrow(this)">編集します</a>';
							VARさd = '<a href="#" onclick="deleterow(this)"> </a>に削除します';
							E + Dを返します。
						}
					}
				}
			]、
			onBeforeEdit：機能（インデックス、行）{
				row.editing =はtrue。
				updateActions（インデックス）;
			}、
			onAfterEdit：機能（インデックス、行）{
				row.editing = falseは、
				updateActions（インデックス）;
			}、
			onCancelEdit：機能（インデックス、行）{
				row.editing = falseは、
				updateActions（インデックス）;
			}
		}）;
	}）;
	関数updateActions（インデックス）{
		$（ '＃Ttの'）。データグリッド（ 'にupdateRow'、{
			インデックス：インデックス、
			行：{}
		}）;
	}

インライン編集データ・グリッドを有効にするには、エディタの列にプロパティを追加する必要があります。 エディター（編集者）はフィールドを編集する方法とフィールドの値を保存する方法をデータグリッド（データグリッドを）伝えます。 あなたは、3エディター（編集者）を見ることができるように私たちは、定義：テキスト、コンボボックスやチェックボックスを。 

	機能getRowIndex（ターゲット）{
		VAR TR = $（ターゲット）.closest（ 'tr.datagrid列'）;
		parseIntは（tr.attr（ 'データグリッド行インデックスを'））を返します。
	}
	関数editrow（ターゲット）{
		$（ '＃Ttの'）データグリッド（ 'にBeginEdit」、getRowIndex（ターゲット））;
	}
	関数のdeleteRow（ターゲット）{
		$の.messager.confirm（ '確認'、 'よろしいですか？'、関数（R）{
			{（R）の場合
				$（ '＃Ttの'）データグリッド（ 'のdeleteRow'、getRowIndex（ターゲット））;
			}
		}）;
	}
	関数saverow（ターゲット）{
		$（ '＃Ttの'）データグリッド（ 'endEdit'、getRowIndex（ターゲット））;
	}
	関数cancelrow（ターゲット）{
		$（ '＃Ttの'）データグリッド（ 'cancelEdit'、getRowIndex（ターゲット））;
	}

jQueryのEasyUI例をダウンロード

jeasyui-datagrid-datagrid12.zip

ホットチュートリアル

お問い合わせ

jQueryのEasyUIデータグリッド - インライン編集を可能にします
10/30