jQuery tablesorter ile elden çıkarma - satır ekleme

Question

Kaydedicinin widget'ını kullanarak tablo düzenleyiciyi kullanmaya çalışıyorum. Tablo knokout tarafından doldurulur.

Tablo ilk kez doldurulduğunda, doğru miktarda satır alıyorum ve sıralamayı hatırlıyor. Daha sonra tabloyu ajax kullanarak ve nakavt dizisine bağlanan verilerle yeniden doldururum. Veriler daha sonra iki katına çıkar, ancak nakavt (doğru), sadece verilerin yarısını izler.

Şimdiye kadar ben uyguladığınızda bu yöntemde sıralama kaydedilmiş aşağı Buna izlediğimizi:

self.tablesorter = function() { 
         $('table.tablesorterTranslation').trigger("update"); 
         setTimeout(function() { 
          var sl = $.tablesorter.storage($('table.tablesorterTranslation'), 'tablesorter-savesort'); 
          var sortList = (sl && sl.hasOwnProperty('sortList') && $.isArray(sl.sortList)) ? sl.sortList : ''; 
          if (sortList && sortList.length > 0) { 
           // update sort change 
           $('table.tablesorterTranslation').trigger("sorton", [sortList]); 
          } 
         }, 1000); 
         return false; 
        }; 

Bu yöntem bağlayıcı postaction knock-out tarafından çağrılır.

Metodu çağırmadan önce, nakavt dizisindeki her öğe için bir postanız var, postaction'dan sonra iki, biri nakavt tarafından izleniyor ve bir tane de tablo üreticisi tarafından eklenmiş görünüyor.

Bu, tablolayıcı önbelleğe alma değerleri nedeniyle mi ve bunu temizlemenin bir yolu var mı?

html:

<table class="tablesorterTranslation" data-bind="visible: contents().length > 0"> 
       <colgroup> 
        <col class="referencenumber"/> 
        <col class="title"/> 
       </colgroup> 
       <thead> 
        <tr> 
         <th class="referencenumber">Ref number</th> 
         <th class="title">Title</th> 
        </tr> 
       </thead> 
       <tbody data-bind="foreach: contents, postAction: tablesorter(), visible: contents().length > 0"> 
        <tr> 
         <td class="referencenumber"> 
          <span data-bind="text: contentReferenceNumber"></span> 
         </td> 
         <td class="title"> 
          <a data-bind="attr: {href: previewUrl, title: previewTitle}, click: previewpopup" class="preview_translation"><%: AdminResources.Menu_Preview %></a> 
         </td> 
       </tr> 
      </tbody> 
     </table> 

tablo yeniden doldurur ajax:

self.setContentList = function() { 
         if ($('#LanguageIdNameValuePairs option').length > 0) { 
          self.contents.removeAll(); 
          self.loading(true); 
          $.ajax('<%= Url.Action("GetContentList", "TranslateContentMenu") %>', 
           { 
            dataType: 'json', 
            data: { 
             languageId: $('#LanguageIdNameValuePairs').val(), 
             page: self.page 
            }, 
            success: function (allData) { 
             var mappedContent = $.map(allData, function (item) { return new ContentViewModel(item); }); 
             self.loading(false); 
             self.contents(mappedContent); 
            } 
           }); 
         } else { 
          self.contents(new Array()); 
         } 
        }; 

contentviewmodel:

(function (ko) { 
    PODIUM.translation.ContentViewModel = function(data) { 
     this.contentReferenceId = ko.observable(data.contentReferenceId); 
     this.contentName = data.contentName; 
     this.previewUrl = ko.observable(data.previewUrl); 
     this.previewTitle = ko.observable(data.previewTitle); 
     this.publishTitle = ko.observable(data.publishTitle); 
     this.contentReferenceNumber = ko.observable(data.contentReferenceNumber); 
    }; 
}(ko)); 

ve son olarak, savesort tablosu, doldurma ve tablesort tanımlayan (savesort bence sorun).

 $('#OptionsMenu').change(function() { 
      viewModel.setContentList(); 
     }); 
     $('table.tablesorterTranslation').tablesorter({ 
      widgets: ["saveSort"], 
      widgetOptions: {} 
     }); 

Bu değiştirdiğinde bazı değerlerle, i sunucudan yeni değerler elde ve masa yeniden oluşturulacaktır, seçkin bir liste var. Burası eski değerleri hatırlıyor, ama masayı “temizlemek” ve baştan başlamak istiyorum.

Answer 1

Kendime bir cevap buldum, ama istediğim gibi değil.

Temel olarak, ben nakavt kullanıyorum, ben görünümün kendisi için değişiklikler yapmak değil, daha ziyade viewmodel değiştirmek gerekiyor. Böylece dizileri sıraya koyma ve sihir kalanını nakavt etme izni verdim.

Tüm tablo tutucusunun tüm izlerini kaldırarak başladım (tablodaki css sınıfı hariç, bunu zaten stil sayfasında kullandım). tablesorter Hali hazırda başvuruda başka bir yerde kullanıldığı için, bu, tablesort eklenti aynı CSS sınıfları kullanarak

  self.sortContents = function (element, sortProperty) { 
       var elem = $(element); 
       var direction = (elem.hasClass('headerSortDown')) ? 'headerSortUp' : 'headerSortDown'; 
       var selector = $.trim($(element).attr('class').replace('header', '').replace('headerSortUp', '').replace('headerSortDown', '')); 
       if (direction == 'headerSortUp') { 
        self.filterStorage.updateSortFilter(selector, sortProperty); 
        self.contents.sort(function(left, right) { 
         return left[sortProperty] == right[sortProperty] ? 0 : (left[sortProperty] > right[sortProperty] ? -1 : 1); 
        }); 
        elem.removeClass('headerSortDown'); 
        elem.addClass('headerSortUp'); 
       } else { 
        self.filterStorage.updateSortFilter(selector, sortProperty); 
        self.contents.sort(function (left, right) { 
         return left[sortProperty] == right[sortProperty] ? 0 : (left[sortProperty] < right[sortProperty] ? -1 : 1); 
        }); 
        elem.removeClass('headerSortUp'); 
        elem.addClass('headerSortDown'); 
       } 
      }; 

Bildirim im ve CSS durumlar için de zaten:

O zaman, bu yöntem ilave sınıflar. Bu karmaşa içinde kalkıp beri asla bunun için bir şeyler anlamaya vardı, sıralama durumunu kurtarmaya çalışırken, Sonra

<th class="title header" data-bind="click: function(data, event){ return sortContents($(event.target), 'contentName')}"><%: AdminResources.ContentOverview_Title %></th> 

:

ben bu kadar tablo başlığı değiştirdi. Bu yüzden yöntemler, güncelleme ve yeni bir sınıf oluşturdum. Bu hangi başlık ile sıralama ve yönünü kaydeder.

function getSortFilter() { 
    var cookie = $.cookie(tableSortedByCookie); 
    return JSON.parse(cookie); 
} 
function updateSortFilter(selector, property) { 
    $.cookie(tableSortedByCookie, null); 
    $.cookie(tableSortedByCookie, JSON.stringify({ selector: selector, property: property }), { path: '/' }); 
} 

Güncellemenin kullanımını sortcontents yönteminde görebilirsiniz. (Bu yöntem, tabloyu içeren sayfa için görünüm modelindedir).

Sonra ajax başarılı yöntem altına bu eklendi:

var tableSortCookie = self.filterStorage.getSortFilter(); 
if (tableSortCookie != null && tableSortCookie.selector != null) { 
    var header = $('.tablesorterTranslation th.' + tableSortCookie.selector); 
    self.sortContents(header, tableSortCookie.property); 
} 

Ve sonra, nakavt kullanmak yerine, hem de durum bilgisini saklamak ve geri durumuna geldiği zamanki hali yükleme verileri sıralamak mümkün verileri değiştirmek ve sayfayı yenilemek.