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

shiva 发表于 Dev

湿婆

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

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

奥纳拜

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

由于您在评论中提到要复制的行都带有复选框，因此您可以执行以下操作：

// 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]);
}

$(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]);
    }
  });
});

html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。