데이터 바인딩 테이블의 열을 이동

Question

테이블에 동적으로 행과 열을 추가하는 데 녹아웃을 사용하고 있지만 끌어서 놓기로 열의 순서를 조정해야합니다. 내보기와 모델입니다.

보기 :

<table id="gridTable"> 
    <tr data-bind="foreach: activeColumns"> 
     <th data-bind="text: display"></th> 
    </tr> 
    <tbody id="sortable" data-bind="foreach: rows"> 
    <tr data-bind="foreach: $root.activeColumns"> 
     <td> 
      <span data-bind="visible: readonly, text: $parent[property]"></span> 
      <input data-bind="visible: !readonly, value: $parent[property]"/> 
      </td> 
</tr> 
</tbody> 

모델 :

rows: ko.observableArray([ 
new Person(1, "Bob", 44), 
new Person(2, "Ted", 22), 
new Person(3, "Jane", 55), 
new Person(4, "Sue", 11) 
]), 
activeColumns: ko.observableArray([{property: 'id', display: 'ID', readonly: true}, 
{property: 'name', display: 'Name', readonly: false}, {property: 'age', display: 'Age', 
readonly: false}]), 
addColumn: function() { 
    var newProperty = this.newAttribute(); 
    var newProperty1= this.selectedCategory(); 
    this.activeColumns.push({property: newProperty, display: newProperty, readonly: 
false}); 
    ko.utils.arrayForEach(this.rows(), function(row) { 
     if (!row[newProperty]) { 
     row[newProperty] = ko.observable(); 
     } 
    }); 

Answer 1

사용 dragtable.js 링크

http://www.danvk.org/wp/dragtable/