Cuma , 21 Temmuz 2017
Anasayfa » JavaScript » AngularJS » AngularJS Tablolo Başlıklarına Göre Sıralama

AngularJS Tablolo Başlıklarına Göre Sıralama

AngularJS ile tablo başlıklarına göre sıralama yapmadan önce AngularJS ile Sıralama isimli makaleyi okumanızı tavsiye ederim.

Makalenin başlığından anlaşılacağı gibi bir tablomuz olacak ve tablo başlılarına göre sıralama yaptıracağız.

Bu açıklamayı madde madde yazacak olursak;

  1. Tabloda hangi başlığa tıklarsak, o başlığa göre sıralama yapacak.
  2. İlk tıklamada veri artan sırada yapılacak ikinci tıklamada veri azalan sırada yapılacaktır.
  3. Tablo başlıklarında sıralamanın şeklini gösteren iconlar da mevcut sıralamaya göre (de artan yada azalan şekilde) değişecektir.

tablo sıralama

SCRIPT: Controller fonksiyonumuz aşağıdaki şekilde oluşturulacaktır.

  1. Model oluşturulacak
  2. sutunSirala isim değerini  ve cevir özelliği ise false değerini alacaktır. Form yüklendiğinde bu şartlara göre tablomuz sıralanmış olarak gösterilecektir.
  3. Kullanıcı tablo başlığına tıkladığında veriSirala() metodu çalışıp sutunSirala ve cevir özelliklerini değiştirecektir.
  4. siralaClass() metodu ise sıralama yönünü gösteren CSS classını getirecektir. Artan yada Azalan classlarını tablonun class özelliğine parametre olarak geçecektir. Bu sıralamada dikkat edilmesi gereken anguların ng-class direktifini kullanıyor olmamız.
 

HTML: Tablo başlığına tıklandığında veriSirala fonksiyonu çalışacak ve fonksiyon adi ile sıralama yapılacak alan adı parametre olarak fonksiyona gönderilecektir.  ng-class yönergesi model güncellendiğinde bağlı olduğu metodu otomatik olarak çalıştıracak. (Tüm div etiketlerine kullandığım ng-class ifadelerinin hepsinin çalışacağını unutmayın.) ng-class içindeki metod kendisine parametre olarak sıralanacak alan adını almıştır.

siralaClass metodunun içini inceleyecek olursak.  kendisine sutun olarak gelen alanları terenary operatör ile class ataması yapıyor. Bu değerin dısındakileri ise (”) birşey atamıyor.

STYLE:

Belki veriSirala metodun kullanımını açıklamak gerekebilir. Sıralama için sutun adını aldığını ve 3. satırda sutun adını sıralanacak değere aktardığını görmüşşünüzdür.

2. satırda terenary operatör ile sıralama yönünü belirledik. Sıralama şartı yoksa false, varsa tersine çevirme işlemini yaptık.

Aynı şekilde siralaClass metodunun çalışmasından da bahsedelim.  ng-class model değiştiği içindeki metodları çalıştırır. ng-class ile 5 tane aynı isimde metod tanımlanmıştır. her metod kendisine uygun sütün isimlerini parametre olarak göndermektedir.

2.satırdaki if şartı ile hangi div etiketinin etkileneceğini göstermektedir. çevir durumuna göre azalan yada artan sırada olacak.(çevir değerinin sıralama yönünü gösterdiğini unutmayın)

Bu şartın dışındaki tüm etkinlenen divlere ikinci return ” değeri yanı boş değer atanacaktır.

 

HTML & SCRIPT & CSS kodlarını toparlayıp yazacak olursak.

 

 

AngularJS Örnek Uygulama

Hakkında Hayri

İlginizi Çekebilir

AngularJS Template (Asp.net WebService)

Bu yazıda oluşturduğumuz ürünler template sayfasını ile veri tabanındaki kayıtları birleştireceğiz. Öncelikle bilmeniz gereken bu …

4 Yorumlar

  1. Hocam sıralamayı yanlış yapıyor sanırım burada http://prntscr.com/fir5h0 maaş yukarı dedim ama en büyük maaşı yazmadı ayrıca sıralamayı karışık yaptı. Tersine çevirince de en düşük maaşla başlamıyor ve sıra karışıyor. Aynı şekilde isimde de denedim sayfayı yenileyince isimler sıralı şekilde başlıyor B harfinden Y harfine kadar ama yukarı dediğimde Y geliyor tersine çevirince tekrar B gelmesi gerekirken G harfi geliyor karışık sıralıyor.

    • Sıralamada her hangi bir sorun göremedim. Mevcut örnekte tek bir sütuna göre sılama var. Sadece eksik olarak Türkçeye özgü karakterleri sıralamada sona ekliyor.(Ascii kodu sonda olduğu için)
      Yine de sorun yaşarsan kodları da ekleyebilirsin yorum olarak. Fırsatım olunca incelemeye çalışırım.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir