将新行添加到剑道网格中，其中的值会清除先前添加的行的值

Question

我正在使用 kendoGrid 并在单击按钮时添加新行，但我的问题是，当我添加第二行时，第一行的值变得清晰，当我添加第三行时，第一行和第二行的值变得相同清除。 这是我的代码。

<script type="text/javascript">
  $(".AddNewRemark").click(function () {
    //grid.addRow();
    var dataSource = grid.dataSource;
    var total = dataSource.data().length;
    dataSource.insert(total + 1, {});
    var it = $(this).text().trim();
    $(".RemarkDescription")[total].value = it;
    $(".RemarkDescription").attr('readonly', 'readonly');
  })
</script>

        @(Html.Kendo().Grid<Invoice.Models.ViewModels.RemarkViewModel>()
                .Name("RemarkAdd")
                .TableHtmlAttributes(new { style = "height:20px; " })
                .Columns(columns =>
                {
                    columns.Bound(p => p.RemarkID).Hidden(true).ClientTemplate("#= RemarkID#" + "<input type='hidden' class='RemarkID' value='#=RemarkID#' />");

                    columns.Bound(p => p.RemarkDescription).Title("Type").Width(10).ClientTemplate("#= RemarkDescription#" + "<input type='text' class='RemarkDescription' value='#data.RemarkDescription#' />");
                    columns.Bound(p => p.Remark).Title("Remark").Width(50).ClientTemplate("#= Remark#" + "<input type='hidden' class='Remark' value='#=Remark#' />");

                })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Navigatable()
                .Sortable()
                .Scrollable(scr => scr.Height(200))
                .Scrollable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .ServerOperation(false)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.RemarkID))
                    .Create("Editing_Create", "Grid")
                    .Read("Remark_Read", "Document")
                                .Update("Editing_Update", "Grid")//.Events(e=>e.Change("Edit"))
                    .Destroy("Editing_Destroy", "Grid")
                    )
            )
            <button class="AddNewRemark">Add Remark</button>

Answer 1

这是因为每次修改dataSource时Grid都会被反弹，并且因为你没有更新底层模型（你只是修改了html）。

最好看看this example：

当数据绑定时：

function editAll() {
  var theGrid = $("#grid").data("kendoGrid");
  $("#grid tbody").find('tr').each(function () {
     var model =  theGrid.dataItem(this); 
      kendo.bind(this,model);
  }); 
  $("#grid").focus();
}