剑道网格与MVVM、AJAX——网格操作

正在使用KendoUI MVVM寻找此问题的解决方案： 有两个网格–第一个网格中的数据是从控制器的操作（如GetData）返回的。此网格有一个带有复选框的列。 用户可以通过选中复选框来选择第一个网格中的行。单击按钮–从第一个网格中选择的所有行都应添加到第二个网格中。第二个网格有3个额外的列，其他列与第一个网格中的列非常相似。 请有人把这个问题的解决办法贴出来好吗。非常紧急

public class MyModel
    {
        public string CustomerID { get; set; }
        public string CustomerName { get; set; }
        public bool? ChooseItem { get; set; }
        public int Quantity{ get; set; }
    }

网格1

网格2

---

试着这样做，这只是一个例子

我的看法

---

新网格是绑定在复选框上的复选框不在按钮单击。

谢谢，我会尝试返回。添加到另一个网格必须在网格外的按钮上进行，而不是每次单击复选框。单击按钮时，它必须捕获所有选中的行，然后将其添加到另一个网格中。另外，复选框列的标题也是一个复选框，所以如果选中/取消选中，则该列中的所有复选框都将选中/取消选中。我只给您演示复选框复选框，您可以在按钮上执行。如果您对按钮单击有任何问题，请告诉我。您能帮助我了解NewGridView返回的内容吗？mygrid是如何定义的？什么是“网格”$mygrid.valnull；var customDataList=$'grid'；customDataList.empty；customDataList.appendresult.Data；customDataList.appendresult.Data；我试过上面的例子。它不会填充目标网格中的任何数据！

    @(Html.Kendo().Grid<MyModel>
        ()
        .Name("grid1")
        .Columns(columns =>
        {
        columns.Bound(p => p.CustomerID).Filterable(false).Title("<b>CustID</b>").Width(170);
        columns.Bound(p => p.CustomerName).Title("<b>Description</b>").Width(250);
        columns.Bound(p => p.ChooseItem)
        .ClientTemplate("<input type='checkbox' id='rowSelected' />");
        })
        .Selectable()
        .Pageable()
        .Sortable(x => x.SortMode(GridSortMode.SingleColumn))
        .Scrollable()
        .HtmlAttributes(new Dictionary<string, object> { { "data-bind", "source: gridSource1" } })
            .EnableCustomBinding(true)
            .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(15)
            .Read(read => read.Action("GetData", "Home"))
            )
            )

<button id="btnAddMulti" type="button">Add LineItem </button>

    @(Html.Kendo().Grid<MyModel>
        ()
        .Name("grid2")
        .Columns(columns =>
        {
        columns.Bound(p => p.CustomerID).Filterable(false).Title("<b>CustID</b>").Width(170);
        columns.Bound(p => p.CustomerName).Title("<b>Description</b>").Width(250);
        columns.Bound(p => p.Quantity)
        .ClientTemplate("<input type='text' id='itemQty' />");
        columns.Bound(p => p.CustomerID)
        .ClientTemplate("<input type='button' id='btnAdd' />");
        columns.Bound(p => p.CustomerID)
        .ClientTemplate("<input type='button' id='btnDelete' />");
        })
        .Scrollable()
        .HtmlAttributes(new Dictionary<string, object> { { "data-bind", "source: gridSource2" } })
            .EnableCustomBinding(true)          
            )
            )

var viewModel = kendo.observable({

        gridSource1: [],
    gridSource2: [],
})
$('#btnAddMulti').click(function () {
        var sourcegrid = $('#grid1').data('kendoGrid'); 
        var destinationgrid = $('#grid2').data('kendoGrid'); 

//ToDo: copy all the rows in destinationgrid which are marked checked in sourcegrid

 @(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
    .Name("grid12")
    .Columns(columns =>
    {
        columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbxq' type='checkbox'  />").ClientTemplate("<input id='checkbox_#=inx#' class='chkbxq' type='checkbox' />");
        columns.Bound(p => p.SampleDescription);
        columns.Bound(p => p.SampleCode);
        columns.Bound(p => p.SampleItems);
    })
     // .ClientDetailTemplateId("client-template")
        // .AutoBind(true)
        .Pageable()
            .Navigatable()
        //.Filterable()
             .Sortable()
             .Groupable()
        //.Events(events => events.DataBound("_GridItemDataBound"))
       .DataSource(dataSource => dataSource
        .Ajax()
            .Model(model => model.Id(p => p.inx))
           //.PageSize(1)
            .Read(read => read.Action("Read", "Test"))
     )
  )


 <div id="divasd">
    </div>

<script type="text/javascript">
    $(document).ready(function () {

 $('#grid12').on("click", ".chkbxq", function (e) {
                    var selectedTd = $(this).is(':checked');

                    var rowIndex = $(this).parent().index();
                    var cellIndex = $(this).parent().parent().index();
                    var grid = $("#grid12").data("kendoGrid");
                    var datatItem = grid.dataItem(grid.tbody.find('tr:eq(' + cellIndex + ')'));

                    if (selectedTd == true) {
                        sampleItem = datatItem.SampleItems;
                        sampleCode = datatItem.SampleCode;
                        sampledescription = datatItem.SampleDescription;

                        datavalueitem = sampleItem + "--" + sampleCode + "--" + sampledescription;

                        $.ajax({
                            url: '@Url.Action("NewGridView", "Test")',
                            type: "Post",
                            data: { sampleItem: sampleItem, sampleCode: sampleCode, sampledescription: sampledescription },
                            dataType: 'json',
                            success: function (result) {

                                $("#mygrid").val(null);
                                var customDataList = $('#grid');
                                customDataList.empty();
                                customDataList.append(result.Data);
                                customDataList.append(result.Data);
                                $("#divasd").html('');
                                $("#divasd").append(result.Data);



                                $('#grid12').data("kendoGrid").dataSource.read();
                                $('#grid12').data("kendoGrid").refresh();
                                                                $("#divasd").kendoGrid({
                                                                    dataSource: result,
                                                                    sortable: true,
                                                                    pageable: {
                                                                        refresh: true,
                                                                        pageSizes: true
                                                                    },
                                                                    columns: [{
                                                                        field: "SampleDescription",
                                                                        width: 90,
                                                                    }, {
                                                                        field: "SampleCode",
                                                                        width: 90,
                                                                    }, {
                                                                        width: 100,
                                                                        field: "SampleItems"
                                                                    }
                                                                ]
                                                                });


                            }
                        });
                    }


                });

   });
</script>

 public class SampleModel
    {
        public int inx { get; set; }
        public bool studentclass { get; set; }
        public string SampleDescription { get; set; }
        public string SampleCode { get; set; }
        public string SampleItems { get; set; }
}