Tablolar ve Kayıt Listeleri

1.7k görüntülenme Markdown

Tema kendi ızgara kütüphanesini getirmez: kayıt listeleri çekirdeğin Table bileşeniyle çalışır, gerisi düz markup'tır.

Genel Bakış

Bir temanın ihtiyaç duyduğu her tabloyu iki yol karşılar. Soru kaç satır olduğu değil, satırların ne olduğudur.

Kayıt listesi Hizmetler, faturalar, alan adları, talepler, hesap hareketleri, mesajlar, etkinlik. Ziyaretçi arar, filtreler, sayfalar arasında gezer ve liste boş kalabilir. Table bileşenini 'renderer' => 'list' ile kullanın.

Belge tablosu Fatura kalemleri, özellik karşılaştırması, DNS kayıtları, SMS raporu. Gezilmez, okunur ve sayfanın parçasıdır. Şablona düz markup yazın.

Ön Koşullar

Temanız etkin olmalı, böylece Theme::active() onun dizinini verir.
Bileşenin kendisini biliyor olmanız gerekir; bu makale yalnız müşteri tarafındaki görünümü anlatır.
Tema kökünüzde bir tables/ dizini bulunmalı.

Yapı

Dört katman var ve her biri ayrı bir dosyaya ait. Yukarıdaki sayfalar için çekirdek denetleyici zaten hazırdır, yani tema genelde yalnız ikinci ve üçüncü katmanı yazar.

Veri ve sayfalama Çekirdek denetleyici. Tabloyu kurar ve iki model closure'ını verir.

Satır markup'ı Sizin preset'iniz: templates/website/{Tema}/tables/{ad}.php.

Kap, araç şeridi, sayfalayıcı Sizin view'ınız: views/account/{ad}.tpl.

Etkileşim Sizin list.js dosyanız: istemci araması, filtre, sayfalama, sayaç metni, boş durum.

Adım Adım

Kayıt listesi ekleme

Sayfanın preset'ini başka bir temadan kendi tables/ dizininize kopyalayın. Dosya adı, denetleyicinin verdiği tablo adıyla aynıdır.
setRowRender() içindeki markup'ı kendi tasarım dilinizle yeniden yazın; veriye ve sıraya dokunmayın.
Aynı markup'ı view'ın {foreach} dalına da uygulayın, böylece ilk sayfa ile sonraki sayfalar aynı görünür.
Kaba üç metin köprüsünü verin, sonra sayfayı açıp sayfalar arasında gezin. Sayaç artık sizin dilinizde okunur ve bir filtre hiçbir kaydı bulamadığında boş durum görünür.

Referans

Liste görünümü bileşenin üç davranışını değiştirir.

Table::preset() İki ayrı kökten okur. Panelde templates/admin/tables/, sitede Theme::active()->dir()."tables". Admin dizinine konan bir preset hiçbir zaman bulunamaz.

setRowRender(callable) Callback'iniz satırın tamamını $row["html"] içinde döndürür. $row["data"] altındaki kolon matrisi bu görünümde kullanılmaz.

buildList(string $format = ''): string Satırları birleştirip döndürür. Kolon yok, dilimleme yok ve justBody tam çağrıyla aynı sonucu verir.

Sıralama Tıklanacak kolon başlığı olmadığı için sıra, modelin izin listesinden gelir.

İndirme Burada hiç sunulmaz. Yetki kontrolü müşteri oturumunda olumsuz döner.

Şablonun yapamadığı işi denetleyici bitirir, çünkü tema şablonu korumalı alanda bileşeni çağıramaz:

build('justBody') Satırları önceden üretir ve view'a hazır bir dize olarak verir.

getAjax() Veri adresidir ve yalnız hesap satır eşiğini aştığında dolar. View bunu kaba data-ajax olarak yazar.

ajaxControl(['baseLink' => …]) Veri isteğini yanıtlar ve yanıtladıysa boş olmayan bir dize döndürür; denetleyici o değeri olduğu gibi geri verir.

Küçük hesaplar sunucuya hiç gitmez

Eşiğin altında bütün satırlar ilk yanıtta gelir, data-ajax bulunmaz ve arama, filtre, sayfalama tarayıcıda olur. Eşiğin üstünde aynı adres tek seferde bir sayfa verir. Markup'ınız ikisinde de aynıdır; aşağıdaki satır öznitelikleri bu yüzden kendi değerlerini taşır.

Kap, etkileşim betiğinin ihtiyaç duyduğu metinleri taşır:

data-noun Betiğin içindeki anahtar, İngilizcedir ve hiç gösterilmez.

data-txt-count · data-txt-nores · data-txt-noun Çevrilmiş sayaç cümlesi, eşleşme yok cümlesi ve kaydın adı. Birini yazmazsanız o metin İngilizceye düşer.

Örnek

templates/website/MyTheme/tables/servicesList.php

/** @var \WISECP\Components\Table $table */
if (!isset($table)) return;

$table->setRowRender(function ($row) {
    $service = $row["model"];
    $name    = htmlspecialchars($service["name"]);
    $status  = $service["status"];
    $danger  = in_array($status, ['suspended', 'expired'], true) ? ' is-danger' : '';
    $link    = LinkGenerator::client("service-detail", [$service["id"]]);

    // Satırın tamamı, kendi markup'ınızla. Hiçbir yerde <td> yok.
    $row["html"] = '<article class="list-item' . $danger . '">'
        . '<a href="' . $link . '">' . $name . '</a>'
        . '<span class="badge">' . $status . '</span>'
        . '</article>';

    return $row;
});

views/account/services.tpl — kap

<div class="list-rows" data-noun="services"
     data-txt-count="{lang key='website/index/list-count'}"
     data-txt-nores="{lang key='website/index/list-nores'}"
     data-txt-noun="{lang key='website/services/noun'}">
    {$rows nofilter}
</div>

Tuzaklar

Yanlış dizindeki preset sessizce başarısız olur

Arama dosyanın var olup olmadığını sorar ve yoksa devam eder. Hiçbir kayıt tutulmaz, hata görünmez, liste yalnızca boş gelir. Satırlarınız eksikse kodunuzdan önce yolu kontrol edin.

İlk sayfa ile sonraki sayfalar eşleşmeli

View birinci sayfayı, preset ondan sonraki her sayfayı üretir. İkisi ayrışırsa ziyaretçi ileri gittiği anda satırlar şekil değiştirir.

Bir değil iki boş durum

Hiç kayıt yoksa araç şeridi, liste ve sayfalayıcı birlikte yerini boş duruma bırakır ve ilk kaydı oluşturma yolu sunulabilir. Filtre hiçbir kaydı bulamadığındaysa boş durum kabın içinde kalır ve filtreyi temizleme yolu sunar. Yalnız birini yazmak ziyaretçiyi çıkmazda bırakır.

Dosya her temada gerekir

Preset'ler temanın içinde yaşar, yani her tema yedi dosyanın kendi kopyasını taşır. Eksik kalan biri o temaya boş bir listeye mal olur.

Faydalı oldu mu?

Geri bildiriminiz için teşekkürler!

Hâlâ Yardıma mı İhtiyacınız Var?

Yukarıda bulamadığınız her şey için destek ekibimiz her zaman yanınızda.

Bize Ulaşın Destek Talebi Oluştur