2015-07-13 55 views
3

我在Handsontable中有一些單元格,它們使用「html」渲染器顯示。當我複製這些單元格並將它們粘貼到Excel中時,我得到的是html內容而不是數據。有沒有辦法顯示單元格,並在複製時獲得它們的值?如何複製HTML格式化單元格的數據而不是標記

的jsfiddle例如: example

document.addEventListener("DOMContentLoaded", function() { 
    var 
    data = [ 
     { 
     title: "Title 1", 
     description: "<div style='text-align:right'>148</div>" 
     }, 
     { 
     title: "Title 2", 
     description: "<div style='text-align:right'>2002</div>" 
     } 
    ], 
    container1, 
    hot1; 

    container1 = document.getElementById('example1'); 
     hot1 = new Handsontable(container1, { 
     data: data, 
     colWidths: [200, 200], 
     colHeaders: ["Title", "Description"], 
     columns: [ 
      {data: "title", renderer: "html"}, 
      {data: "description", renderer: "html"} 
     ] 
    }); 
}); 
+1

那麼你已經訪問剪貼板修改了它相應的我認爲 – Raghavendra

+1

很不幸,這是如此,如果你想複製的預期行爲顯示的值而不是單元格的實際值,則必須修改複製/粘貼插件或捕獲組合鍵並將其傳遞到修改後的數據版本中。如果你想複製粘貼整個表格,你可以考慮添加一個「export to csv」按鈕,這在JS – ZekeDroid

回答

1

你可以試着將你的輸入數據轉換成JSON格式,並具有顯示從JSON值自定義呈現。將toString屬性添加到將完全返回您想要複製的數據。

這裏是一個更新的小提琴:http://jsfiddle.net/mpusarla/gng4wqzy/6/

document.addEventListener("DOMContentLoaded", function() { 
 
    var item1 = {}; 
 
    item1.title = "Title 1 "; 
 
    item1.description = {}; 
 
    item1.description.text = "Desc 1"; 
 
    item1.description.toString = function() { 
 
    return 'Updated Desc for 1'; 
 
    } 
 

 
    var item2 = {}; 
 
    item2.title = "Title 2"; 
 
    item2.description = {}; 
 
    item2.description.text = "Desc 2"; 
 

 
    item2.description.toString = function() { 
 
    return 'Updated Desc for 2 '; 
 
    } 
 

 
    var data = []; 
 
    data.push(item1); 
 
    data.push(item2); 
 
    var container1, hot1; 
 

 
    function customRenderer(instance, td, row, col, prop, value, cellProperties) { 
 
    td.innerHTML = '<div style="text-align:right">' + value.text; 
 
    } 
 

 
    container1 = document.getElementById('example1'); 
 
    hot1 = new Handsontable(container1, { 
 
    data: data, 
 
    colWidths: [200, 200], 
 
    colHeaders: ["Title", "Description"], 
 
    columns: [{ 
 
     data: "title", 
 
     renderer: "text" 
 
    }, { 
 
     data: "description", 
 
     renderer: customRenderer 
 
    }] 
 
    }); 
 
});
</style><!-- Ugly Hack due to jsFiddle issue --> <script src="http://docs.handsontable.com/0.15.0/scripts/jquery.min.js"></script> <script src="http://docs.handsontable.com/0.15.0/bower_components/handsontable/dist/handsontable.full.js"></script> <link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/0.15.0/bower_components/handsontable/dist/handsontable.full.min.css">
<div id="example1" class="hot handsontable"></div>

+0

中很容易實現。正是我在找的東西。謝謝! – siogun

相關問題