Копирование данных из древовидного списка кендо с сохранением структуры таблицы

У меня есть редактируемый мультивыбираемый кендо Treelist. Я хотел бы иметь возможность выбрать часть сетки и скопировать ее данные в ту же сетку (другие столбцы и строки) или в текстовый файл. Важно вставить его с той же структурой в новую таблицу. Функция копирования не поддерживается для кендо Treelist.

Есть ли способ сделать это с помощью JavaScript и jQuery?

Демонстрация кендо

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
84
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я использовал две кнопки, одну для копирования и одну для вставки. Функции событий приведены ниже. Это решило мою проблему, и я также могу вставить скопированный текст в 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= "";
    }
  

Другие вопросы по теме