0

我有一个选择下拉框和一个数据列表。下拉框包含数据列表的列名。该数据列表绑定到一个名为 allCertificates 的可观察数组。当用户从下拉框中选择列名时，将触发更改事件。我想根据下拉列表中的选择对数据列表进行排序。我计划在 SortBy 函数中对 allCertificates 可观察数组进行排序并将其重新绑定到数据列表，但我不知道如何实现。SortBy 函数的代码应该是什么？

这是我的视图代码（CAApproval.html）中的选择列表-

    <select id="ddlSortBy" style="margin-top: 0px; height: 24px; width: 140px !important"
        data-bind="change: SortBy(), options: serverOptions, optionsText: 'name', optionsValue: 'id', value: 'OptionText'">
    </select>

这是绑定到 allCertificates 可观察数组的数据列表 -

                        <ol data-bind="foreach: allCertificates">
                        <table id="Table2" border="0" class="table table-hover" width="100%">
                            <tr style="cursor: hand">
                                <td>
                                    <ul style="width: 100%">
                                        <b><span data-bind="    text: clientName"></span>&nbsp;(<span data-bind="    text: clientNumber"></span>)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span data-bind="    text: borrowBaseCount"></span>&nbsp;Loan(s)&nbsp;</b>
                                        <br />
                                        Collateral Analyst:&nbsp;<span data-bind="    text: userName"></span>
                                        <br />
                                        Certificate:&nbsp;<span data-bind="text: lwCertID"></span>&nbsp;&nbsp;Request&nbsp;Date:&nbsp;<span data-bind="    text: moment(requestDate).format('DD/MMM/YYYY')"></span>
                                </td>
                            </tr>
                        </table>

这是我的带有空 SortBy 函数的视图模型代码（SortBy 是我想要对可观察数组进行排序并将其重新绑定到数据列表的地方） -

define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/CertificateDataService'],
function (logger, system, router, CertificateDataService) {
    var allCertificates = ko.observableArray();
    var myCertificates = ko.observableArray();

    var serverOptions = [
    { id: 1, name: 'Certificate', OptionText: 'lwCertID' },
    { id: 2, name: 'Client Name', OptionText: 'clientName' },
    { id: 3, name: 'Client Number', OptionText: 'clientNumber' },
    { id: 4, name: 'Request Date', OptionText: 'requestDate' },
    { id: 4, name: 'Collateral Analyst', OptionText: 'userName' }
    ];

    var activate = function () {

        // go get local data, if we have it
        return SelectAllCerts();

    };


    var vm = {
        activate: activate,
        allCertificates: allCertificates,
        myCertificates: myCertificates,
        title: 'Certificate Approvals',
        SelectMyCerts: SelectMyCerts,
        SelectAllCerts: SelectAllCerts,
        DefaultMyCert: DefaultMyCert,
        theOptionId: ko.observable(1),
        serverOptions: serverOptions,
        SortBy: SortBy
    };


    return vm;


    function SortUpDownAllCerts() {
        return allCertificates.sort()
    }

    function SortUpDownMyCerts() {
        return allCertificates.sort()
    }

    //*****WHAT CODE GOES HERE?
    function SortBy() {
        if (serverOptions[$('#ddlSortBy').val()] != undefined) {

        }
    }

    function DefaultMyCert() {
        return $('#btnMyCert').toggle('show');
    }

    function SelectAllCerts() {
        return CertificateDataService.getallCertificates(allCertificates);
    }

    function SelectMyCerts() {
        return CertificateDataService.getallCertificates(myCertificates);
    }
});

SortBy 函数代码应该是什么？

编辑：

进展（感谢 Damien！），但需要更多信息。我让它订阅了 serverSelectedOptionID，我可以看到 function(a, b) 中的数据以及 sortCriteriaID 中的正确值。我缺少的是如何使用 sortCriteriaID 来指定要排序的列。这是新代码-

       serverSelectedOptionID.subscribe(function () {
        var sortCriteriaID = serverSelectedOptionID._latestValue;
        allCertificates.sort(function (a, b) {
            if (a[sortCriteriaID] == b[sortCriteriaID]) {
                return a[sortCriteriaID] > b[sortCriteriaID] ? 1 : a[sortCriteriaID] < b[sortCriteriaID] ? -1 : 0;
            }

            return a[sortCriteriaID] > b[sortCriteriaID] ? 1 : -1;

        });
    });

这是 allCertificates 数组的模型-

     function (logger, system) {
    var certificateModel = function (clientID, lwCertID, requestDate, userName, statusDescription, statusCode, statusDesc, ceoUserName, clientName, clientNumber, borrowBaseCount, advRequestCount) {
        var self = this;
        self.clientID = ko.observable(clientID);
        self.lwCertID = ko.observable(lwCertID);
        self.requestDate = ko.observable(requestDate);
        self.userName = ko.observable(userName);
        self.statusDescription = ko.observable(statusDescription);
        self.statusCode = ko.observable(statusCode);
        self.statusDesc = ko.observable(statusDesc);
        self.ceoUserName = ko.observable(ceoUserName);
        self.clientName = ko.observable(clientName);
        self.clientNumber = ko.observable(clientNumber);
        self.borrowBaseCount = ko.observable(borrowBaseCount);
        self.advRequestCount = ko.observable(advRequestCount);
    };

当然 a[sortCriteriaID] 不起作用。其中一列是 lwCertID。如果 lwCertID 是选项 1（sortCriteriaID = 1），那么使用 sortCriteriaID 表示 a.lwCertID 的代码是什么？

更正的代码编辑（这是最后一块，它有效）-

        serverSelectedOptionID.subscribe(function () {
        var sortCriteriaID = serverSelectedOptionID._latestValue;
        allCertificates.sort(function (a, b) {
            var fieldname = serverOptions[sortCriteriaID-1].OptionText;

            if (a[fieldname] == b[fieldname]) {
                return a[fieldname] > b[fieldname] ? 1 : a[fieldname] < b[fieldname] ? -1 : 0;
            }

            return a[fieldname] > b[fieldname] ? 1 : -1;

        });
    });
4

1 回答 1

0

这不是您应该使用 knockout 进行编码的方式：

 serverOptions[$('#ddlSortBy').val()] != undefined);

您应该在 viewModel 中创建一个名为 serverSelectedOptionID 的 ko.observable。然后将选择绑定更改为：

data-bind="value : serverSelectedOptionID , options: serverOptions, optionsText: 'name', optionsValue: 'id', value: 'OptionText'"

所以现在你可以订阅 serverSelectedOptionID ：

serverSelectedOptionID .subcribe(function(){
    var sortCriteriaID = this.serverSelectedOptionID();
    allCertificates.sort(function(a,b){
          // use sortCriteriaID to return -1,0 or 1
    });        
});

如果您需要解释，请考虑创建一个小提琴。

我希望它有所帮助。

于 2013-07-18T14:50:44.373 回答