如何使用选择框和敲除对可观察数组进行排序并重新绑定到列表

克里斯

我有一个选择下拉框和一个数据列表。下拉框包含数据列表的列名称。该数据列表绑定到名为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函数的viewmodel代码(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函数代码应该是什么?


编辑:

进步(感谢达米恩!),但需要更多信息。我订阅了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;

        });
    });
达米安

这不是您应该使用剔除进行编码的方式:

 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
    });        
});

如果您需要解释,请考虑制作一个小提琴。

希望对您有所帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用ngFor的可观察数组到可观察数组

如何从基因敲除.js中的可观察数组访问可观察元素并更改其值

绑定为可观察到的敲除时如何更新ckeditor数据?

绑定到可观察数组

KnockoutJS:可观察到的foreach绑定数组

在Redux可观察到的场景中对多个史诗进行编排和排序

如何使用RXJS运算符基于重复值对Firebase可观察列表进行排序

如何基于每个数组内的某个项目对可观察数组进行排序

JSViews可观察到的数组不会在删除/添加和排序时刷新视图

为什么即使使用排序的可观察列表,我的组合框也没有排序?

无法绑定可观察数组-敲除

使用可观察数组进行Knockoutjs映射和验证

敲除和可观察到的阵列不匹配

显示敲除可观察数组的内容

如何对可观察物进行排序?

使用敲除将列表绑定到Viewmodel

可观察的子属性字符串到列表框的绑定

如何使用包含可观察到的字符串的表达式使基因敲除可见绑定起作用?

将Asp.Net MVC json结果绑定到敲除.js可观察到的数组

如何将数据从同一视图模型和同一可观察数组绑定到多个区域?

如何对可观察坐标列表进行排序?

如何在敲除js中绑定可观察数组的最后一个索引值

无法绑定到可观察数组

可观察数组和foreach列表

敲除的可观察数组排序问题

将可观察集合中的可观察集合绑定到列表框项

如何对包含 json 对象的可观察数组进行排序?

如何按可观察值对可观察数组进行排序

C# 无法使用可观察集合绑定到列表视图