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;
- Tabloda hangi başlığa tıklarsak, o başlığa göre sıralama yapacak.
- İlk tıklamada veri artan sırada yapılacak ikinci tıklamada veri azalan sırada yapılacaktır.
- 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.
SCRIPT: Controller fonksiyonumuz aşağıdaki şekilde oluşturulacaktır.
- Model oluşturulacak
- 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.
- Kullanıcı tablo başlığına tıkladığında veriSirala() metodu çalışıp sutunSirala ve cevir özelliklerini değiştirecektir.
- 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
var app = angular .module("persModul", []) .controller("persController", function ($scope) { var personeller=[ {isim:"Hayri",soyisim:"KARA",dogum:new Date(1988,7,10),maas:3000}, {isim:"Yaşar",soyisim:"DOĞAN",dogum:new Date(1988,3,30),maas:2500}, {isim:"İsmet",soyisim:"ULUÇ",dogum:new Date(1983,6,20),maas:2700}, {isim:"Ayşe",soyisim:"YURT",dogum:new Date(1968,6,15),maas:3500}, {isim:"Sunay",soyisim:"YERLİ",dogum:new Date(1998,6,10),maas:2850}, {isim:"Nazmiye",soyisim:"ÇARIKÇI",dogum:new Date(1995,4,10),maas:2000} ]; $scope.personeller = personeller; $scope.sutunSirala = "isim"; $scope.cevir = false; $scope.veriSirala = function (sutun) { $scope.cevir = ($scope.sutunSirala == sutun) ? !$scope.cevir : false; $scope.sutunSirala = sutun; } $scope.siralaClass = function (sutun) { if ($scope.sutunSirala == sutun) { return $scope.cevir ? 'azalan' : 'artan'; } return ''; } }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<body ng-app="persModul"> <div ng-controller="persController"> <table border="1" width="430"> <thead> <tr> <th ng-click="veriSirala('isim')"><div ng-class="siralaClass('isim')">İsim</div></th> <th ng-click="veriSirala('soyisim')"><div ng-class="siralaClass('soyisim')">Soyisim</div></th> <th ng-click="veriSirala('dogum')"><div ng-class="siralaClass('dogum')">Doğum Tarihi</div></th> <th ng-click="veriSirala('maas')"><div ng-class="siralaClass('maas')">Maaş</div></th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller | orderBy:sutunSirala:cevir"> <td> {{ personel.isim | uppercase }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.dogum | date:'dd-MM-yyyy'}} </td> <td> {{ personel.maas |number :2 }} </td> </tr> </tbody> </table> </div> </body> |
STYLE:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .artan{ background:url(yukari.png); background-position: left center; background-repeat: no-repeat; } .azalan{ background:url(asagi.png); background-position: left center; background-repeat: no-repeat; } </style> |
[divider]
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.
|
1 2 3 4 5 6 |
$scope.veriSirala = function (sutun) { $scope.cevir = ($scope.sutunSirala == sutun) ? !$scope.cevir : false; $scope.sutunSirala = sutun; } |
|
1 2 3 |
<th ng-click="veriSirala('isim')">..... |
[divider]
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.
|
1 2 3 4 5 6 7 8 |
$scope.siralaClass = function (sutun) { if ($scope.sutunSirala == sutun) { return $scope.cevir ? 'azalan' : 'artan'; } return ''; } |
|
1 2 3 |
<div ng-class="siralaClass('isim')">..... |
HTML & SCRIPT & CSS kodlarını toparlayıp yazacak olursak.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var i=0; var app = angular .module("persModul", []) .controller("persController", function ($scope) { var personeller=[ {isim:"Hayri",soyisim:"KARA",dogum:new Date(1988,7,10),maas:3000}, {isim:"Yaşar",soyisim:"DOĞAN",dogum:new Date(1988,3,30),maas:2500}, {isim:"İsmet",soyisim:"ULUÇ",dogum:new Date(1983,6,20),maas:2700}, {isim:"Ayşe",soyisim:"YURT",dogum:new Date(1968,6,15),maas:3500}, {isim:"Sunay",soyisim:"YERLİ",dogum:new Date(1998,6,10),maas:2850}, {isim:"Nazmiye",soyisim:"ÇARIKÇI",dogum:new Date(1995,4,10),maas:2000} ]; $scope.personeller = personeller; $scope.sutunSirala = "isim"; $scope.cevir = false; $scope.veriSirala = function (sutun) { $scope.cevir = ($scope.sutunSirala == sutun) ? !$scope.cevir : false; $scope.sutunSirala = sutun; } $scope.siralaClass = function (sutun) { if ($scope.sutunSirala == sutun) { return $scope.cevir ? 'azalan' : 'artan'; } return ''; } }); </script> <style> .artan{ background:url(yukari.png); background-position: left center; background-repeat: no-repeat; } .azalan{ background:url(asagi.png); background-position: left center; background-repeat: no-repeat; } </style> </head> <body ng-app="persModul"> <div ng-controller="persController"> <table border="1" width="430"> <thead> <tr> <th ng-click="veriSirala('isim')"><div ng-class="siralaClass('isim')">İsim</div></th> <th ng-click="veriSirala('soyisim')"><div ng-class="siralaClass('soyisim')">Soyisim</div></th> <th ng-click="veriSirala('dogum')"><div ng-class="siralaClass('dogum')">Doğum Tarihi</div></th> <th ng-click="veriSirala('maas')"><div ng-class="siralaClass('maas')">Maaş</div></th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller | orderBy:sutunSirala:cevir"> <td> {{ personel.isim | uppercase }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.dogum | date:'dd-MM-yyyy'}} </td> <td> {{ personel.maas |number :2 }} </td> </tr> </tbody> </table> </div> </body> </html> |
“Style” ile resim attığınız halde göremiyorsanız boyutunu küçültmeniz gerekiyormuş. 20×20 uygun oluyor.
[…] AngularJS Tablolo Başlıklarına Göre Sıralama yazına ek olarak kodlarımız aşağıdaki gibi oluşturuluyor. Angularjs kodlarında dikkat etmemiz gereken nokta OrderBy filitresi yerine myOrderBy adında başka bir filitre uyguladığımızdır. […]
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.
[…] Konu 10:AngularJS Tablolo Başlıklarına Göre Sıralama […]