如何在 Kendo UI Jquery 的同一网格中复制粘贴整行
How to copy paste an entire row with in the same grid in Kendo UI Jquery
我们在批量编辑时可以将一个单元格的值复制粘贴到其他单元格中。现在想知道天气,我们可以在同一个网格中复制粘贴整行。
找到这个 http://www.telerik.com/forums/copy-and-paste-rows-in-kendo-ui-asp-net-mvc-grid 但它位于网格之间,需要禁用选择和键盘导航,但我需要选择和键盘导航以及选择功能。
最简单的方法是在模型级别工作。 IE。识别与您 select 的行相对应的数据,然后将该数据附加到数据源。
由于您在评论中提到被复制的行标有复选框,您可以做的是:
// 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:" ", 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>
我们在批量编辑时可以将一个单元格的值复制粘贴到其他单元格中。现在想知道天气,我们可以在同一个网格中复制粘贴整行。
找到这个 http://www.telerik.com/forums/copy-and-paste-rows-in-kendo-ui-asp-net-mvc-grid 但它位于网格之间,需要禁用选择和键盘导航,但我需要选择和键盘导航以及选择功能。
最简单的方法是在模型级别工作。 IE。识别与您 select 的行相对应的数据,然后将该数据附加到数据源。
由于您在评论中提到被复制的行标有复选框,您可以做的是:
// 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:" ", 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>