これは、igGrid
™ コントロールの列集計ウィジェットをプログラム的に有効にする方法を示しています。
このトピックは、以下のセクションで構成されます。
列集計ウィジェットにより、igGrid
はグリッドの列にあるデータの集計行を表示できます。事前に設定された集計関数がありますが、カスタム関数を作成してカスタム集計を計算できます。
igGrid
コントロールの列集計機能はデフォルトで無効のため、明示的に有効にする必要があります。
以下の例では、集計機能を有効にした igGrid
が構成されています。
以下は最終結果のプレビューです。
jQuery の要件
HTML の場合:
<table id="grid">
</table>
MVC 固有の要件
jQuery と MVC が jQuery ウィジェットを再描画するため、両方のサンプルに必要なスクリプトは同じです。次が必要になります。次が必要になります。
次のコード サンプルは、HTML ファイルのヘッダー セクションに追加されるスクリプトです。
HTML の場合:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="infragistics.core.js"></script>
<script type="text/javascript" src="infragistics.lob.js"></script>
このサンプルでは以下が使用されています。
データ ソースを設定します。
以下のコード スニペットで使用されているデータ ソースは、あくまでこの例のために使用されているだけです。
HTML の場合:
<script type="text/javascript">
var adventureWorks = [
{ "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381", "StandardCost": 0.0000, "ListPrice": 0.0000 },
{ "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "StandardCost": 0.0000, "ListPrice": 0.0000 },
{ "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "StandardCost": 0.0000, "ListPrice": 0.0000 },
...
]
</script>
igGrid を作成し、集計機能を有効にします。
$(document).ready()
イベント ハンドラーの中で、igGrid を作成し、グリッドの集計機能を構成します。
JavaScript の場合:
$("#grid").igGrid({
autoGenerateColumns: false,
dataSource: adventureWorks,
columns: [
{ headerText: "Product Name", key: "Name", dataType: "string", width: "40%" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "20%" },
{ headerText: "List Price", key: "ListPrice", dataType: "number", width: "20%" },
{ headerText: "Standard Cost", key: "StandardCost", dataType: "number", width: "20%" }
],
features: [
{
name: 'Summaries'
}
]
});
ファイルを保存します。
(オプション) 結果を確認します。
結果を検証するために、ファイルを開きます。上記のプレビューに示すような結果になっているはずです。
サンプル
MVC Controller メソッドを作成します。
MVC Controller メソッドを作成し、Model からデータを取得して View を呼び出します。
MVC の場合:
public ActionResult Default()
{
var ds = this.DataRepository.GetDataContext().Products.Take(4);
return View(ds);
}
igGrid をインスタンス化します。
columnSummaries 機能を有効にした igGrid をインスタンス化します。
ASPX の場合:
<%= Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature =>{
feature.Summaries();
}).DataBind()
.Render()
%>
Razor の場合:
@( Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature =>{
feature.Summaries();
}).DataBind()
.Render()
)
ファイルを保存します。
(オプション) 結果を確認します。
結果を検証するために、MVC プロジェクトを実行して、ファイルを開きます。上記のプレビューに示すような結果になっているはずです。
以下のキーボード操作が可能です。 グリッドにフォーカスがある場合:
列ヘッダーの [集計の表示/非表示] ボタンにフォーカスがある場合:
列フッターの [集計の表示/非表示] ボタンにフォーカスがある場合:
集計ドロップダウンにフォーカスがある場合:
以下は、その他の役立つトピックです。
オンラインで表示: GitHub