带淘汰赛JS的Wenzhixin引导表

Question

我有一个使用bind通过knockout JS填充的表。我需要添加一个搜索和排序器，所以我试图实现引导表，但我无法让它与敲除一起工作。我在网上搜索过，但找不到任何相关信息。下面是我目前正在做的事情，任何帮助都将不胜感激。

击倒

    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

这个JSFIDLE演示了如何通过自定义绑定使用排序和搜索将淘汰应用程序与Wenzhixin表集成(http://knockoutjs.com/documentation/custom-bindings.html)

在fiddle中，有一个名为“bootstrapTable”的自定义绑定，可以这样使用：

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

此绑定中唯一的参数是将用作表“源”的ObservalArray。在自定义绑定实现中，将创建用于初始化表的配置对象。生成的配置对象类似于：

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

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

要启用搜索（或温之信表文档中描述的任何其他选项），只需在配置对象中添加“搜索”属性：

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

代码段中的自定义绑定应该作为您可以扩展的初稿。例如，现在自定义绑定使每列都可以排序，但您可以根据需要进行更改。

Answer 2

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

将表绑定到行的数组（确保是ObservalArray）。当您对数组排序时，它将更新UI以自动反映这一点。

搜索（你可能是说过滤）有点难，但我基本上会有一个文本框绑定到一个搜索词observate，然后有一个computed observate，返回包含我的搜索词的所有行。然后可以绑定到这些“计算”行。