Question

我真的很想找到解决方案，以便在列表框中显示所选项目。我在这里使用knockout绑定我的列表框。列表框在我的视图中绑定如下

<select id ="multiAltVersion" multiple="multiple"  data-bind="options:  $root.editOnlyAlternativeVersions,  optionsText: 'PlatformVersionName',optionsValue: 'Id',selectedOptions:  $root.copiedAltVersion, chosen: true  "> </select>

我调用我的WCF服务来填充列表框。

    function loadVersionListByProductType(prodtype) {
        var input =
        {
            ProductType: prodtype

        };


        $.ajax({
            url: "../RestService/Test/ReturnData",
            type: "PUT",
            contentType: 'application/json',
            processData: false,
            data: JSON.stringify(input),
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            },
            success: function (allData) {
                var mappedVersionListByProdType = $.map(allData, function (item) {

                    return new productVersionListByProductType(item);
                });
                self.editOnlyAlternativeVersions(mappedVersionListByProdType);


            }

        });

    }

当从WCF服务返回数据时，它以降序返回数据。但我想在顶部显示选中，然后以降序方式对列表进行排序。我从另一个服务获取项目列表，从另一个服务中获取所选项目。是否有意义？如何使用Jquery实现它？

Answer 1

下载数据时，您可以在Knockout中使用sorting functionality：

editOnlyAlternativeVersions.sort(function(left, right)
{
    return left.selected == right.selected ? 
        // Selected is equal, so sort on name
        left.name == right.name ? 0 : (left.name < right.name ? -1 : 1) : (left.selected < right.selected ? -1 : 1)
})

Answer 2

使用计算的observables（未经测试和未经优化）的简单示例：

var myViewModel = function() {
   var options = ko.observableArray(["option1","option2","option3"]);
   var selected = ko.observable(options[2]);

   var sortedOptions = ko.computed(function() {
       var sorted = [];
       sorted.push(selected());
       for (var i=0; i < options().length; i++) {
           if(options()[i]!=selected()) {
              sorted.push(options()[i]);
           }
       }
       return sorted;
   });
}

然后绑定到sortedOptions，它应该按顺序：

option3, option1, option2

选择新选项会强制重新计算，以及向options数组添加新选项。

将所选项目移至列表框顶部

2 个答案: