7

並べ替えを適用する必要があるテーブルがあります。私はノックアウトとjquery.tablesorter.jsを使用しています。カスタムバインディングも試しましたが、役に立ちません。ノックアウトがなくても、私のコードは正常に機能します。以下は私のテーブルです。

<table class="tbl" id="dash" data-bind="sortTable: true">
      <thead>
        <tr class="tag close">
          <th>Type</th>
          <th>Title</th>
        </tr>
      </thead>
      <tbody class="scrollContent" data-bind="foreach: Course">
        <tr>
          <td><i class="icon"></i></td>
          <td><a href="#" id="qtipselector_01" data-bind="text: Title"></a></td>
          <div id="TooltipContent_01" class="hidden">
            <a> Test Tool Tip</a>                 
          </div>
      </div>
    </tr> 
  </tbody>
 </table>
4

2 に答える 2

12

次に例を示します。http：//jsfiddle.net/jearles/RGsEH/

注：JSおよびCSSファイルの依存関係は、管理対象リソースの下にあります。

HTML

<table data-bind="sortTable: true">
  <thead>
    <tr>
      <th>Type</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: course">
   <tr>
      <td data-bind="text: type"></td>
      <td data-bind="text: title"></td>
    </tr> 
  </tbody>
 </table>

JS

function Course(type, title) {
    this.type = type;
    this.title = title;
}

var ViewModel = function() {
    this.course = ko.observableArray([
        new Course("type", "course1"),
        new Course("another_type", "course2"),
        new Course("second_type", "course5"),
        new Course("third_type", "course4"),
        new Course("fourth_type", "course3")        
    ]);
}

ko.bindingHandlers.sortTable = {
    init: function(element, valueAccessor) {
        setTimeout( function() {
            $(element).addClass('tablesorter');
            $(element).tablesorter({widgets: ['zebra']});
        }, 0);
    }
};

ko.applyBindings(new ViewModel());
于 2013-01-30T00:17:18.207 に答える
0

@john Earlesによる上記のソリューションは、事前定義されたデータテーブルで機能しますが、動的データをテーブルに追加する場合、それはちょっと壊れます。

これを確認してください：http：//jsfiddle.net/vkctata/vdcox07c/1/

function Course(type, title) {
      this.type = type;
      this.title = title;
    }
    var ViewModel = function() {
      this.addNewItem = function() {
        this.course.push(new Course("nth_type", "course33"));
        return false;
      }
      this.course = ko.observableArray([
        new Course("type", "course1"),
        new Course("another_type", "course2"),
        new Course("second_type", "course5"),
        new Course("third_type", "course4"),
        new Course("fourth_type", "course3")
      ]);
    }

    ko.bindingHandlers.sortTable = {
      init: function(element, valueAccessor) {
        setTimeout(function() {
          $(element).addClass('tablesorter');
          $(element).tablesorter({
            widgets: ['zebra']
          });
        }, 0);
      }
    };

    ko.applyBindings(new ViewModel());

ほぼ一般的な並べ替えを作成する方法を見つけました。このリンクをたどってくださいノックアウト並べ替え

于 2017-08-15T09:57:35.927 に答える