WenzhixinノックアウトJSのブートストラップテーブル

Question

バインドを使用してノックアウトJSを介して作成されたテーブルがあります。私は検索とソーターを追加する必要があるので、私はBootstrap-tableを実装しようとしていますが、Knockoutで動作させることはできません。私はネットを検索しましたが、関連する情報は見つかりませんでした。私が現在やっていることは以下の通りです。助けていただければ幸いです。あなたは、ソートまたはノックアウトするために検索を追加して任意のサードパーティ製のコントロールを必要としない

ノックアウト

function Sales(Sales) { 
     this.Name = ko.observable(Sales.NAME); 
     this.Phone = ko.observable(Sales.PHONE); 
     this.Email = ko.observable(Sales.EMAIL); 
     this.Item = ko.observable(Sales.ITEM); 
     this.Description = ko.observable(Sales.DESCRIPTION); 
     this.SaleId = ko.observable(Sales.SALE_ID); 

    } 

    var indexVM = new indexVM(); 
    $('#SaleitemTable').bootstrapTable({}); 
    ko.applyBindings(indexVM); 

表

<table id="SaleitemTable" class="table table-bordered table-striped " 
     data-search="true" 
     data-sort-name="name" 
     data-sort-order="asc"> 
    <thead> 
     <tr> 
     <th>ITEM</th> 
     <th style="width:180px">ITEM DESCRIPTION</th> 
     <th data-field="name" data-sortable="true">SELLER NAME</th> 
     <th>SELLER PHONE</th> 
     <th>SELLER EMAIL</th> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach: Sales"> 
     <tr> 
       <td data-bind="text: Item"></td> 
       <td data-bind="text: Description></td> 
       <td data-bind="text: Name"></td> 
       <td data-bind="text: Phone"></td> 
       <td data-bind="text: Email"></td> 
     </tr> 
    </tbody> 
    </table> 

Answer 1

。

テーブルを配列にバインドします（observableArrayであることを確認してください）。配列をソートすると、自動的に反映されるようにUIが更新されます。

検索（おそらくフィルタリングを意味します）は少し難しくなりますが、私は本質的に、検索用語observableにバインドされたテキストボックスを持っていて、検索語を含むすべての行を返すcomputedObservableを持っています。代わりに、これらの '計算された'行にバインドすることができます。

Answer 2

このJSFiddleはフィドルで（http://knockoutjs.com/documentation/custom-bindings.html）

をカスタムバインディングを経由して、ソートや検索を使用してWenzhixinテーブルでノックアウトアプリケーションを統合する方法を示し、そのように使用することができます「bootstrapTable」と呼ばれるカスタムバインディングがあります：

このバインディングの唯一のパラメータは、 'source'テーブルとして使用されるobservableArrayです。カスタムバインディングの実装では、テーブルの初期化に使用されたコンフィグレーションオブジェクトが作成されます。

{ 
    columns: [ 
     { field: "Name", title: "Name", sortable: true} 
     { field: "Phone", title: "Phone", sortable: true} 
     ... 
    ], 

    data: [ 
     { Name: "Mary", Phone: "123" }, 
     { Name: "John", Phone: "456" } 
    ] 
} 

検索（またはWenzhixinテーブルdocsに記載される任意の他のオプション）を有効にするには、単にconfigオブジェクトに「検索」のプロパティを追加します：結果のconfigオブジェクトは、何かのようになります

var config = { 
     columns: columns, 
     data: data, 
     search: true 
}; 
$(element).bootstrapTable(config); 

スニペットのカスタムバインディングは、展開可能な最初の草案として機能するはずです。たとえば、カスタムバインディングではすべての列を並べ替えることができますが、必要に応じて変更することができます。