FlexGridが連結モードの場合、グリッド内のデータは特定のデータソースから自動的に挿入されます。しかし、非連結FlexGridの場合は、APIで提供されている別の方法を使用してグリッドの列と行を追加/削除する必要があります。
このトピックでは、AJAXを使用して、クライアント側で非連結FlexGridにデータを挿入する方法を説明します。サーバーからのデータは辞書に保存され、クライアントに送信される前にJSONにシリアライズされます。
このトピックは次の手順で構成されます。
- 手順1：MVCアプリケーションの設定
- 手順2：モデルの作成
- 手順3：コントローラーアクションの追加
- 手順4：ビューへのFlexGridの追加
- 手順5：AJAXを使用したFlexGridでのデータ生成
- 手順6：プロジェクトのビルドおよび実行
次の図は、AJAXを使用してクライアント側で非連結FlexGridにデータを挿入する方法を示しています。この例では、「クイックスタート」セクションで追加したSale.csモデルを使用します。
手順1：MVCアプリケーションの設定
Visual Studioで、ComponentOne ASP.NET MVC 5 Web Applicationテンプレートを使用して新しいMVCアプリケーションを作成します。MVCアプリケーションを作成する方法の詳細については、「ComponentOneテンプレートの使用」を参照してください。
先頭に戻る
手順2：モデルの作成
- ［モデル］フォルダに新しいクラスを追加します（例：
Sale.cs）。新しいモデルを追加する方法の詳細については、「コントロールの追加」を参照してください。 -
Sale.csモデル内の次のコードを置き換えます。ここでは、Saleクラスを使用して、データベース内の受注データを表しています。Saleオブジェクトの各インスタンスがFlexGridコントロール内の1つのレコードに対応します。C# コードのコピーpublic class Sale { public int ID { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } public string Country { get; set; } public string Product { get; set; } public string Color { get; set; } public double Amount { get; set; } public double Amount2 { get; set; } public double Discount { get; set; } public bool Active { get; set; } public MonthData[] Trends { get; set; } public int Rank { get; set; } private static List <string> COUNTRIES = new List<string> { "米国", "イギリス", "カナダ", "日本", "中国", "フランス", "ドイツ", "イタリア", "韓国", "オーストラリア" }; private static List<string> PRODUCTS = new List<string> { "Widget", "Gadget", "Doohickey" }; /// <summary> /// データを取得 /// </summary> /// <param name="total"></param> /// <returns></returns> public static IEnumerable<Sale> GetData(int total) { var colors = new[] { "黒色", "白色", "赤色", "緑色", "青い色" }; var rand = new Random(0); var dt = DateTime.Now; var list = Enumerable.Range(0, total).Select(i => { var country = COUNTRIES[rand.Next(0, COUNTRIES.Count - 1)]; var product = PRODUCTS[rand.Next(0, PRODUCTS.Count - 1)]; var color = colors[rand.Next(0, colors.Length - 1)]; var startDate = new DateTime(dt.Year, i % 12 + 1, 25); var endDate = new DateTime(dt.Year, i % 12 + 1, 25, i % 24, i % 60, i % 60); return new Sale { ID = i + 1, 開始日 = startDate, 終了日 = endDate, 国名 = country, 製品名 = product, 色 = color, 金額 = Math.Round(rand.NextDouble() * 10000 - 5000, 2), 金額2 = Math.Round(rand.NextDouble() * 10000 - 5000, 2), 割引 = Math.Round(rand.NextDouble() / 4, 2), アクティブ = (i % 4 == 0), 傾向 = Enumerable.Range(0, 12).Select(x => new MonthData { Month = x + 1, Data = rand.Next(0, 100) }).ToArray(), ランク = rand.Next(1, 6) }; }); return list; } public static List<string> GetCountries() { var countries = new List<string>(); countries.AddRange(COUNTRIES); return countries; } public static List<string> GetProducts() { List<string> products = new List<string>(); products.AddRange(PRODUCTS); return products; } } public class MonthData { public int Month { get; set; } public double Data { get; set; } } public class BasicSale { public int Sale { get; set; } public DateTime Date { get; set; } public BasicSale(int sale, DateTime date) { Sale = sale; Date = date; } public static List<BasicSale> GetBasicSales() { List<BasicSale> list = new List<BasicSale>(); int[] sales = { 96, 19, 54, 83, 15, 56, 36, 4, 29, 93, 38, 71, 50, 77, 69, 13, 79, 57, 29, 62, 4, 27, 66, 96, 65, 12, 52, 3, 61, 48, 50, 70, 39, 33, 25, 49, 69, 46, 44, 40, 35, 72, 64, 10, 66, 63, 78, 19, 96, 26}; for (int i = 0; i < sales.Length; i++) { list.Add(new BasicSale(sales[i], new DateTime(2014, i / 31 + 1, i % 31 + 1))); } return list; } }
手順3：コントローラーアクションの追加
- ControllersフォルダーからHomeController.csを開き、次の参照を追加します。
C# コードのコピーusing C1.Web.Mvc; using C1.Web.Mvc.Serialization; using FlexGridIntro.Models; using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Logging; using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq;
-
Index（）メソッドを次のメソッドに置き換えます
C# コードのコピーprivate static List<Sale> Sales = Sale.GetData(50).ToList<Sale>(); public IActionResult Index() { return View(); } public JsonResult GetJsonData() { return Json(Sales); }
手順4：FlexGridを表示に追加し、AJAXを使用してFlexGridでデータを生成する
- ［View/Home］フォルダから
Index.htmlを開きます。 - このファイルの内容を、FlexGridコントロールを設定する次のコードに置き換えます。以下のコードは、FlexGridのさまざまな列やプロパティを宣言していますが、データをコントロールには連結していません。
CSHTML コードのコピー<script> $.ajax({ type: "POST", url: "/Home/GetJsonData", dataType: "json", success: function (data) { var fg = wijmo.Control.getControl("#flexgrid"); //FlexGridリファレンスを取得します fg.rows.clear(); //FlexGridから既存の行をすべてクリアします var j = 0 for (var i in data) { var obj = [data[i].product, data[i].country, data[i].amount]; var row = new wijmo.grid.Row(); // FlexGridに行を追加します fg.rows.push(row); for (var col = 0; col <= fg.columns.length - 1; col++) { fg.setCellData(j, col, obj[col]); //FlexGridセルにデータを追加します } j++; } }, error: function (err) { alert("err"); } }); </script> <c1-flex-grid auto-generate-columns="false" key-action-tab="Cycle" height="500px" id="flexgrid"> <c1-flex-grid-column name="Product" header="製品名"></c1-flex-grid-column> <c1-flex-grid-column name="Country" header="国名"></c1-flex-grid-column> <c1-flex-grid-column name="Amount" header="金額"></c1-flex-grid-column> </c1-flex-grid>
手順5：プロジェクトのビルドおよび実行
- ［ビルド］→［ソリューションのビルド］をクリックして、プロジェクトをビルドします。
- ［F5］キーを押してプロジェクトを実行した後、［AJAX Load］ボタンをクリックして、FlexGridにデータをロードして表示します。
関連トピック