FlexGrid
一括編集
機能
説明
Excel 形式の編集: FlexGrid では、Excel 形式の高速なセル内編集が組み込みでサポートされています。 余分な列を追加して、そこに表示モードと編集モードを切り替えるための[編集]ボタンを置く必要はありません。
ユーザーは、任意のセルでキー入力するだけで編集を開始できます。これは、 「クイック編集」モードと呼ばれます。 このモードでは、矢印キーを押すと編集が終了し、グリッドの選択範囲が移動します。 [F2]キーを押すか、セルをダブルクリックすることで、編集を開始することもできます。 これは、「完全編集」モードと呼ばれます。 このモードでは、矢印キーを押すとエディタ内のカレットが移動し、編集を終了するには、ユーザーは [Enter]、[Tab]、または[Escape]キーを押す必要があります。
データを編集するには、次の 2 つのモードがあります。
標準
このモードでは、更新または作成された項目は、対応する行の編集の終了後にサーバーにコミットされます。削除された行は、即座にサーバーにコミットされます。
ユーザーがデータを更新する場合は、更新アクション URL が提供される必要があります。データを追加または削除する場合は、作成または削除アクション URL が提供される必要があります。 その後、ユーザーは対応するアクションでデータを編集する必要があります。これは、デフォルトモードです。
一括更新
FlexGrid には一括編集に対する組み込みのサポートがあり、ユーザーは複数の項目を更新、作成、または削除し、すべての変更を一度にデータソースにコミットできます。複数の変更のコミットは、グリッドをソート、ページング、またはフィルタ処理して行ったり、ボタンを 1 回クリックするだけで行うことができます。
このモードでは、BatchEditing アクション URL を提供する必要があります。
using System; using System.Collections.Generic; using System.Linq; using C1.Web.Mvc.Serialization; using C1.Web.Mvc; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using Microsoft.EntityFrameworkCore; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { // // GET: /BatchEditing/ public ActionResult BatchEditing() { return View(); } public ActionResult BatchEditing_Bind([C1JsonRequest] CollectionViewRequest<Category> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, _db.Categories.ToList())); } public ActionResult GridBatchEdit([C1JsonRequest]CollectionViewBatchEditRequest<Category> requestData) { return this.C1Json(CollectionViewHelper.BatchEdit(requestData, batchData => { var itemresults = new List<CollectionViewItemResult<Category>>(); string error = string.Empty; bool success = true; try { if (batchData.ItemsCreated != null) { batchData.ItemsCreated.ToList().ForEach(st => { _db.Categories.Add(st); itemresults.Add(new CollectionViewItemResult<Category> { Error = "", Success = success, Data = st }); }); } if (batchData.ItemsDeleted != null) { batchData.ItemsDeleted.ToList().ForEach(category => { _db.Categories.Remove(category); itemresults.Add(new CollectionViewItemResult<Category> { Error = "", Success = success, Data = category }); }); } if (batchData.ItemsUpdated != null) { batchData.ItemsUpdated.ToList().ForEach(category => { _db.Entry(category).State = EntityState.Modified; itemresults.Add(new CollectionViewItemResult<Category> { Error = "", Success = success, Data = category }); }); } _db.SaveChanges(); } catch (Exception e) { error = GetExceptionMessage(e); success = false; #if RELOAD_ON_ERROR try { var refreshableObjects = _db.ChangeTracker.Entries().Where(c => c.State == EntityState.Modified).ToList(); refreshableObjects.ForEach(o => o.Reload()); } catch (Exception er) { error = error + Environment.NewLine + er.Message; } #endif } return new CollectionViewResponse<Category> { Error = error, Success = success, OperatedItemResults = itemresults }; }, () => _db.Categories.ToList())); } } }
@section Styles{ <style> .queryErrorMessage { color: #f00; } </style> } @section Scripts{ <script type="text/javascript"> var isUpdating = false, cv, batchEditGrid, minHeight; c1.documentReady(function () { batchEditGrid = wijmo.Control.getControl('#batchEditGrid'); cv = batchEditGrid.collectionView; minHeight = batchEditGrid.rows.defaultSize; autoSizeBatchEditGridRows(); cv.collectionChanged.addHandler(autoSizeBatchEditGridRows); }); function autoSizeBatchEditGridRows(s, e) { if (e && e.action == 0) return; batchEditGrid.autoSizeRows(); for (var i = 0, len = batchEditGrid.rows.length; i < len; i++) { var row = batchEditGrid.rows[i]; var height = row.height == undefined ? 0 : row.height; row.height = Math.max(28, height); } } function batchUpdate() { cv.commit(); var isChanged = (cv.itemsAdded && cv.itemsAdded.length) || (cv.itemsRemoved && cv.itemsRemoved.length) || (cv.itemsEdited && cv.itemsEdited.length); if (isChanged) { isUpdating = true; setQueryMessage('@FlexGridRes.BatchEditing_Updating'); } else { setQueryMessage('@FlexGridRes.BatchEditing_NoChanges'); } } function onQueryComplete(sender, e) { if (isUpdating) { if (e.result.success) { setQueryMessage('@FlexGridRes.BatchEditing_Done'); } else { setQueryMessage(e.result.error, 'queryErrorMessage'); } } isUpdating = false; } function setQueryMessage(message, className) { var element = document.getElementById('queryMessage'); element.innerHTML = message; element.className = className; } </script> } <input type="button" value="@FlexGridRes.BatchEditing_Update" class="btn" onclick="batchUpdate()" /> <span id="queryMessage"></span> <c1-flex-grid id="batchEditGrid" auto-generate-columns="false" class="grid" allow-add-new="true" allow-delete="true"> <c1-flex-grid-column binding="CategoryID" is-read-only="true" format="d"></c1-flex-grid-column> <c1-flex-grid-column binding="CategoryName"></c1-flex-grid-column> <c1-flex-grid-column binding="Description" width="*" multi-line="true"></c1-flex-grid-column> <c1-items-source disable-server-read="true" read-action-url="@Url.Action("BatchEditing_Bind")" batch-edit-action-url="@Url.Action("GridBatchEdit")" query-complete="onQueryComplete"></c1-items-source> </c1-flex-grid> @section Description{ <p>@Html.Raw(FlexGridRes.BatchEditing_Text0)</p> <p>@Html.Raw(FlexGridRes.BatchEditing_Text1)</p> <p>@Html.Raw(FlexGridRes.BatchEditing_Text2)</p> <h4>@Html.Raw(FlexGridRes.BatchEditing_Normal)</h4> <p>@Html.Raw(FlexGridRes.BatchEditing_Text3)</p> <p>@Html.Raw(FlexGridRes.BatchEditing_Text4)</p> <h4>@Html.Raw(FlexGridRes.BatchEditing_Batch)</h4> <p>@Html.Raw(FlexGridRes.BatchEditing_Text5)</p> <p>@Html.Raw(FlexGridRes.BatchEditing_Text6)</p> }