Wenzhixin Bootstrap-таблица с Knockout JS

У меня есть таблица, которая заполняется с помощью knockout 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>

javascript twitter-bootstrap bootstrap-table knockout.js
person Dwill    schedule 21.02.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам не нужны какие-либо сторонние элементы управления, чтобы добавить сортировку или поиск в нокаут.

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

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

person 4imble    schedule 21.02.2017

arrow_upward
1
arrow_downward

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

В скрипте есть настраиваемая привязка под названием bootstrapTable, которую можно использовать следующим образом:

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

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

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

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

Чтобы включить поиск (или любой другой параметр, описанный в документации в таблице Венжиксин), просто добавьте свойство search в объекте конфигурации:

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

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

person Rafael Companhoni    schedule 21.02.2017