在保持表结构的情况下从剑道树列表复制数据

Question

I have an editable multi selectable kendo Treelist.我有一个可编辑的多选剑道树列表。 I would like to be able to select part of the grid and copy paste its data in the same grid (other columns and rows) or to a text file.我希望能够 select 部分网格并将其数据复制粘贴到同一网格（其他列和行）或文本文件中。 It is important to paste it with the same structure in the new table.重要的是将其以相同的结构粘贴到新表中。 The copy feature is not supported for kendo Treelist. kendo Treelist 不支持复制功能。

Is there a way to do that with use of JavaScript and jQuery?有没有办法通过使用 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>

Answer 1

I have used two buttons, one for copying and one for pasting.我使用了两个按钮，一个用于复制，一个用于粘贴。 The events functions are as below.事件函数如下。 This solved my problem and I can also paste the copied text in excel.这解决了我的问题，我也可以将复制的文本粘贴到 excel。

<button onClick="copying()" >Copy</button>  
<button onClick="pasting()" >Paste</button>  
<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>

 var copiedText="";
  function copying(){
       if(copiedText !== ""){
        return;
       }
        var grid = $("#treeList").data("kendoTreeList");
        var selected = grid.select();
        var previousRowID = selected.eq(0).parent().index();
        var isNewLine = true;
        selected.each(function() {
            var row = $(this).closest("tr");
            var dataItem = grid.dataItem(this);
            if (previousRowID !== $(this).parent().index()) {
                copiedText += "\r\n";
                isNewLine = true;
            }
            previousRowID = $(this).parent().index();
            var colIndx = $("td", row).index(this);
            var column = grid.columns[colIndx];
            var data = dataItem;
            var value =  dataItem[column.field];
            if (!isNewLine) {
                copiedText += "\t";
            }
            copiedText += value;
            isNewLine = false;
        });
        
        var textarea = $("<textarea>");
        var offset = $(this).offset();
        // Position the textarea on top of the Treelist and make it transparent.
        textarea.css({
            position: 'absolute',
            opacity:0,
            border: 'none',
            width: $(this).find("table").width(),
            height: $(this).find(".k-grid-content").height()
        });

        textarea.val(copiedText)
            .appendTo('body')
            .focus()
            .select();

        document.execCommand('copy');
        setTimeout(function(){
            textarea.remove();
        });
    }

function pasting() {
        var pasteVal = copiedText;
        var grid = $("#treeList").data("kendoTreeList");
                if (pasteVal) {
                  var selectedArr= Object.values($(".k-grid td.k-selected"));
                  var pasteArray = pasteVal.split("\r\n").filter(r => r !== "").map(r => r.split("\t"));
                  pasteArray.forEach(function( item, index) {
                         selectedArr[index].innerHTML = item;
                         });
                    grid.refresh();
                }
        copiedText= "";
    }

在保持表结构的情况下从剑道树列表复制数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2023-02-01 16:29:31

在保持表结构的情况下从剑道树列表复制数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2023-02-01 16:29:31

解决方案1
1 已采纳 2023-02-01 16:29:31