لیست پویا ListEx
لیست ها یکی از کاربردی ترین موارد برای نمایش اطلاعات، انتخاب های تک منظوره و منوها می باشد.
لیستها یکی از قدرتمندترین گزینه ها برای نمایش سری موضوعات پشت سر هم هستند. در زیر به انواع آن و نحوه استفاده از آن اشاره میگردد.
لیست پویا با استفاده از توابع جاوا اسکریپت قابلیت انتخاب، اضافه کردن به لیست و حذف را با شما میدهد.
لیست ساده
در نمایش ساده شما فقط امکان مشاهده و انتخاب در لیست را خواهید دید.
LTR
ul
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
div
Table
Col 1 | Col 2 | Col 3 |
V 1-1 | V 1-2 | V 1-3 |
V 2-1 | V 2-2 | V 2-3 |
V 3-1 | V 3-2 | V 3-3 |
RTL
ul
- گزینه 1
- گزینه 2
- گزینه 3
- گزینه 4
- گزینه 5
div
Table
ستون 1 | ستون 2 | ستون 3 |
مقدار 1-1 | مقدار 1-2 | مقدار 1-3 |
مقدار 2-1 | مقدار 2-2 | مقدار 2-3 |
مقدار 3-1 | مقدار 3-2 | مقدار 3-3 |
کنترل لیست با Javascript
برای آنکه بتوانید به صورت آنلاین لیست خود را کنترل کنید، مثال زیر را مشاهده کنید.
برای شروع باید بدانید، همه اطلاعات در یک دیتا سورس داخلی ذخیره میشود، چه از ابتدا دارای مقدار باشد،
چه بعدا به آن اضافه شود، این خصوصیت
WNListNode
این نوع دارای خصوصیات زیر است.- id: number
- index:number
- text: string
- html: string
- link: string
- value: string
- image: string
- element: HTMLElement
مقدار text هر متنی که در ردیف باشد انتخاب خواهد شد.
مقدار value به خصوصیت value در آن ردیف مراجعه کرده و هر آنچه که مشخص شده باشد را انتخاب میکند.
مقدار link اگر در ردیف از لینک استفاده شده باشد، آنرا انتخاب میکند.
مقدار image اگر در ردیف از img یا i استفاده شده باشد، آنرا انتخاب میکند.
selectedItem
این خصوصیت به گزینه انتخاب شده اشاره دارد، مقدار null یعنی هیچ گزینه ای انتخاب نشده است.
selectedIndex
این خصوصیت به شماره ایندکس گزینه انتخاب شده اشاره دارد، مقدار -1 یعنی هیچ گزینه ای انتخاب نشده است.
selectedValue
این خصوصیت به مقدار گزینه انتخاب شده اشاره دارد، مقدار null یعنی هیچ گزینه ای انتخاب نشده است.
checkedItems
در صورتیکه خصوصیت checkbox فعال باشد، هر ردیفی که تیک خورده باشد را به صورت آرایه ای جنس WNListNode برمیگرداند.
checkedValues
در صورتیکه خصوصیت checkbox فعال باشد، هر ردیفی که تیک خورده باشد مقادیر value آنها را به صورت آرایه ای برمیگرداند.
checkbox
در صورتیکه این خصوصیت فعال شود یعنی مقدار true بگیرد، هر ردیف قابلیت تیک خوردن را به خود میگیرد.شما میتوانید این مقدار را با دستور خطی و خصوصیت checkbox تعیین کنید.
checkedClear
تمامی گزینه هایی که تیکدار شدند از حالت تیک در می آورد.
checkedAll
تمامی گزینه هایی که تیکدار نشدند را به حالت تیک دار در می آورد.
checkedInvert
هر گزینه که تیک دارد را برداشته و هر گزینه که تیک ندارد را تیک دار میکند. یعنی وضعیت تیک ها را بلعکس میکند.
select
این تابع با ورودی node مورد نظر، آنرا انتخاب میکند.
findByText
اگر میخواهید همه نودهایی که متن خاصی در آنها است را پیدا کنید از تابع استفاده کنید.مقدار مد نظر را text، عبارت شامل باشد یا نه عینا در متن باشد را با contains و اگر میخواهید اولین گزینه پیدا شده را انتخاب کند از select استفاده کنید.
findByValue
اگر میخواهید دقیقا نودی که مقدار خاصی در آن است را پیدا کنید از تابع استفاده کنید.مقدار مد نظر را در value،و اگر میخواهید مقدار پیدا شده انتخاب شود از select استفاده کنید.
findByTextOrValue
اگر میخواهید همه نودهایی که متن خاصی در آنها است یا مقدار خاصی دارند را پیدا کنید از تابع استفاده کنید.مقدار مد نظر را text، عبارت شامل باشد یا نه عینا در متن باشد را با contains و اگر میخواهید اولین گزینه پیدا شده را انتخاب کند از select استفاده کنید.
filterByText
برای فیلتر کردن بر اساس عنوان های هر ردیف لیست، از این تابع استفاده میشود.متن ورودی و پارامتر بعدی مشخص میکند، این متن در بین متون باشد یا نه عینا همین متن فیلتر شود.
setDataSourceByItem
در نرم افزارهایی که دیتا را مستقیم از دیتابیس میخوانند، ساختار دیتایی متفاوت از ساختار WNListNode است، لذا توسط این تابع میتوانید مشخصات مد نظر را تعیین کنید و گزینه ها را به لیست اضافه کنید..
پارامترها:
dataSource: آرایه ای از دیتای مد نظر
displayFieldName: نام فیلدی که حاوی محتوی html برای نمایش است
valueFieldName: نام فیلد مقداری که بعد از انتخاب به هر ردیف نسبت داده میشود.
linkFieldName: نام فیلدی که آدرس لینک در آن است.
imageFieldName: نام فیلدی که آدرس تصویر یا html مرتبط با تصویر در آن است.
append: آیا دیتای جدید به دیتای کنونی اضافه شود یا خیر.
setDataSource
اگر ساختار دیتای شما بر اساس نوع WNListNode است از این تابع استفاده کنید.
پارامترها:
dataSource: آرایه ای از دیتای مد نظر
append: آیا دیتای جدید به دیتای کنونی اضافه شود یا خیر.
addToDataSource
اگر میخواهید گزینه ای به دیتا سورس خود اضافه کنید از این تابع استفاده کنید.
پارامترها:
text: متن یا html برای نمایش
link: آدرس لینک برای باز شدن آن صفحه
value: مقدار هر ردیف
image: آدرس تصویر یا تگ i
removeFromDataSource
برای حذف یک ردیف از دیتا سورس از این تابع استفاده کنید.
پارامترها:
node: نود مد نظر را مشخص کنید.
updateNodeElement
برای به روز رسانی دیتای یک نود بعد از تغییرات از این تابع استفاده کنید.
پارامترها:
node: نود مد نظر را مشخص کنید.
orderDataSourceByText
اگر میخواهید دیتا سورس بر اساس متن آنها مرتب شود از این تابع استفاده کنید.
پارامترها:
desc: آیا از بزرگ به کوچک مرتب کند یا خیر
orderDataSourceByValue
اگر میخواهید دیتا سورس بر اساس مقدار آنها مرتب شود از این تابع استفاده کنید.
پارامترها:
desc: آیا از بزرگ به کوچک مرتب کند یا خیر
برای درک بیشتر به مثال زیر توجه کنید.
LTR
- Omid
- Ali
- Reza
تیک دار کردن و انتخاب
اگر تمایل دارید گزینه ها به صورت جعه تیک باشند، خصوصیت
برای درک بیشتر به مثال زیر توجه کنید.
LTR
- Checkbox Manual Item 1
LTR
- Checkbox Manual Item 1
- Checkbox Manual Item 2
- Checkbox Manual Item 3
- Checkbox Manual Item 4
رخدادها
beforeClick
قبل از کلیک بر روی گزینه لیست، این رخداد فراخوانده میشود. اگر این رخداد مقداراین رخداد را به صورت جاوا اسکریپت به خصوصیت گفته شده نسبت دهید یا در خصوصیت html بنام onbeforeclick تعریف کنید.
afterClick
بعد از عمل کلیک کردن این رخداد فراخوانی میشود.این رخداد را به صورت جاوا اسکریپت به خصوصیت گفته شده نسبت دهید یا در خصوصیت html بنام onafterclick تعریف کنید.
selectionChanged
بعد از انتخاب هر ردیف این رخداد فراخوانی میشود.این رخداد را به صورت جاوا اسکریپت به خصوصیت گفته شده نسبت دهید یا در خصوصیت html بنام onselectionchanged تعریف کنید.
checkChanged
بعد از تغییر تیک هر ردیف این رخداد فراخوانی میشود.این رخداد را به صورت جاوا اسکریپت به خصوصیت گفته شده نسبت دهید یا در خصوصیت html بنام oncheckchanged تعریف کنید.
فقط خواندنی و غیر فعال
در برخی مواقع میخواهیم درخت مان فقط خواندنی باشد و هیچ انتخابی صورت نگیرد.
LTR
- Checkbox Item 1
- Checkbox Item 2
- Checkbox Item 3
- Checkbox Item 4
- Checkbox Item 5
- Checkbox Item 1
- Checkbox Item 2
- Checkbox Item 3
- Checkbox Item 4
- Checkbox Item 5
RTL
- گزینه تیک دار 1
- گزینه تیک دار 2
- گزینه تیک دار 3
- گزینه تیک دار 4
- گزینه تیک دار 5
- گزینه تیک دار 1
- گزینه تیک دار 2
- گزینه تیک دار 3
- گزینه تیک دار 4
- گزینه تیک دار 5