Codeigniter'da switchery.js ile dinamik olarak durum değişikliği yapma

By Admin
In BackEnd
12/Aralık/2020
Okuma Süresi: 3 dk.

Selamlar sevgili okur,

Switchery.js ile tablolarımızdaki satırların aktiflik durumunu estetik bir şekilde gösterebiliriz. Satırların durum değişikliklerini hiç sayfa yenilemeden veritabanına kaydedersek muazzam bir iş olmuş olacak. Hadi başlayalım;

1- Github sayfasından css ve js dosyasını alıyoruz, projemizdeki ilgili klasöre yapıştırıyoruz: https://github.com/abpetkov/switchery

2- Butonun görünmesini istediğimiz yere şunu yapıştırıyoruz; 

<td class="text-center">
    <input
        data-url="<?= base_url("yonetim/durum/").$yonetim_list['RowID']; ?>"
        class="isActive js-switch"
        type="checkbox"
        <?php echo ($yonetim_list['isActive'] == 1) ? "checked" : ""; ?>
    />
</td>

Burada mantık şu: class'ı isActive olan butona tıklandığı zaman data-url verisini çekecez jquery tarafında, ayrıca buton checked durumda mı değil mi onun bilgisini de çekmiş olacaz. Sonra bu bilgileri data-url'de yazan controller'a jquery post ile yollayıp değişikliği yapmış olacaz. İşlem bundan ibaret. Yalnız data-url kısmına dikkat edin. Direkt olarak controller adı ve metodu yazdığım zaman ilginç bi şekilde bende çalışmadı, onun yerine şimdi yaptığım gibi route ile yapmaya çalıştım ve oldu. 

3- Checkbox'ı koyduğumuz sayfanın altında bi yere switchery.js'e ait şu js kodlarını yapıştırıyoruz (kendi js dosyasını çağırdığımız yerin altında olması önemli);

<script>
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

    elems.forEach(function(html) {
        var switchery = new Switchery(html, { size: 'small' });
    });
</script>

Burada size: small diyerek küçük tercih etmişim. Bunun gibi farklı renk ve ayarları buradan yönetebilirsiniz. Dökümantasyondan bakıp bu kısımda uygulayabilirsiniz. 

4- İşin jquery tarafında kodlar şöyle; 

$(".table-class").on('change', '.isActive', function(){
    var $data = $(this).prop("checked");
    var $data_url = $(this).data("url");
    if(typeof $data !== "undefined" && typeof $data_url !== "undefined"){
        $.post($data_url, { data : $data}, function (response) {
        });
    }
});

Burada daha öncesinde view'de table'a verdiğimiz .table-class'ında bir değişiklik var mı ona bakıyoruz. Varsa class'ı isActive olan checkbox'ın check olup olmadığı bilgisini prop ile alıyor $data değişkenine atıyoruz. Sonrasında data-url'i alıyoruz. Eğer data ve data-url boş değilse jquery post metodu ile datamızı controller'a yolluyoruz.

5- Controller'da isActiveSetter adında bir metot oluşturuyoruz;

public function isActiveSetter($id)
{
    if ($id){
        $isActive = ($this->input->post("data") === "true") ? 1 : 0;
        $items = $this->AdminModel->update(
                array(
                        "id" => $id
                ),
                "tablo_adi",
                array(
                        "isActive" => $isActive
                )
        );
    }
}

Burada data ile gelen değer true ya da false olarak geldiği için bu değeri integer bir değere dönüştürüyoruz ilk olarak. Sonrasında da gelen değeri veritabanındaki değer ile update ediyoruz. 

Görüşmek üzere...

 

Codeigniter ve jquery ile dinamik sıralama
Phpstorm'da boş satırları regex ile silmek