Seçenekler için bileşenler

URL'de ID kullanmak yerine, listeden bir ülke seçme özelliğine sahip özel Select bileşenini kullanarak filtreleme oluşturmayı tercih edebilirsiniz. Daha önce, Relselect bileşenini zaten kullandık ve çalışma mantığı çok benzer, ancak Select sayesinde, sadece mevcut tüm ülkelerden bir seçim sunmakla kalmıyor, aynı zamanda kendi seçeneklerimizi de ekleyebiliyoruz.

Bileşen Select

Select ayarına bakalım, hangi şehirlerden hangi şehirlerden olması gerektiğini belirleyecek olan seçim ve genel olarak mevcut tüm şehirleri gösterebilme özelliği eklendi.

Bir Select bileşeni oluştururken, seçimin yapılacağı seçeneklerle doldurulmalıdır. Bunu yapmak için, Relselect olduğu gibi, genel bir ülke listesi almanız gerekir. Ama sonra bu listeyi doğrudan Select göndermeyiz, onu her biri bir Select Option modeli olarak temsil edilen mevcut seçeneklere dönüştürürüz. Bu nedenle Select Options dizisini bir değişken olarak tanımlıyoruz ve onu bir döngü içinde gerekli verilerle dolduruyoruz.

Bu örnekte, bizim için temel Select Options Alanları Label (önerilen seçeneğin metni) ve Value (sayısal tanımlayıcı) olacaktır. Bu değerleri ülkenin adına ve kimliğine ayarlayın.

Döngü tamamlandığında, ülkelere göre filtrelemeden mevcut tüm şehirleri gösterecek bir seçenek daha oluşturup eklemeliyiz. Label = World ve Value = 0 olarak ayarlayalım.

Herhangi bir seçeneği belirlediğinizde, Select onChange tetikleyicisi etkinleşir. Seçili seçeneği bulmak için kullanalım ve yeni global değişken Country selected 'ye yazalım. Bu durumda ek bir kontrol yapmak gerekir ve son seçenek (tüm mevcut şehirler) seçilmişse bu değişkenin değeri boş ( null ) olarak ayarlanmalıdır.

Bu iş sürecinin son eylemi, tablodaki verileri yenileyen Refresh düğmesine basmaya başlamaktır. Yeni bir değişkenin ortaya çıkmasını hesaba katmak için iş sürecinin de biraz değiştirilmesi gerekiyor.

Artık tabloda hangi şehirlerin hangi ülkeden gösterileceğini seçebiliriz.

Dropdown bileşen

Ve son olarak, farklı seçenekler seçmenize izin veren başka bir bileşene bakalım - Dropdown . Temel farkı, belirli bir seçeneği seçmenin, yalnızca seçilen seçeneği hatırlamak yerine hemen bazı eylemleri tetiklemesi gerektiğidir. Genişletilmiş işlevselliğe sahip bir düğme olarak adlandırılabilir.

Örneğin, tablodaki ülke sil düğmesinin yerine Dropdown kullanalım. Şimdi, veri tabanındaki girişi hemen silmez, ancak silmeyi onaylayabileceğiniz veya iptal edebileceğiniz ek seçenekleri çağırır.

Bileşenin genel konfigürasyonu ile başlayalım. Görünümünü ve mevcut seçenekleri seçelim.

Ardından, iş sürecinin kendisini oluşturacağız. Ve içindeki ilk eylem, Dropdown tıklandığı kaydı belirlemek olacaktır. Sıradan düğmeler için bu değer bir Record ID olarak iletilir, ancak bu durumda, Dropdown bile basılmaz, ancak istenen seçenekle alt bileşenine basılır. Bu nedenle, giriş kimliğini almak biraz daha karmaşıktır.

Tablo öğelerini tekrarlamak için Component ID , "-" işaretiyle ayrılmış iki bölümden oluşur. İlk kısım standart bileşen kimliğidir. Ancak ikinci kısım, eklenmesi, tekrar eden bileşenlerin tanımlayıcısını benzersiz kılan yalnızca kayıt kimliğidir.

Bunu bilerek, sadece bu kimliği almamız gerekiyor. Bu yüzden stringi parçalara ayıracağız ( Split string ) ve ikinci kısmın değerini bulacağız ( index = 1 )

Bir sonraki adım olarak, hangi seçeneğin seçildiğini bulmamız gerekiyor.

Bu gerçekten silmeyi onaylama seçeneğiyse, uygun komutu çalıştırın. Aksi takdirde, herhangi bir işlem yapmanız gerekmediğinden hiçbir şey yapamazsınız.

Artık veri tabanından kayıtların silinmesi, yanlışlıkla yapılan tıklamalardan korunmaktadır.