Html，在表格中更改列顺序

I am using knockout.js lib to bind data.
Let's I have next example
JSFiddle Example

我正在使用knockout.js lib来绑定数据。让我有下一个示例JSFiddle示例

I have table with data. Table have columns order -

我有数据表。表有列顺序 -

Name - LastName - Middlename - Age
and i have 4 functions

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

var namePosition = function()

var lastnamePosition = function()

var middlenamePosition = function()

var agePosition = function()

i want bind order of columns in table to values that are returned by this functions.
For example
namePosition returns 4
lastnamePosition returns 2
middlenamePosition returns 1
agePosition returns 3
then table shouls have next column order -
Middlename - LastName - Age - Name.
Have you any ideas, how can I do it? (using knockout or jquery)

我希望表中的列的绑定顺序为此函数返回的值。例如,namePosition返回4 lastnamePosition返回2 middlenamePosition返回1 agePosition返回3然后table shouls有下一个列顺序 - Middlename - LastName - Age - Name。你有什么想法,我该怎么办? (使用淘汰或jquery)

3 个解决方案

#1

What Diodeus said is a good way to go. You can generate order array using those functions:

迪奥杜斯所说的是一个很好的方式。您可以使用以下函数生成订单数组:

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

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

And then set order observableArray property to your object, using aforementioned order at creation as initial value.

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

Last thing is to bind cells order and text to new values:

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

<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.

关于$ root和$ parent的信息。

With current approach you can change columns order dynamically by code like this:

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

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

Example here: http://jsfiddle.net/Klaster_1/Pw2VE/1/

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

#2

You can use a simple JS array as a look-up table:

您可以使用简单的JS数组作为查找表:

var fields = [];
fields['Name'] = 4; 
fields['LastName'] = 2;
...etc...

Then use fields['Name'] instead of the numeric value in your code. No need for functions.

然后使用字段['Name']而不是代码中的数值。不需要功能。

#3

I've approached from the perspective that the table will have headings and that these headings need to be re-ordered too. If this is not the case, you can probably disregard this answer entirely. :)

我从一个角度来看,表格会有标题,这些标题也需要重新订购。如果不是这种情况,您可以完全忽略这个答案。 :)

I'm not in the slightest familiar with Knockout - I can't be sure that this isn't a code horror.

我对Knockout一点也不熟悉 - 我不能确定这不是代码恐怖。

However, this fiddle will alter the order of the columns to the one you've given in your example. The values are hard-coded, though (should it be a suitable method) It shouldn't(?) be too much trouble to work out an approach to move them to arbitrary positions.

但是,这个小提琴会将列的顺序更改为您在示例中给出的列。这些值是硬编码的(如果它是一个合适的方法)它不应该(?)制定一个方法将它们移动到任意位置太麻烦。

Here: http://jsfiddle.net/enhzflep/KKhZg/368/

#1