IgGridで選択した行の下に新規行追加する方法
IgGridツール検証時に行った
新規行を表の途中に入れる方法について説明します。
IgGridなどのインストールや使い方については省略させていただきます。
- IgGrid(Razor記法)
<input type = "button" id = "addRow" /> @(Html.Infragistics() .Grid(Model) .ID("IgniteGrid") .Height("500px") .Width("100%") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .RenderCheckboxes(true) .PrimaryKey("Age") .Columns(column => { column.For(x => x.Age).HeaderText("年齢").Width("10%"); column.For(x => x.Name).HeaderText("名前").Width("15%"); }) .Features(feature => { feature.Updating().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("Age").ReadOnly(true); cs.ColumnSetting().ColumnKey("Name").EditorType(ColumnEditorType.DatePicker).Required(true); }); feature.Sorting(); }) .DataBind() .Render() )
上記のコードでIgGridが作成されます。
選択した行の下に行を追加する方法は以下のようになります。
$(function () { //行追加ボタン押下時 $("#addRow").igButton({ labelText: $("#addRow").val(), click: function (event) { var rows = $("#igniteGrid").igGridSelection('selectedRows'); var igGrid = $("#igniteGrid").data('igGrid'); $.each(rows, function (i, val) { //debugger //選択した伝票の行番号を振る var result = val.id.split('-'); var resultId = result[0] + '-' + String(Number(result[1]) + 1); var rowObj2 = { "Age": $("#age").val(), "Name": $("#name").val() }; igGrid.dataSource.insertRow(val.index, rowObj2, val.index + 1, true) igGrid.commit(); }); } }); });
紹介したコードの中で行追加部分、以下になります。
igGrid.dataSource.insertRow(val.index, rowObj2, val.index + 1, true)
ぜひ使用してみてください。