Facebook
twitter
Google Plus
RSS
JQuery ile sürükleyerek sıralanabilir (sortable) liste oluşturmak. Bu listeyi sadece Php ile değiştirmek için selectbox gibi bir input kullanmamız gerekirdi, ama artık bunu JQuery UI sürükle bırak (drag and drop) yöntemi ile hem daha görsel hem de daha kullanışlı olarak yapabiliriz. Uygulamamızda JQuery’nin yanında Php ve MySQL veritabanıda kullanacağım çünkü yaptığımız sıralamanın kaydedilmesini de istiyorum. Bu uygulamayla kategorileri ya da bir kategori altındaki yazıları kolayca sıralamamız mümkün. Yapacağımız uygulamanın (bundan sonrakiler dahil) veritabanı işlemlerinde, önceki yazımda geliştirdiğimiz PDO sınıfını kullanacağım. Yazımıza veritabanı yapısını göstererek başlayabiliriz.
| id | adi | sirasi |
| 1 | Bcakir | 1 |
| 2 | 2 | |
| 3 | 3 | |
| 4 | 4 | |
| 5 | 5 |
Yukarıdaki veritabanı şemasını ve kayıtlarını kullanacağız listemizde. Uygulamanın sql dosyası indirme linkinde de bulunacak. Şimdi uygulamanın Html ve JQuery kısmını yazabiliriz.
|
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 |
<?php include 'db/db.php'; $db = new baglan; $liste = $db->dbVerileriCek(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="author" content="bcakir" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <title>Php ve JQuery ile Sürükleyerek Sıralama</title> <script type="text/javascript"> $(document).ready(function(){ $("#liste ul").sortable({opacity: 0.5, update: function(){ var siralama = $(this).sortable("serialize"); $.post("db/db.php", siralama); }}); }); </script> <style> ul {margin: 5px; padding: 5px; list-style-type: none;} #liste {float: left; width: 200px;} #liste li {cursor: move; margin: 3px 0; padding: 5px; background-color:#abe; border: #ccc solid 1px; color:#fff;} </style> </head> <body> <div id="liste"> <ul> <li id="listeId_guncelle" style="display: none;"></li> <?php foreach($liste As $lst): ?> <li id="listeId_<?php echo $lst['id']; ?>"><?php echo $lst['adi']; ?></li> <?php endforeach; ?> </ul> </div> </body> </html> |
Listemizin içeriğini veritabanından alıp gösterdik ve listenin sıralaması sürükleyerek değiştirildiğinde sıralamayı tekrar güncellemek için post işlemi yaptık. Aşağıda ise gönderilen liste id ve sırasını kontrol edip, değiştirme işlemini Php ile MySQL veritabanına yapacağı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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<?php class baglan{ //veritabanı bilgileri const host = 'localhost'; const user = 'root'; const pass = ''; const db = 'bcakir'; public $conn; public function __construct(){ //açılışta çalıştır $this->dbBaglantiKur(); } public function dbBaglantiKur(){ //veritabanı bağlantısı kurma try{ $this->conn = new PDO("mysql:dbname=".self::db.";host=".self::host, self::user, self::pass); $this->conn->query("SET NAMES 'utf8'"); $this->conn->query('set character set utf8'); }catch(PDOException $e){ die($e->getMessage()); } } public function dbVeriyiGuncelle($id, $sira){ //kayıtı güncelleme $guncelle = $this->conn->prepare('UPDATE liste SET sirasi = :sira WHERE id = :id'); return $guncelle->execute(array('id' => $id, 'sira' => $sira)); } public function dbVerileriCek(){ //bütün listeyi alma $veriler = $this->conn->prepare('SELECT id,adi FROM liste Order By sirasi Asc'); $veriler->execute(); return $veriler->fetchAll(PDO::FETCH_ASSOC); } public function listeKontrol($liste){ //post ile gelen veri kontrolü $sayac = 1; foreach($liste As $id){ $id = strip_tags(trim($id)); $this->dbVeriyiGuncelle($id, $sayac); $sayac++; } } } //güncelle isteğinde bulunulmuşsa if(isset($_POST['listeId']) && $_POST['listeId']['0'] == 'guncelle'){ array_shift($_POST['listeId']); $baglan = new baglan; $baglan->listeKontrol($_POST['listeId']); } ?> |
Yukarıdaki gibi sıralanabilir listeleri kolayca yapabilir ve sıralamanızı veritabanı yardımıyla kaydedebilirsiniz.
