jquery 从Kendo树列表复制数据并保持表格结构

hgb9j2n6  于 2023-01-25  发布在  jQuery
关注(0)|答案(1)|浏览(191)

我有一个可编辑的多选择剑道树列表。我希望能够选择网格的一部分,并复制粘贴其数据在同一网格(其他列和行)或文本文件。这是很重要的粘贴它与相同的结构在新的表。复制功能不支持剑道树列表。

有没有办法使用JavaScript和jQuery来实现这一点?
Kendo demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    selectable: "multiple, cell",
    editable:"incell",
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22 },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
    ]
  });
</script>
</body>
</html>
vawmfj5a

vawmfj5a1#

Kendo UI TreeList没有内置的复制和粘贴功能支持。但是,您可以使用JavaScript和Kendo UI API实现此功能。以下是如何在TreeList中实现复制和粘贴的示例:
1-实现复制按钮,该按钮将复制TreeList中的选定单元格。

<button id="copyButton">Copy</button>

$("#copyButton").click(function(){
    // get the selected cells
    var treeList = $("#treeList").data("kendoTreeList");
    var selectedCells = treeList.select();
    
    // create an array to store the copied data
    var copiedData = [];
    
    // iterate through the selected cells and push the data to the copiedData array
    selectedCells.each(function(index, element){
        var dataItem = treeList.dataItem(element);
        copiedData.push(dataItem.toJSON());
    });
    
    // store the copiedData array in the clipboard
    window.clipboardData = copiedData;
});

实现一个粘贴按钮,将复制的数据粘贴到TreeList中选定的单元格。

<button id="pasteButton">Paste</button>

$("#pasteButton").click(function(){
    // get the selected cells
    var treeList = $("#treeList").data("kendoTreeList");
    var selectedCells = treeList.select();
    
    // iterate through the selected cells and update the data
    selectedCells.each(function(index, element){
        var dataItem = treeList.dataItem(element);
        var copiedData = window.clipboardData[index];
        dataItem.set("name", copiedData.name);
        dataItem.set("age", copiedData.age);
    });
});

相关问题