Wenzhixin Bootstrap-стол с нокаутом JS

Question

У меня есть таблица, заполненная нокаутом JS с использованием bind. Мне нужно добавить поиск и сортировщик, поэтому я пытаюсь реализовать Bootstrap-таблицу, но я не могу заставить ее работать с 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

Вам не нужны никакие 3rd управления сторонних добавить сортировку или поиск в нокаут.

Привяжите таблицу к вашему массиву (убедитесь, что это наблюдаемый массив) строк. Когда вы сортируете массив, он обновит пользовательский интерфейс, чтобы отразить это автоматически.

Поиск (вы, вероятно, подразумеваете фильтрацию) немного сложнее, но я бы по существу имел текстовое поле, привязанное к наблюдаемому термину, которое можно было бы наблюдать, а затем иметь вычисленное значение Observable, которое возвращает все строки, содержащие мой поисковый запрос. Затем вы можете привязать их к этим «вычисленным» строкам.

Answer 2

Это JSFiddle демонстрирует, как интегрировать приложение нокаута с таблицей Wenzhixin с помощью сортировки и поиска с помощью пользовательской привязки (http://knockoutjs.com/documentation/custom-bindings.html)

В скрипке, есть обычай связывания называется «bootstrapTable», который может быть использован как так :

<table id="SaleitemTable" data-bind="bootstrapTable: { source: Sales }"></table> 

Единственным параметром в этой привязке является наблюдаемый массив, который будет использоваться в качестве источника таблицы. В реализации пользовательского связывания создается объект конфигурации, используемый для инициализации таблицы. Результирующий объект конфигурации будет что-то вроде:

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

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

Чтобы включить поиск (или любой другой вариант, описанный в таблице Wenzhixin docs) просто добавить свойство «поиск» в объекте конфигурации:

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

Пользовательская привязка в фрагменте должна служить в качестве исходного черновика, из которого вы можете расширить. Например, прямо сейчас пользовательская привязка делает каждый столбец «сортируемым», но вы можете изменить его в соответствии с вашими потребностями.