javascript - Wenzhixin Bootstrap-table with Knockout JS

Question

我有一个表格，它是通过使用绑定(bind)的 knockout JS 填充的。我需要添加一个搜索和排序器，所以我正在尝试实现 Bootstrap-table，但我无法让它与 Knockout 一起使用。我在网上搜索过，但找不到任何相关信息。以下是我目前正在做的事情，我们将不胜感激。

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

您不需要任何第 3 方控件即可将排序或搜索添加到 knockout。

将表格绑定(bind)到您的行数组(确保是 observableArray)。当您对数组进行排序时，它会更新 UI 以自动反射(reflect)这一点。

搜索(您可能指的是过滤)有点难，但我基本上有一个文本框绑定(bind)到一个可观察的搜索词，然后有一个 computedObservable 返回包含我的搜索词的所有行。然后，您可以改为绑定(bind)到这些“计算的”行。