如何在劍道網格中獲取複製單元格的原始值

Question

如何在劍道網格中複製單元格時獲取底層值？

我有下面的代碼

$(document).ready(function() { 

        $("#cellSelection").kendoGrid({ 
         dataSource: { 
          data: orders, 
          pageSize: 6 
         }, 
         selectable: "multiple cell", 
         allowCopy: true, 
         pageable: { 
          buttonCount: 5 
         }, 
         scrollable: false, 
         navigatable: true, 
         columns: [ 
          { 
           field: "ShipCountry", 
           title: "Ship Country", 
           width: 300 
          }, 
          { 
           field: "Freight", 
           width: 300 
          }, 
          { 
           field: "OrderDate", 
           title: "Order Date", 
           format: "{0:dd/MM/yyyy}" 
          } 
         ] 
        }); 

        //events to capture when Ctrl + C is pressed 
        $("#cellSelection").bind('copy', function (e) { 
         var grid = $("#cellSelection").data("kendoGrid"); 
         if (grid != null && grid.areaClipBoard != undefined) { 
          console.log("copied content is:"); 
          console.log(grid.areaClipBoard.val()); 
         } 
        }); 
       }); 

所以，當你複製一個單元格，這是在細胞可見被複制的價值。

說，如果您從網格複製的值是40.65那麼只有該值被拷貝到在劍道網格中設置爲true的allowCopy。但根據數據源的原始值爲40.6789。當按下ctrl + c時，我需要將原始值複製到剪貼板。

我寫了複製事件，你可以看到，它只是輸出從網格中複製的內容。有沒有一種方法可以在按下ctrl + c時獲得底層價值？

這是fiddle鏈接。運行小提琴並打開開發工具，然後選擇幾個單元並複製它。你應該能夠看到被複制的內容。

Answer 1

感謝@Cobus Kruger的解決方案。這是我完整的解決方案。

1. 我們必須遍歷網格中的選定項目並獲取底層數據源值並返回結果。

function getTSVFormat(grid) { 
    var selected = grid.select(); 
    var delimeter = '\t'; 
    var allowCopy = grid.options.allowCopy; 
    var onlyVisible = true; 
    if ($.isPlainObject(allowCopy) && allowCopy.delimeter) { 
     delimeter = allowCopy.delimeter; 
    } 
    var text = ''; 
    if (selected.length) { 
     if (selected.eq(0).is('tr')) { 
      selected = selected.find('td:not(.k-group-cell)'); 
     } 
     if (onlyVisible) { 
      selected.filter(':visible'); 
     } 
     var result = []; 
     var cellsOffset = grid.columns.length; 
     var lockedCols = grid._isLocked() && lockedColumns(grid.columns).length; 
     var inLockedArea = true; 
     $.each(selected, function (idx, cell) { 
      cell = $(cell); 
      var tr = cell.closest('tr'); 
      var rowIndex = tr.index(); 
      var cellIndex = cell.index(); 
      if (onlyVisible) { 
       cellIndex -= cell.prevAll(':hidden').length; 
      } 
      if (lockedCols && inLockedArea) { 
       inLockedArea = $.contains(grid.lockedTable[0], cell[0]); 
      } 
      if (grid._groups() && inLockedArea) { 
       cellIndex -= grid._groups(); 
      } 
      cellIndex = inLockedArea ? cellIndex : cellIndex + lockedCols; 
      if (cellsOffset > cellIndex) { 
       cellsOffset = cellIndex; 
      } 
      var cellText = cell.text(); 

      var column = grid.columns[cellIndex]; 
      var data = grid.dataItem(tr); 
      var cellData = data[column.field]; 

      if (!result[rowIndex]) { 
       result[rowIndex] = []; 
      } 
      result[rowIndex][cellIndex] = cellData; 

     }); 
     var rowsOffset = result.length; 
     result = $.each(result, function (idx, val) { 
      if (val) { 
       result[idx] = val.slice(cellsOffset); 
       if (rowsOffset > idx) { 
        rowsOffset = idx; 
       } 
      } 
     }); 
     $.each(result.slice(rowsOffset), function (idx, val) { 
      if (val) { 
       text += val.join(delimeter) + '\r\n'; 
      } else { 
       text += '\r\n'; 
      } 
     }); 
    } 
    return text; 
} 

請注意，我沒有寫我自己的上述功能。我查看了kendo.all.js文件並進行了調試併爲我自己的目的進行了定製。

後你會得到複製的文本我們在拷貝事件來調用這個

$("#cellSelection").bind('copy', function (e) { 
        var grid = $("#cellSelection").data("kendoGrid"); 
        var text = getTSVFormat(grid); 

        //add textarea if its not in yet 
        if (!grid.areaClipBoard) { 
         grid.areaClipBoard = $('<textarea />').css({ 
          position: 'fixed', 
          top: '50%', 
          left: '50%', 
          opacity: 0, 
          width: 0, 
          height: 0 
         }).appendTo(grid.wrapper); 
        } 

        //overwrite the default clipboard content of kendo with our custom data source 
        grid.areaClipBoard.val(text); 
        //call copy to clipboard to copy the contents 
        copyToClipboard(text); 
       }); 

正如您在複製事件中看到的那樣，我們必須覆蓋areaClipBoard屬性的內容以獲得我們自定義的文本。

將內容複製到areaClipBoard後，使用要複製到剪貼板的html調用copyToClipBoard。

function copyToClipboard(html) { 
       var textarea = document.createElement('textarea'); 
       $(textarea).addClass('k-spreadsheet-clipboard').val(html).appendTo(document.body).focus().select(); 
       document.execCommand('copy'); 
       $(textarea).remove(); 
      } 

這一切！您現在可以按照您的需要粘貼到任何Excel表格。它將具有與您在網格中選擇的內容完全相同的空格。

Answer 2

如果你需要證明與40.6789代替40.68 我在下面的示例進行甲的價值......可能是幫助你

https://jsfiddle.net/svat3Len/4/

Answer 3

獲取數據對於選擇的行，使用：

grid.dataItem(grid.select()); 

在你的情況，你使用的小區選擇和grid.dataItem返回null。

這迫使你進入風景秀麗的路線。要獲得該值，您需要：

1. 從所選單元格中查找所選行。
2. 獲取該行的數據。
3. 確定選定的列。
4. 使用列來獲取字段名稱。
5. 從行數據和字段名稱，您終於可以找到原始值。

所以把這個放在一起：

$("#cellSelection").bind('copy', function(e) { 
    var grid = $("#cellSelection").data("kendoGrid"); 
    if (!grid) { 
    return; 
    } 
    if (grid.areaClipBoard) { 
    console.log("copied content is:", grid.areaClipBoard.val()); 
    } 
    var cell = grid.select()[0]; 
    var row = cell.parentNode; 
    var column = grid.columns[cell.cellIndex]; 
    var data = grid.dataItem(row); 
    var cellData = data[column.field]; 
    console.log(cellData);  
}); 

關於這兩點要注意：

1. 我不認爲我的錯誤處理生產就緒。
2. 我只對第一個選定的單元格執行此操作。你實際上使用multiple cell，所以你應該迭代grid.select的結果，並對每個結果進行重複操作，通過選項卡或其他操作進行連接。我不知道。你是想要多個單元格和複製的人。
3. 如果您可以想像隱藏列，那麼我不認爲我的方式來獲得專欄將工作。我其實不知道你應該怎麼做。