Müşteri Listesi Etkileşimi

1.7k görüntülenme Markdown

Preset'inizin yazdığı satırlar ile onları arayan, sıralayan ve sayfalayan betik sabit bir öznitelik kümesi üzerinden buluşur.

Genel Bakış

Kayıt listesi iki kipten biriyle sunulur ve tema markup'ı ikisinde de aynıdır. Kipi satır sayısı belirler, siz değil.

İstemci kipi Eşiğin altında bütün satırlar ilk yanıtta gelir ve kapta data-ajax bulunmaz. Arama, filtre, sıralama ve sayfalama tarayıcıda, her satırın öznitelikleri üzerinden çalışır.
Sunucu kipi Eşiğin üstünde kap data-ajax taşır ve sayfalar tek tek yüklenir. Toplamlar yerel olarak sayılmak yerine yanıttan gelir.
Öznitelikler iki kipte de zorunludur

İstemci kipi bir filtrenin neyi seçtiğine bunlara bakarak karar verir. Sunucu kipi de sıralama ve görsel ölçerler için onları okumaya devam eder. Birini yazmayan satır reddedilmez ve hata görünmez: ait olduğu filtreyle sessizce eşleşmeyi bırakır.

Ön Koşullar

  • Preset'iniz satırı $row["html"] içinde döndürüyor olmalı.
  • View'ınızda .list-rows kabı ve üç metin özniteliği bulunmalı.
  • Temanızda bir list.js olmalı; genelde başka bir temanınkini kopyalayarak başlanır.

Yapı

Betik için üç düğüm önemlidir ve onları sınıf ya da rolle bulur, konumla değil.

.list-rows Kap. Sunucu kipinde veri adresini, iki kipte de metinleri taşır.
.list-item Preset'inizin yazdığı bir satır; aşağıdaki öznitelikleri taşır.
[data-role="empty"] Eşleşme yok bloğu. Kabın içinde durur ve betik onu gösterir; listenin tamamının yerine geçen sıfır kayıt bloğuyla aynı şey değildir.

Referans

Satır öznitelikleri

Preset'iniz bunları satır elemanına yazar. Her birinin tek bir okuyucusu vardır, yani birini yazmamak tam olarak o özelliği devre dışı bırakır.

ÖznitelikDeğerYazılmazsa ne çalışmaz
data-statusdurum anahtarıDurum filtresi ve varsayılan sıralama
data-grouptip anahtarıTip filtresi; değer araç şeridindeki seçenekle aynı olmalı
data-flagbölüm anahtarıListenin üstündeki kutu şeridi
data-namegörünen adArama; önce bunu okur
data-searchek kelimelerAdda olmayan bir şeyde arama: alan adı, numara
data-priceham tutarFiyata göre sıralama
data-duesaniye değeriVadeye göre sıralama ve kalan süre ölçeri
data-startsaniye değeriYeniye göre sıralama ve iki ucu isteyen dönem ölçeri

Bu değerler saniyedir, biçimlenmiş tarih değil: betik onları sayı olarak karşılaştırır ve biçimlenmiş bir değer sıfır okunur.

Kap öznitelikleri

data-ajax View, tablonun kendi adresinden yazar ve yalnız sunucu kipinde bulunur. Yokluğu istemci kipinin işaretidir, bu yüzden yer tutucu bir değer yazmayın.
data-noun Betiğin içindeki anahtar, İngilizcedir ve kimseye gösterilmez.
data-txt-count · data-txt-nores · data-txt-noun Sayaç cümlesi, eşleşme yok cümlesi ve kaydın adı. İlk ikisi aşağıdaki yer tutucuları taşır.

Cümleler birleştirilmez, doldurulur; böylece ifade çevirmenin elinde kalır:

_START_ · _END_ · _TOTAL_ · _NOUN_ Sayfadaki ilk satır, son satır, süzülmüş toplam ve data-txt-noun'daki kelime. Her biri birden çok kez geçebilir.

Sunucu yanıtı

Sunucu kipinde betik tablonun kendi adresine sorar ve panelin kullandığı şekli bekler:

sayfa isteğine gelen yanıt
{
  "type": "partial",
  "total": 240,
  "total_filter": 18,
  "body": "<article class=\"list-item\" ...>...</article>..."
}

İstek page, perPage, search, filter[type], filter[status], order ve direction taşır. Hepsini bileşen kurar, yani araç şeridine eklediğiniz bir filtre sorguya ancak denetleyici onu bildirdiyse ulaşır.

Örnek

preset'inizin döndürdüğü satır
$row["html"] = '<article class="list-item"'
    . ' data-status="' . $status . '"'
    . ' data-group="'  . $type . '"'
    . ' data-flag="'   . $segment . '"'
    . ' data-name="'   . htmlspecialchars($name) . '"'
    . ' data-search="' . htmlspecialchars($domain . ' ' . $service["id"]) . '"'
    . ' data-price="'  . $amount . '"'
    . ' data-due="'    . strtotime($service["duedate"]) . '"'
    . ' data-start="'  . strtotime($service["cdate"]) . '">'
    . $body
    . '</article>';

Tuzaklar

Bir filtre değerinin iki ucu vardır

Araç şeridindeki seçenek ile satırdaki öznitelik aynı değeri taşımak zorundadır. İkisi ayrıştığında filtre hiçbir şey seçmez ve boş sonuç geçerli bir yanıt olduğu için kimseye bir hata olduğu söylenmez.

İki boş blok farklıdır

Eşleşme yok bloğu kabın içinde durur ve betik onu gösterir. Sıfır kayıt bloğu araç şeridi, liste ve sayfalayıcının yerine birlikte geçer ve view buna betik başlamadan önce karar verir. Yalnız birini yazmak ziyaretçiyi boş bir sayfada çıkışsız bırakır.

Yazmak önceki isteği iptal eder

Sunucu kipinde her tuş vuruşu bir öncekinin yerine geçer ve eski istek bilerek düşürülür. Üzerine kendi zamanlayıcınızı eklemeyin: ikisi birlikte listeyi yanıtlar arasında titretir.

Biçimlenmiş değer sıralamayı bozar

Tarihler saniye, tutarlar ham sayı olarak girer. Para simgesi ya da binlik ayracı taşıyan bir değer sıfır okunur ve her sıralamada dibe iner.

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.