如何更改淘汰赛js网格中的列名

Question

我们有这个要求：

• 我们已经预定义了一组列名，例如（FirstName,LastName,age ...这些列名只是示例）。
• 用户将上传一个 excel 文件。
• 在服务器上，我们保存该 excel 文件并处理 excel 的数据并将其作为网格返回。
• 然后，用户将从预定义的可用列名集中为每一列设置列名。
• 完成所有更改后，用户将保存数据。

谁能指导我如何使用敲除（或任何客户端技术）更改网格的列名。

Answer 1

我重新创建了答案...错过了关于在客户端选择列名的要点。

我在选择框中创建了一个列名数组self.columnNames。 选定的列名self.selectedColumnNames 只是一个包含可观察对象的数组。这些对象填充了每列的默认值。 数据本身是一个数组数组，包含数据行。

在表格的每个头部都有一个选择绑定列名和所选列。

下面是一个无序列表，显示绑定正在工作。

JavaScript：

function model(){
    var self=this;
    self.columnNames = ["firstname","lastname","age","size","city"];

    self.selectedColumnNames = [
        {columnName:ko.observable("firstname")},
        {columnName:ko.observable("lastname")},
        {columnName:ko.observable("age")}];
    
    self.items =[
        ["Beer", "Bottle", 19],
        ["Wiskey", "Jar", 70],
        ["Wine", "Bottle", 45],
        ["Soda", "Can", 2]];
}

ko.applyBindings(new model());

HTML：

<table id="tabel">
    <thead>
        <tr>

            <!-- ko foreach: selectedColumnNames -->
                <th><select data-bind="options: $root.columnNames, value: $data.columnName"></select>
                </th>
            <!-- /ko -->
        </tr>
    </thead>

    <tbody>
        <!-- ko foreach: items -->
            <tr>
                <!-- ko foreach: $data -->
                    <td><span data-bind="text:$data"></span></td>
                <!-- /ko -->
            </tr>
        <!-- /ko -->
    </tbody>
</table>
<br/>
<ul data-bind = "foreach:selectedColumnNames">
    <li><span data-bind="text:columnName"></span> </li>
</ul>

小提琴：

http://jsfiddle.net/8Skb4/3/