선택한 항목을 목록 상자 위로 이동

Question

목록 상자에서 선택된 항목을 맨 위에 표시하는 솔루션을 찾는 데 정말 열세입니다. 여기 내 녹아웃을 사용하여 목록 상자를 바인딩합니다. 목록 상자는 내보기에서 아래와 같이 바인딩됩니다.

<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

당신이 데이터를 다운로드 할 때 당신은 마네의 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

간단한 예 :

이

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 배열에 새 옵션을 추가하는 것처럼 다시 계산해야합니다.