Question

我正在尝试动态地将列添加到handontable。我没有在任何地方看到样本，也没有在API中看到这样做的方法。有没有人想出办法克服这个问题，或者有一些我能看到的示例代码会有所帮助。

谢谢。

Answer 1

您是否尝试过使用handsontable('alter', 'insert_col', index, amount)方法？您可以使用alter方法添加和删除列和行。请参阅handontable项目的documentation page。

Answer 2

临时解决方案是动态维护数据表。需要新列时，更新数据结构并重新启动整个表。也许以下片段可能对您有所帮助。

(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);

Answer 3

如果您定义列设置，那么它将不会添加列运行时要解决此问题，请参阅链接How to create dynamic columns for Handsontable?

Answer 4

<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);

Answer 5

您应该使用<?php if(isset($_POST['search'])) { $xml=simplexml_load_file("studentInstance.xml") or die("Error: Cannot Create Object"); //query the document $name = $_POST['studentname']; //$xml = simplexml_load_string($xml); $query = $xml->xpath("/students/student[firstname = '$name']"); $array=$query; //echo "<pre>"; //rint_r($array); //echo "</pre>"; $count=0; $size=count($array); //echo $count; echo "<center>"; while($count!=count($array)){ foreach ($array[$count]->children() as $child) {//stores values in child $getElementTag=$child->getName();//get tag so nom echo '<label>'.$getElementTag.'</label>'." "; echo '<input type="text" value= " '.$child.' " size="30"></intput>'; echo "<br>"; echo "<br>"; } $count++; } echo '<input type="submit" name="modify" value="Update Record">'.'<br>'; echo "***************************"; echo "</center>"; } ?> <!DOCTYPE html> <html> <head> <title>Searching</title> </head> <body> <center> <form method="POST" action="searchtest.php"> <label>Enter Student Name</label> <input type="text" name="studentname" pattern="[A-Z][a-z]+" title="Must start with capital letters!" required><br> <br> <input type="submit" name="search" value="search"> </form> </center> </body> </html>功能

假设您有一个2x3表，并且您希望它是5x5。

alter

Answer 6

jExcel是非常相似的电子表格插件。以下示例以编程方式添加/删除列和行。

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>

动态添加列到handsontable

6 个答案: