HTML에서 표의 열 순서를 변경하십시오.

Question

knockout.js lib를 사용하여 데이터를 바인딩합니다.
내가 다음 예제
JSFiddle Example

나는 데이터 테이블이있는의를 보자.

Name - - LastName-Middlename - Age
와 나는 4 개 기능

var namePosition = function() 

var lastnamePosition = function() 

var middlenamePosition = function() 

var agePosition = function() 

내가이 함수에 의해 반환되는 값으로 테이블의 열 바인딩 순서를 원하는이 표가 열을 주문한다. 예를 들어

namePosition 반환 4
lastnamePosition 반환 2
middlenamePosition 반환 1
agePosition 반환 3
다음 테이블에 다음 열 순서가 shouls -
Middlename-LastName - Age-Name합니다.
아이디어가 있습니까? 어떻게해야합니까?

Answer 1

.

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

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

을 그리고 초기 값으로 작성시 상기 순서를 사용하여 개체에 위해 observableArray 속성을 설정 : 당신은 이러한 기능을 사용하기 위해 배열을 생성 할 수 있습니다.

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

현재의 접근 방식으로

당신은 열이 같은 코드에 의해 동적으로 주문 변경할 수 있습니다

Answer 2

당신은 룩업 테이블로 간단한 JS 배열을 사용할 수 있습니다 (knockout 또는 jquery 사용) :

는

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

그런 fields['Name'] 대신 코드의 숫자 값으로 사용합니다. 기능이 필요 없습니다.

Answer 3

테이블에 표제가 있고 표제를 다시 정렬해야한다는 관점에서 접근했습니다. 그렇지 않은 경우이 답을 무시하십시오. :)

나는 Knockout에 거의 익숙하지 않다. 나는 이것이 코드 공포가 아님을 확신 할 수 없다.

그러나이 피들 (fiddle)은 예제에서 제공 한 것의 열 순서를 변경합니다. 값은 하드 코딩되었지만 (적절한 방법이어야 함) 임의의 위치로 이동시키는 접근 방식을 고안하는 것은 너무 어려워서는 안됩니다. 여기

: Diodeus 갈 수있는 좋은 방법입니다 말했다 무엇 http://jsfiddle.net/enhzflep/KKhZg/368/