从一个网格中选择行并将它们传递到另一个网格

Question

我试图允许通过复选框选择行，并在单击“提交”按钮时将这些选定的行及其 ID 发送到另一个网格。换句话说，充当某种过滤器。

我已联系 Telerik 的支持团队，并被建议采取以下步骤以使其正常工作：

1. 用Grid的Select()方法获取选中的行
2. 遍历它们并使用 dataItem 方法获取底层项目
3. 将它们保存到数组中
4. 摧毁网格
5. 通过设置数据数据初始化一个新的网格

这是JSBin 上的示例，显示了我的想法。

我不知道从哪里开始说实话。如果有人可以为我指明正确的方向，找到任何有用的资源或指南，我将不胜感激。谢谢！

Answer 1

假设您使用的是 RadGrid，请确保您已打开客户端选择，您会看到如下内容：

   <ClientSettings>
       <Selecting AllowRowSelect="True" />
       <ClientEvents OnRowSelected="RowSelected" />
    </ClientSettings>

在输入按钮上，确保调用你的JS方法如下：

  <input onclick="GetSelected();" .... >

您的 JS 代码可能如下所示：

  function GetSelected() {
      var grid = $find("<%=Your Grid's ClientID Here%>");
      var MasterTable = grid.get_masterTableView();
      var selectedRows = MasterTable.get_selectedItems();  // 1. Get the selected rows. The selected item can be accessed by calling the get_selectedItems() method of the GridTableView client-side object. 
      for (var i = 0; i < selectedRows.length; i++) {
        var row = selectedRows[i];
     // This is where you would have to insert it in a collection so that you can bind it to another grid... You will need to call .Rebind() once you assign the new datasource to the other grid.
      }

希望这会给您一些想法。如果您遇到困难，我可以看看是否可以找到任何将行插入其他网格的示例。

Answer 2

检查此代码

html

<div id="grid1"></div>      
<input type="button" value="Submit" onclick="Move()" />
<div id="grid2" ></div>

脚本

<script>
        $(document).ready(function() {

            var data1 = [
         { id: 1, rating: 3, year: 1997, title: "Rock" }
        , { id: 2, rating: 5, year: 1999, title: "X-Man" }
        , { id: 3, rating: 4, year: 2011, title: "World War Z" }
    ];

            var grid1=$("#grid1").kendoGrid({
                sortable: true
                        , silectable: true
                        , selectable: "multiple row"
                        , filterable: true 
                        , pageable: true
                        , columns: [
                        { template: "<input type='checkbox' class='checkbox' />", width: "40px" }
                         ,{ field: "id", title: "Id", filterable: false }
                       , { field: "rating", title: "Rating", filterable: false }
                      , { field: "year", title: "Year", filterable: true, type: "string"}
                      , { field: "title", title: "Title" }
                        ]
                       , dataSource: { page: 1,
                           pageSize: 5,
                           data: data1
                       }

                   }).data("kendoGrid");
                   grid1.table.on("click", ".checkbox", selectRow);

            var data2 = [
         { id: 101, rating: 6, year: 2012, title: "The Impossible" }
        , { id: 102, rating: 8, year: 2013, title: "Escape" }
        , { id: 103, rating: 7, year: 2013, title: "Gravity" }
    ];
            $("#grid2").kendoGrid({
                sortable: true
                        , silectable: true
                        , selectable: "multiple row"
                        , filterable: true 
                        , pageable: true
                        , columns: [
                         { field: "id", title: "Id", filterable: false }
                       , { field: "rating", title: "Rating", filterable: false }
                      , { field: "year", title: "Year", filterable: true, type: "string"} 
                      , { field: "title", title: "Title" }
                        ]
                       , dataSource: { page: 1,
                           pageSize: 5,
                           data: data2
                       }

            });

        });

        function Move() {
            var grid1 = $("#grid1").data("kendoGrid");
            var rows = grid1.select();

            rows.each(function(index, row) {
                var selectedRow = grid1.dataItem(row);
                //-move to grid2
                var grid2 = $("#grid2").data("kendoGrid");
                var ins = { id: selectedRow.id, rating: selectedRow.rating, year: selectedRow.year, title: selectedRow.title }; //id=1,rating=9.2,year=1995,title="The Godfather"
                grid2.dataSource.insert(ins);
            });

            rows.each(function() {
                grid1.removeRow($(this).closest('tr'));
            });
        }

        function selectRow() {
            var checked = this.checked,
                row = $(this).closest("tr");
            if (checked) {
                //-select the row
                row.addClass("k-state-selected");

            } else {
                //-remove selection
                row.removeClass("k-state-selected");
            }
        }  
    </script>

这会帮助你:)