具有Knockout JS的文智信Bootstrap表

Question

我有一个表，它是使用bind通过knockout填充的。我需要添加一个搜索和排序，所以我试图实现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

你不需要任何第三方控件来添加排序或搜索到knockout。

将一个表绑定到您的行数组(确保为observableArray)。当您对数组进行排序时，它将更新UI以自动反映这一点。

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

Answer 2

此JSFiddle演示了如何通过自定义绑定(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" } 
    ]
}

要启用搜索(或文致信表格docs中描述的任何其他选项)，只需在配置对象中添加' search‘属性：

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

代码段中的自定义绑定应该用作初始草稿，您可以从中展开。例如，现在的自定义绑定使每一列都是“可排序的”，但您可以根据需要进行更改。