このチュートリアルでは、で編集可能なデータグリッド（データグリッド）内の列の操作を含める方法を学習します。カラムから値を計算することは、典型的には、1つのまたは複数の他の列の操作を含んでいます。
まず、編集可能なデータグリッド（データグリッド）を作成します。ここでは、numberbox編集タイプとして定義されている一部の編集可能な列、「listprice」、「量」と「unitcost」列を作成します。列の計算は、「unitcost」フィールドである量の列listpriceを乗算した結果です。
iconCls =「アイコン編集」singleSelect =「true」を「計算列で編集可能なデータグリッド」タイトル=
idField = "アイテムID" URL = "データ/ datagrid_data.json">
| アイテムのID | 定価 | 量 | 単価 | 属性 | 状態 |
|---|
ユーザーが行をクリックすると、我々は編集アクションを開始しました。
各負荷インデックス。
$（ '＃のTT'）。データグリッド（{
onClickRow：関数（rowIndexプロパティ）{
もし（lastIndexの！= rowIndexプロパティ）{
$（ '＃のTT'）データグリッド（ 'endEdit'、lastIndexの）。
$（ '＃のTT'）データグリッド（ 'にBeginEdit'、rowIndexに）。
setEditing（rowIndexプロパティ）。
}
lastIndexの= rowIndexに。
}
}）;
列の数との間の動作関係を作成するために、我々は現在のエディタを取得する必要があり、そして上記のイベントのいくつかにバインドします。
関数setEditing（rowIndexプロパティ）{
VaRの編集者=の$（ '＃のTT'）データグリッド（ 'getEditors'、rowIndexに）。
VaRのpriceEditor =エディタ[0]。
VaRのamountEditor =編集[1]。
VaRのcostEditor =編集[2]。
priceEditor.target.bind（ '変更'、関数（）{
計算（）。
}）;
amountEditor.target.bind（ '変更'、関数（）{
計算（）。
}）;
関数計算（）{
VARコスト= priceEditor.target.val（）* amountEditor.target.val（）;
$（costEditor.target）.numberbox（ 'のsetValue'、コスト）。
}
}
jQueryのEasyUI例をダウンロード
jeasyui-datagrid-datagrid15.zip（編集：Leilin鵬出典：ネットワーク侵入は削除）