jQueryのEasyUIデータグリッド - フォーマット列
次の例では、内部のeasyui DataGrid列データにフォーマットされ、価格は20未満のテキストが赤に変わりますある場合は、カスタム列フォーマッタを使用しています。
データグリッド(DataGridの)列の書式を設定するために、我々は関数であるフォーマッタ属性を設定する必要があります。 フォーマット機能は、次の3つのパラメータが含まれています。
- 値:現在の列の対応するフィールドの値。
- 行:現在の行のデータが記録されています。
- インデックス:現在の行のインデックス。
作成データグリッド(DataGridの)
<表のid = "TT"タイトル=「列のフォーマット」クラス= "easyui-データグリッド"スタイル= "幅:550px;高さ:250ピクセル" URL = "データ/ datagrid_data.json」 singleSelect = "true"をiconCls = "アイコン保存"> <THEAD> <TR> アイテムID </目> <Thのフィールドは=幅= "80" "のItemID"> <Thのフィールド= "商品コード"幅= "80">プロダクトID </目> <Thのフィールド= "listprice"幅= "80"揃える= "右"フォーマッタ= "formatPrice">価格</目> <Thのフィールド= "unitcost"幅= "80"揃える= "右">単価</目> <Thのフィールド= "ATTR1"幅= "100">属性</目> <Thのフィールド= "ステータス"幅= "60" = "センター"を揃える> Stauts </目> </ TR> </ THEAD> </表>
「listprice 'フィールドは、フォーマット関数を示し、「フォーマッタ」属性を持っている、ということに注意してください。
書式設定関数を書きます
機能formatPrice(valを、行){ 場合(ヴァル<20){ リターン '<スパンのスタイル= "色:赤;">(' +ヴァル+ ')</ span>の'; }エルス{ ヴァルを返します。 } }