Geek Answers Handbook

Dynamically add column

I am trying to dynamically add a column to a user-friendly one. I do not see anywhere else and do not see a method that can be done in the API. Has anyone figured out a way to overcome this or have a sample code that I can look at that.

Thanks.

+6
source share
6 answers

A workaround is to dynamically save the data table. When a new column is required, refresh the data structure and recreate the entire table. The following snippets might help you.

(function($) { $(function() { var data = [['a', 'b', 'c', 'd'], [1, 1, 1, 1], [2, 2, 2, 2]]; $('#a-div').handsontable({data: data}); /* add a new column */ data[0].push('e'); var len = data.length; for (var i = 1; i < len; i++) { data[i].push(i); } $('#a-div').handsontable({data: data}); /* if new column isn't at the tail */ data[0].splice(idx, 0, "f"); });})(jQuery);
+3
source

Have you tried using the handsontable('alter', 'insert_col', index, amount) method? You can add and remove columns and rows using the alter method. See the documentation page in the mobile project.

+10
source

if you define column settings, then it will not add column runtimes to fix this, see How do I create dynamic columns for Handsontable?

0
source 
 <div id="handsontable"></div>

Js

 var Data = [{ "header": {scope1: Name, scope2: Address, scope3: Address, scope4: Country}, "tableData":[{....}, {....}] }] var $container = $('#handsontable'); var headerData = []; var tableData = Data.tableData; $.each(Data.header, function(k,v){ headerData.push(v); }); $container.handsontable({ colHeaders: function (col) { var j=0; var colCount = headerData.length; do { if(col == j) return headerData[j]; j++; } while (j<colCount) } }); var hot = $container.data('handsontable'); hot.loadData(tableData);
0
source

You must use the alter function

Suppose you have a 2x3 table and you want it to be 5x5.

 curRows = myTable.countRows() //curRows = 2 curCols = myTable.countCols() //curCols = 3 var newRows = 5 var newCols = 5 if(newRows > curRows){ myTable.alter('insert_row',curRows ,newRows - curRows); } else if (newRows < curRows){ myTable.alter('remove_row', curRows,curRows - newRows ); } if(newCols > curCols){ myTable.alter('insert_col',curCols, newCols - curCols); } else if (newCols < curCols){ myTable.alter('remove_col',curCols, curCols - newCols); }
0
source

jExcel is very similar to a spreadsheet plugin. The following example programmatically adds / removes columns and rows.

https://bossanova.uk/jexcel/examples

 <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/excel-formula.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jexcel.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jdropdown.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jexcel.min.css" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jdropdown.min.css" type="text/css" /> <div id="my"></div> <script> data = [ [ 'Cheese', 10, 1.10, '=B1*C1'], [ 'Apples', 30, 0.40, '=B2*C2'], [ 'Carrots', 15, 0.45, '=B3*C3'], [ 'Oranges', 20, 0.49, '=B4*C4'], ]; $('#my').jexcel({ data:data, colHeaders: [ 'Product', 'Quantity', 'Price', 'Total' ], colWidths: [ 300, 100, 100, 100 ], columns: [ { type: 'autocomplete', source:[ 'Apples','Bananas','Carrots','Oranges','Cheese','Pears' ] }, { type: 'number' }, { type: 'number' }, { type: 'number' }, ] }); $('#my').jexcel('updateSettings', { table: function (instance, cell, col, row, val, id) { if (col == 2 || col == 3) { // Get text txt = $(cell).text(); // Format text txt = numeral(txt).format('0,0.00'); // Update cell value $(cell).html(' $ ' + txt); } } }); </script> <ol> <li><a href='' onclick="$('#my').jexcel('insertColumn'); event.preventDefault(); return false;">Insert a new blank column at the end of the table</a></li> <li><a href='' onclick="$('#my').jexcel('insertColumn', 5, null, 0); event.preventDefault(); return false;">Insert five new blank columns at the beginning of the table</a></li> <li><a href='' onclick="$('#my').jexcel('insertColumn', [ '0.99', '1.22', '3.11', '2.21' ]); event.preventDefault(); return false;">Insert a new column with pre-populated values at the end of the table</a></li> <li><a href='' onclick="$('#my').jexcel('insertRow'); event.preventDefault(); return false;">Insert a new blank row at the end of the table</a></li> <li><a href='' onclick="$('#my').jexcel('insertRow', [ 'Pears', 10, 0.59, '=B2*C2' ], 1); event.preventDefault(); return false;">Insert a new pre-populated row just after the second row.</a></li> <li><a href='' onclick="$('#my').jexcel('insertRow', 10); event.preventDefault(); return false;">Create ten rows at the end of the table</a></li> <li><a href='' onclick="$('#my').jexcel('moveRow', 3, 0); event.preventDefault(); return false;">Move the forth row to the first position</a></li> </ol> </html>
0
source

More articles:


All Articles