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

Posted 2023-05-07

【中文标题】从一个网格中选择行并将它们传递到另一个网格

【英文标题】：Selecting rows from one grid & passing them to another grid

【发布时间】：2014-01-21 11:23:18

【问题描述】：

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

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

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

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

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

【参考方案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.
      

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

【讨论】：

我实际上在 Kendo UI Web 中使用网格。不过谢谢你。

在这种情况下，语法会有所不同。可能是这样的...... var myGrid = $("#MyGrid").data("kendoGrid"); var rows = myGrid.select(); rows.each(function(index, row) var selectedItem = myGrid.dataItem(row); // 你可以有类似 otherGrid.insert(...); );

【参考方案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>

这会帮助你:)

【讨论】：

非常感谢，确实为我指明了正确的方向。我不断收到Cannot call method 'value' of undefined 错误，但在将其调整为我自己的代码时。不知道为什么。