如何在Kendo UI Jquery中的同一网格中复制粘贴整行

时间:2015-02-11 09:07:49

标签: kendo-ui kendo-grid

我们可以在批量编辑时将单元格的值粘贴到其他单元格中。现在想知道天气,我们可以复制在同一网格中粘贴整行。

找到这个http://www.telerik.com/forums/copy-and-paste-rows-in-kendo-ui-asp-net-mvc-grid,但它在网格之间,需要禁用选择和键盘导航,但我需要选择和键盘导航和选择功能。

1 个答案:

答案 0 :(得分:4)

最简单的方法是在模型级别工作。即识别与您选择的行对应的数据,然后将该数据附加到数据源。

由于您在评论中提到正在复制的行标有复选框,您可以做的是:

// Items to insert
var items = [];
// For the rows with checked item
$(":checked", grid.tbody).each(function(idx, elem) {
     // Get the row 
     var row = $(elem).closest("tr");
     // Get the item for that row
     var item = grid.dataItem(row);
     items.push(item);
});
// Insert it in the DataSource
for (var i = 0; i < items.length; i++) {
    grid.dataSource.add(items[i]);
}

&#13;
&#13;
$(document).ready(function() {
  var grid = $("#grid").kendoGrid({
    dataSource: {
      data: products,
      schema: {
        model: {
          fields: {
            CheckBox: { type: "boolean" },
            ProductName: { type: "string" },
            UnitPrice: { type: "number" },
            UnitsInStock: { type: "number" },
            Discontinued: { type: "boolean" }
          }
        }
      },
      pageSize: 4
    },
    scrollable: true,
    pageable: true,
    columns: [
      { field: "CheckBox", title:"&nbsp;", template: "<input type='checkbox'/>", width: 30 },
      "ProductName",
      { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
      { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
      { field: "Discontinued", width: "130px" }
    ]
  }).data("kendoGrid");

  $("#duplicate").on("click", function() {
    var items = [];
    $(":checked", grid.tbody).each(function(idx, elem) {
      var row = $(elem).closest("tr");
      var item = grid.dataItem(row);
      items.push(item);
    });
    for (var i = 0; i < items.length; i++) {
      grid.dataSource.add(items[i]);
    }
  });
});
&#13;
html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
&#13;
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<button id="duplicate" class="k-button">Duplicate</button>
<div id="grid"></div>
&#13;
&#13;
&#13;