2013-07-04 49 views
1

我有一個多選列表,充當標記列表的持有者。我似乎無法弄清楚如何正確獲取被更改的項目的值,並與更改的事件一起傳遞。這裏是我的劍道多選:如何使用KendoUI獲得multiselect中已更改的元素?

 @(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-方法:

 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() { 
        // ... 
       } 
      }); 
     }; 

我的問題beeing,我覺得參數的時分配僅僅是快速和骯髒。當然,還有其他更正確的方法來解決這個問題嗎?

回答

6

有沒有簡單的方法(afaik)知道變化。所以,讓我們自己來做。

首先,我要使用以下函數保存舊值。

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

哪裏multi是多選,我們傳遞給函數作爲參數(這樣你就可以使用功能多multiselects)。

然後,你需要實現change如下:

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

運行這裏例如http://jsfiddle.net/OnaBai/MapVN/

0

尼斯回答OnaBai!非常有用和有益的。

我有同樣的尼克拉問題。 但是,我需要在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 }) 
     }); 
    } 

謝謝!

Iván