javascript DataGrid
Son 10, 15 gündür üzerinde çalıştığım datagrid nesnemi burada paylaşmak istiyorum.
Ajax-javascript alemlerinde, uzun zamandır grid üzerine button tipinde alan tanımlayıp,
tıklama olayını yazabileceğim bir datagrid nesnesi bulamıyorum. Yabancı sitelerde de bulamıyorum.
Ya aramayı beceremiyorum yada bu konuda hiç paylaşım yapılmamış.
Her neyse, ben de oturdum bu konudaki açığı gidermek için datagridimi yazdım.
Şimdilik sadece kullanımını anlatacağım, daha sonra geniş bir zaman bulduğumda nasıl yazdığımı, nasıl çalıştığını anlatırım.
Öncelikle kodlarımız burada. İki farklı şelikde sıkıştırdım, hangisini istiyorsanız onu indirip başlayabilirsiniz;
DataGrid.tar.gz
DataGrid.zip
var model = [ {"name":"key0","type":"id"}, {"name":"key1","type":"text"}, {"name":"key2","type":"text"}, {"name":"key3","type":"button"}, {"name":"key4","type":"checkbox"} ]; // datagriddeki alanlarımız belirliyoruz. //type: id,text,checkbox,button şimdilik 4 alan tipimiz var, ileride resim falan da koyabiliriz belki. var data_json = [ {"key0":"row1_data0","key1":"row1_data1","key2":"row1_data2","key3":"row1_data3","key4":"true"}, {"key0":"row2_data0","key1":"row2_data1","key2":"row2_data2","key3":"row2_data3","key4":"false"}, {"key0":"row3_data0","key1":"row3_data1","key2":"row3_data2","key3":"row3_data3","key4":"true"} ]; // datagriddeki verimizi yazıyoruz. /* bu kısım için, phpde query sonuçlarını json olarak veren bir class yazdık mı çok güzel olur. direk buraya yapıştırırız, ajax sonuçlarını da json olarak alıp, evalle bir değişkene atıp, datagridimizi yeniden doldurabiliyoruz.*/ var myDataGrid = new DataGrid("myDataGrid"); // işte datagridimizi oluşturduk. "myDataGrid", datagridi içerisine //yerleştireceğimiz elementin adı. Ben div kullanıyorum. /*İşte burası kilit nokta. Günlerce burayı yapabilmek için kastım. gridimizin buttonları için onButtonClick olayına kod yazabiliyoruz. Ve tıklandığında yazdığımız fonksiyon çalışıyor. */ myDataGrid.appendEvent("key3","onButtonClick",function(rowData_,colNumber_,rowNumber_,element_){ alert(rowData_[model[1].name]+" "+colNumber_+" "+rowNumber_+" "+element_); //alert(this); }); myDataGrid.setModel(model); // yukarıda tanımladığımız modeli datagride ekliyoruz. myDataGrid.setModelData(data_json); // veriyi yerleştiriyoruz. //Buttonları burada oluşturduğundan Bu kısımdan önce bütün olayları tanımlamamız gerekiyor.
Daha sonra buna resim alanı, sıralama ve sayfalama kısımları ekleyeceğim. Ancak şimdilik iş görme açısından bu kadar.
Sayfaya csslerinizi tanımlayın, çünkü tasarım namına pek birşey yok.
Kolay gele.