Question

我有一个使用bind通过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>

Answer 1

您不需要任何第三方控件来添加排序或搜索淘汰赛。

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

搜索（你可能意味着过滤）有点难，但我本来有一个绑定到搜索术语observable的文本框，然后有一个computedObservable返回包含我的搜索词的所有行。然后，您可以绑定到这些“计算”行。

Answer 2

这个JSFiddle演示了如何使用自定义绑定（http://knockoutjs.com/documentation/custom-bindings.html）

进行排序和搜索，将淘汰应用程序与Wenzhixin表集成

在小提琴中，有一个名为“bootstrapTable＆＃39;”的自定义绑定。可以像这样使用：

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

此绑定中唯一的参数是observableArray，它将用作表格的来源＆＃39;。在自定义绑定实现中，创建用于初始化表的配置对象。生成的配置对象将类似于：

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

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

要启用搜索（或Wenzhixin表docs中描述的任何其他选项），只需添加＆＃39;搜索＆＃39;配置对象中的属性：

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

代码段中的自定义绑定应作为初始草稿，您可以从中进行扩展。例如，现在，自定义绑定使每个列都可以排序＆＃39;但你可以根据自己的需要改变它。

使用Knockout JS的Wenzhixin Bootstrap-table

2 个答案: