javascript - 如何创建完整分页并使用两个字段进行搜索(How to create full pagination and search with two fields)

Question

I am new to KnockoutGrid and I have been assigned to an existing project which I have to add pagination and search with two fields.

(我是KnockoutGrid的新手，已经被分配到一个现有项目，我必须添加分页和使用两个字段进行搜索。)

How can I create pagination and search on KnockoutGrid?

(如何在KnockoutGrid上创建分页和搜索？)

I have this tried this example : Sorting Paging a Grid using Knockout JS and ASP.NET Web API Data Service

(我已经尝试过以下示例： 使用Knockout JS和ASP.NET Web API数据服务对分页网格进行排序)

Current existing grid Code:

(当前现有的网格代码：)

<div id="divForm" class="col-lg-12" style="border:solid">
<table class="table table-striped table-responsive">
    <thead>
        <tr data-bind="foreach: gridOptions.columnDefs">
            <th data-bind="text: displayName"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: { data: gridOptions.data, as: 'data' }">
        <tr data-bind="foreach: { data: $root.gridOptions.columnDefs, as: 'col' }">
            <td data-bind="tableCell: col.cellFilter(data[col.field])"></td>
        </tr>
    </tbody>
</table>

JS+Knocokout

(JS + Knocokout)

<script>
var mdlFunc = function () {
    var self = this;

    // Borrowed from KnockoutGrid to apply custom bindings to a cellTemplate
    ko.bindingHandlers['tableCell'] = (function () {
        return {
            'init': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                return { controlsDescendantBindings: true };
            },
            'update': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                var htmlData = ko.unwrap(valueAccessor());
                if (/data-bind/.test(htmlData)) {
                    var cell = $(htmlData);
                    ko.utils.arrayForEach(cell, function (x) {
                        ko.applyBindings(bindingContext, x);
                    });
                    $(element).html(cell);
                } else {
                    ko.utils.setHtml(element, htmlData);
                }
            }
        };
    }());

    self.gridOptions = {
        canSelectRows: false, multiSelect: false,
        footerVisible: false, showGroupPanel: false,
        enableSorting: true,
        columnDefs: [
            { field: "pos", displayName: "#", sortable: true },
            { field: "FileName", displayName: "File name" },
            { field: "Description", displayName: "Description" },
            { field: "CustomerName", displayName: "Client name" },
            { field: "DateCreated", displayName: "Created date" },
            {
                field: "State", displayName: "State",
                cellFilter: function (x) {
                    if (x == 0) return "Uploaded";
                    if (x == 1) return "Ready to Sign";
                    if (x == 2) return "Signed";
                    if (x == 3) return "Rejected";
                    return "Unknown (" + x + ")";
                }},
            { field: "ActionDate", displayName: "Action date" },
            { field: "State", displayName: "Actions", cellFilter:
                function (x) {
                    @if (((ApplicationUser)ViewBag.User).IsSuperUser == true) {<text>
                    if (x == 0) return '<a class="btn btn-info btn-block normal-font" data-bind="click: $root.editDocumentClick">Edit</a>';
                    </text>}
                    if (x == 1) return '<a class="btn btn-info btn-block normal-font" data-bind="click: $root.signClick">Sign</a>';
                    if (x == 2) {
                        //button
                        </text>}
                        return data;
                    }

                }
            }
        ],
        rowHeight: 36,
        data: ko.observableArray([
            @if (Model != null && Model.Count > 0)
            {
                Model.Sort((x, y) => y.Id.CompareTo(x.Id));
                int counter = Model.Count;
                foreach (var row in Model)
                {
                    this.Write("");
                    @Html.Raw(Json.Encode(new {
                        pos = counter,
                        row.Id,
                        row.FileName,
                        row.Description,
                        row.FileLocator,
                        row.DateCreated,
                        row.State,
                        row.ActionDate,
                        CustomerId = row.Customer != null ? row.Customer.Id.ToString() : string.Empty,
                        CustomerName = row.Customer != null ? row.Customer.Name : "Not Associated"
                    }));
                    this.Write(",");
                    this.Write("
");
                    counter--;
                }
            }
        ]),
    };

    //Some functions        

    };
    </text>}
}
var model = new mdlFunc();
ko.applyBindings(model, $('#divForm')[0]);

$(document).resize(function () {
    $('#docGrid').height($(document).height() - 500);
});

  ask by JuniorLinq translate from so

Answer 1

等待大神答复