جدول آبشاری drill down در HTML
سلام دوستان ، در html جدولی دارم که برخی از سطرهای آن دارای زیر مجموعه ای از چند تا سطر زیری خودشون هستند . مثلا در سطر اول نوشته گروه خودروهای کارخانه x و سه تا سطر بعدی آن نام سه تا خودرو به اسامی x-1 , x-2,x-3 مربوط به اون کارخانه نوشته شده . سطر بعدی گروه خودروهای کارخانه y هست که دو تا زیر مجموعه y-1 , y-2 را مثلا داره . هدفم اینه که روی سطر مربوط به x که کلیک کنم سه تا سطر مربوط به اون ناپدید بشوند و دوباره که زدم ظاهر بشن . برای y هم همینطور . بعبارتی میخوام یک جدول با قابلیت drill down داشته باشم . اگر در این مورد راهنمائی کنین ممنون میشم .
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام بله من خودم react-drilld که یه همچین پکیجی واسه react هست رو توسعه دادم و میتونید کدهاشو نگاه کنید و الگو برداری کنید. واسه پیاده سازیش فرض کنیم یه همچین دیتایی با ساختار پایین داشته باشیم:
[
{
name: 'Folder A',
children: [{name: 'File A1'}, {name: 'File A2'}, {name: 'Folder AA', children: [{name: 'File AA1'}]}]
},
{
name: 'File 1'
},
{
name: 'Folder B',
children: [{name: 'File B1'}, {name: 'File A2'}, {name: 'Folder BB', children: [{name: 'File BB1'}]}]
},
]باید دیتاهای سطح اول رو نمایش بدید و وقتی که روی هرکدوم کلیک شد، ایندکس اون آیتمی که کلیک شده رو توی یک آرایه ذخیره کنید و سپس children رو نمایش بدید و باز هم اگر کلیک شد ایندکس رو به آرایه قبلی اضافه کنید و دوباره children اون بخش رو نمایش بدید اینجوری میتونید مسیرها رو همیشه نگهداری کنید.