前回の続きです。
とりあえずダウンロードボタン仕込んだけど、余計な情報がセルに入ってたのでデータを整理してダウンロードできるようにしました。
更新内容は「ExcelっぽいHTMLテーブル」のページに反映してます。
ダウンロードボタンがダウンロードされちゃって邪魔くさいので一旦消して、
セルの内容を変換・セルアドレスを振る前の状態に戻します。
で、ダウンロードの処理が終わったら「editable_table.Initalize();」を呼び出して
もっかいセルアドレスの付与とダウンロードボタンを生成する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
Export_XLSX: function(){ // 式に戻してExport ⇒ セルの再計算をする。 $('.in-out-xlsx').remove(); for (adrs in editable_table_val) { $("td[data-address='" + adrs + "']").empty().text(editable_table_val[adrs].value); } var wopts = { bookType: 'xlsx', bookSST: false, type: 'binary'}; var workbook = {SheetNames: [], Sheets: {}}; var filename = ($("table.editable-table[export_filename]").length)?$("table.editable-table").attr("export_filename"):"html_table.xlsx" $('table.editable-table').each(function () { var n = $(this).attr('data-sheet-name'); n = (n)?n:'Sheet'+(workbook.SheetNames.length+1); workbook.SheetNames.push(n); workbook.Sheets[n] = XLSX.utils.table_to_sheet($(this).get(0), wopts); }); var wbout = XLSX.write(workbook, wopts); var s2ab = function (s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) { view[i] = s.charCodeAt(i) & 0xFF; } return buf; } saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), filename); editable_table.AddressSetting(); editable_table.Recalculation(); editable_table.OptionSheetJS(); }, |
editable_table.Initalize()を再利用してセル情報を復元しようと思ったけど
click、dblclickイベントが重複登録されてしまうようになってしまった。
セルの情報を定義する部分だけeditable_table.Initalize()から抜き出して再利用できる様にする。
抜き出して再定義したfunctionはこの二つ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
AddressSetting: function () { $('.editable-table').find('td').each(function(){ var $td = $(this); var tr = $(this).parent(); var row = $('.editable-table').find('tr').index(tr); var col = $(tr).find('td').index(this); var adrs = editable_table.BuildAddress(row, col); $td.attr("data-address", adrs).css("position", "relative"); editable_table_val[adrs] = { value: $td.html(), row: row, col: col }; var $span = $("<span />").addClass("cell-address").text(adrs).hide(); $td.html("").append($span).append($("<div />")); }); }, |
|
1 2 3 4 5 6 7 8 9 10 11 |
OptionSheetJS: function() { // FileSaver.min.js , xlsx.full.min.js 依存の機能 if (typeof(saveAs) == "function" && typeof(XLSX) == "object") { var $expt_btn = $("<button />").attr("id", "editable_table_export").attr("type", "button") .addClass("export-xlsx").text("to XLSX"); var $inex_div = $("<div />").addClass("in-out-xlsx").append($expt_btn); $('.editable-table').each(function () { $(this).css("margin-top", "34px"); }); $('.editable-table tr th:first').each(function (){ $(this).css("position", "relative").append($inex_div); }); $('button.export-xlsx').click(function () { editable_table.Export_XLSX() }); } }, |
うん。これでキレイにデータダウンロードできるようになりましたっ。
次は、xlsxファイルからテーブルに再現する方の処理も組み込んでみよっかなー。