Question

创建表格的最简单方法是什么，用户可以用最少的工作量直接编辑数据（excel）？

有很多库和自定义控件，但我正在寻找易于实现且不需要大量编码的东西。

Answer 1

在控制器创建方法中，用于添加将参数传递到GET的位置：

public bool EditData(int pkId, int statusID,  string Comments)
{
    // logic to edit
}

在你的视图中添加一个数据表，你的控件将主键添加到控件的ID中，以便你可以在jquery中使用它

<table class="table">
    <tr>
      <th>Status</th>
      <th>Comments</th>     
      <th></th>
    </tr>
    @foreach (var item in Model)
    {
        <tr class="searchable">
            <td>
                @Html.DropDownList("StatusID" + @Html.DisplayFor(modelItem => item.pkID), new SelectList(ViewBag.Status, "StatusID", "StatusTitle", item.StatusID), htmlAttributes: new { @class = "form-control", style = "width:100px" })
            </td>
            <td>
                <textarea id="Comments_@Html.DisplayFor(modelItem => item.pkID)" rows="5" cols="20">@Html.DisplayFor(modelItem => item.Comments)</textarea>
            </td>
            <td>
                <input type="button" class="btn btn-default" value="save" onclick='updateData("@Html.DisplayFor(modelItem => item.pkID)" )' />
            </td>
        </tr>
   }
</table>

在javascript中添加对编辑方法的调用

function updateData(pkID) {
    // the id of the drop down list is AssetEffectiveness + effectivnessid
    var Status = $("#StatusID" + pkID).val();
    var Comments= $("#Comments_" + pkID).val();
    $.ajax({
        url:  "YOU_CONTROLLER_URL/EditData?pkId=" + pkID + "&statusID=" + Status + "&Comments=" + Comments,
        cache: false
    })
    .done(function (data) {
        if (data == 'True') {
            // change bg of the tr
            $("#Commects_" + pkID).closest('tr').css('background-color', '#eeffee');
            // animate to indicate the save
            $("#Commects_" + pkID).closest('tr').fadeOut(500).fadeIn(500);
            // return color back after 2 seconds
            setTimeout(function () { $("#Commects_" + pkID).closest('tr').css('background-color', ''); }, 1000);
        }
        else {
            alert('not saved');
            $("#Commects_" + pkID).closest('tr').css('background-color', '#ffcccc');
        }
    });    
}

用于MVC的内联编辑表/网格

1 个答案: