javascript - Html，更改表中的列顺序

Question

我正在使用 knockout.js 库来绑定(bind)数据。
让我有下一个例子
JSFiddle Example

我有包含数据的表格。表有列顺序 -

姓名 - 姓氏 - 中间名 - 年龄
我有 4 个功能

var namePosition = function()

var lastnamePosition = function()

var middlenamePosition = function()

var agePosition = function()  

我想将表中列的顺序绑定(bind)到此函数返回的值。
例如
namePosition 返回 4
lastnamePosition 返回 2
middlenamePosition 返回 1
agePosition 返回 3
然后表应该有下一列顺序 -
Middlename - LastName - Age - Name.
你有什么想法，我该怎么做？ (使用 knockout 或 jquery)

Answer 1

Diodeus 所说的是一个很好的方法。您可以使用这些函数生成订单数组:

var order = [];
order[namePosition()] = "name";
order[lastnamePosition()] = "last";
order[middlenamePosition()] = "middle";
order[agePosition()] = "age";

// order===["middle", "last", "age", "name"]

然后将 order observableArray 属性设置为您的对象，使用上述创建时的顺序作为初始值。

最后一件事是将单元格顺序和文本绑定(bind)到新值:

<table>
   <thead>  
     <tr data-bind="foreach:order">
       <td data-bind="text:$root.headers[$data]"></td>
    </tr>
 </thead>
  <tbody data-bind="foreach:users">   
    <tr data-bind="foreach:$root.order">
        <td><span data-bind="text:$parent[$data]"></span></td>
    </tr>
  </tbody>
</table>

Info about $root and $parent .

使用当前方法，您可以通过如下代码动态更改列顺序:

model.order(["name", "last", "age", "middle"])

此处示例:http://jsfiddle.net/Klaster_1/Pw2VE/1/