KendoUI를 사용하여 다중 선택에서 변경된 요소를 얻으려면 어떻게해야합니까?

Question

나는 태그 목록의 소유자 역할을하는 다중 선택 목록을 보유하고 있습니다. 나는 을 올바르게 이해하는 것 같지 않습니다. 변경된 항목의 값을 가져 와서 변경된 이벤트와 함께 전달합니다. 내가 PARAM의 할당을 느낄 수 beeing는

 function select(e) { 
      var dataItem = this.dataSource.view()[e.item.index()]; 
      var param = dataItem.Text; 
      var url = '/UnitDetails/TagUnit/@Model.UnitId'; 

      $.ajax({ 
       url: url, 
       data: { selectedItem: param }, 
       type: 'GET', 
       dataType: 'json', 
       success: function (data) { 
        // ... 
       }, 
       error: function() { 
        // ... 
       } 
      }); 
     }; 

     function change(e) { 
      var dataItem = this; 
      var param = dataItem.element.context.innerText; 
      var url = '/UnitDetails/UnTagUnit/@Model.UnitId'; 

      $.ajax({ 
       url: url, 
       data: { selectedItem: param }, 
       type: 'GET', 
       dataType: 'json', 
       success: function (data) { 
        // ... 
       }, 
       error: function() { 
        // ... 
       } 
      }); 
     }; 

내 문제는 단지 신속하고 더러운입니다 :

 @(Html.Kendo().MultiSelect() 
      .Name("tags") 
      .Placeholder("No tags selected for this unit") 
      .BindTo(new SelectList(Model.TagsAvailable)) 
      .Events(e => e 
        .Select("select") 
        .Change("change")) 
      .Value(Model.TagsSelected.ToArray()) 
     ) 

그리고 여기에 내 JS-방법이 있습니다 : 여기 내 검도 다중 선택입니다. 분명히 이것에 관한 다른 올바른 방법이있을 것입니다.

Answer 1

변경 사항을 알기 쉬운 방법은 없습니다. 자, 스스로 해봅시다.

먼저 다음 함수를 사용하여 이전 값을 저장하겠습니다. multi 우리가 인수로서 기능 (그래서 당신은 여러의 기능을 사용할 수 있습니다 multiselects)에 전달하는 다중 선택입니다

function saveCurrent(multi) { 
    multi._savedOld = multi.value().slice(0); 
} 

.

그런 다음 다음과 같이 change를 구현해야 : 여기 예제를 실행 http://jsfiddle.net/OnaBai/MapVN/

Answer 2

멋진 대답 OnaBai

change : function (e) { 
    // Retrieve previous value of `multiselect` saved using previous function 
    var previous = this._savedOld; 
    // These are current values. 
    var current = this.value(); 
    // Let's save it for the next time 
    saveCurrent(this); 

    // The difference between previous and current are removed elements 
    var diff = $(previous).not(current).get(); 
    console.log("removed", diff); 

    // The difference between current and previous, are added elements 
    diff = $(current).not(previous).get(); 
    console.log("added", diff); 
} 

! 매우 유용하고 도움이된다.

나는 같은 Nickla 문제가있었습니다. 그러나 dataBound 이벤트에서 "현재 값 저장"이 필요했습니다. 그리고 작동합니다 (변경된 값 기록).

항목을 삭제하기 시작하면 기능에서 "변경"을 "항목 추가"로 인식하므로 실패합니다.

이것은 내가 다시

function dataBound(ev) { 

     saveCurrent(this); 
    } 

    function saveCurrent(multi) { 
     multi._savedOld = multi.value().slice(0); 
    } 

    function change(ev) { 


     var previous = this._savedOld; 

     var current = this.value(); 

     saveCurrent(this); 

     var diff = $(previous).not(current).get(); 
     console.log("removed", diff); 

     var removedSkill = diff; 

     console.log("removedSkills", removedSkill); 

     diff = $(current).not(previous).get(); 
     var addedSkill = diff; 
     console.log("added", diff); 
     console.log("addedSkills", addedSkill); 

     if (addedSkill.length > 1 || removedSkill.length > 1) { 

      if (addedSkill.length > 1) { 

       addedSkill = addedSkill[addedSkill.length - 1]; 
       alert("Added skill code: " + addedSkill.toString()); 
      } 

      if (removedSkill.length > 1) { 
       removedSkill = removedSkill[removedSkill.length - 1]; 
       alert("Removed skill code: " + removedSkill.toString()); 
      } 
     } 
     else { 
      if (addedSkill.length > 0) { 
       alert("Added skill code: " + addedSkill.toString()); 
      } 
      if (removedSkill.length > 0) { 
       alert("Removed skill code: " + removedSkill.toString()); 
      } 
     } 


     $.ajax({ 
      url: "SomeUrl", 
      type: "POST", 
      dataType: "json", 
      contentType: "application/json", 
      data: JSON.stringify({ removedSkill: removedSkill, addedSkill: addedSkill }) 
     }); 
    } 

감사 한 일입니다!

이반