JavaScript yapısı gereği kodları sıralı olarak çalıştırır ve örneğin sunucu tarafından gelen verileriniz verilerin tamamı geldikten sonra işlem yapılması gerekir. Pure JavaScript kullanıyorsanız callback'ler kullanarak verileriniz sunucu tarafından geldikten sonra işlenmesini sağlayabilirsiniz. Ama bu konularla uğraşmak için JavaScript Callback konusunu çok iyi araştırmanızı tavsiye ederim. Bunun yerine yukarıda da bahsettiğimi gibi Two-way binding destekli frameworklerden birini kullanmak işlerinizi çok kolaylaştıracaktır.Two-Way Binding destekli JavaScript frameworkleri için en çok bilinenlerden olan AngularJS veya Knockout kullanmanızı tavsiye edeceğim. Bunlardan da AngularJS geliştirici kitlesinin çok olması ve Google destekli bir proje olmasından dolayı çok tercih edildiğini vurgulamak istiyorum. Ben de örneğimizde AngularJS kullanarak anlatım yapacağım.
Diğer önemli konulardan bir tanesi de Bootstrap Collapse'dır. Bu konuyu anlattığım makaleye de buradan erişebilirsiniz. Çünkü örneğimizde kullanacağım konulardan bir tanesi de budur.
Gerekli kütüphaneleri tanıttıktan sonra artık örneğimize geçebiliriz. Elimizde
scope.Kararlar = [];
gibi bir dizi olduğunu düşünün. Kararların Karar Numarası diye bir özelliği olduğunu ve bu karar numarasının bir kaç veride aynı olduğunu listemizi de karar numarasına göre kategorize etmek istediğinizi düşünün. Bunun için yapacağımız ilk işlem Karar Numaraları tekrarlanmadan listeden çıkarmak olabilir. Bunun için basitçe KararNumaraList diye bir dizi tanımlayıp Distinct(tekrarlanmadan) Karar numaralarını diziden çıkaralım.
Bunun için aşağıdaki fonksiyonu kullanabilirsiniz.
scope.KararList = [];
scope.ExtractKararList = function () {
scope.KararList = [];
for (i = 0; i < scope.Kararlar.length; i++) {
scope.eklenecek = true;
for (j = 0; j < scope.KararList.length; j++) {
if (scope.Kararlar [i].KararNo == scope.KararList[j].KararNo )
{
scope.eklenecek = false;
break;
}
}
if (scope.eklenecek) {
scope.KararList.push({
KararNo: scope.Kararlar [i].KararNo
});
}
}
};
Bu işlemden sonra yapacağımız işlem ise karar numaralarına göre panel grubu oluşturmak olacaktır. Bunun için de bootsrap panel kullanacağız. Ama önemli olan dinamik olarak karar numaralarımızın sayısı kadar panel oluşturmaktır. Bunun için Angular ng-repeate kullanabiliriz.
<div class="panel panel-default" ng-repeat="karar in KararList">
Bu kod parçasını da ekledikten sonra yapılacak diğer işlem collapse kullarak verilerimizi karar numarasına göre kategorize etmek olacaktır. Bunun için ID değerini kullanacağız. Ve aşağıdaki HTML kodlarından sonra AngularJS tarafında neler yaptığımza bakalım.
<div class="panel-footer" style="border:none;"><strong><a data-toggle="collapse" data-target="#{{Filtrele(karar.KararNo)}}" style="cursor:pointer; color:darkblue;">Detay</a></strong></div>
<div id="{{Filtrele(karar.KararNo)}}" class="collapse">
Burada Tablo halinde verilerimizi listeleyebiliriz
</div>
Bu işlemlerden sonra yapacağım tek şey verileri filtrelemek olacaktır. Bu filtreleme işlemi basitçe ID kullanımı sırasında gerekli olan ingilizce karakterler ve rakamlar dışındaki karakterleri karar numaramızdan atmak için kullanılan fonksiyondur.
scope.Filtrele = function (kararNo) {
kararNo = kararNo.toLowerCase();
var kararno = "";
var karakterArray = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "q", "w", "e", "r", "t", "y", "u", "ı", "o", "p", "ğ", "ü", "a", "s", "d", "f", "g", "h", "j", "k", "l", "ş", "i", "z", "x", "c", "v", "b", "n", "m", "ö", "ç"];
for (i = 0; i < kararNo.length; i++) {
var eklenecek = false;
for (j = 0; j < karakterArray.length; j++) {
if (karakterArray[j] == kararNo.charAt(i)) {
eklenecek = true;
break;
}
}
if (eklenecek) {
kararno += kararNo.charAt(i);
}
}
kararno += ustBirimOid;
return kararno;
};
İşte bu kadar. Dinamik olarak verilerimiz bir ID altında nasıl toplayacağımızı gördük. Siz de kendi projenize göre buradaki işlemleri değiştirerek uygulamalar yapabilirsiniz. Konunun biraz advanced düzeyde olduğunun farkındayım. Anlamadığınız konular olursa lütfen sorun. En kısa sürede yanıtlamaya çalışacağım...
Yorumlar
Yorum Gönder