WidgetNas

لیست پویا ListEx

لیست ها یکی از کاربردی ترین موارد برای نمایش اطلاعات، انتخاب های تک منظوره و منوها می باشد.

لیستها یکی از قدرتمندترین گزینه ها برای نمایش سری موضوعات پشت سر هم هستند. در زیر به انواع آن و نحوه استفاده از آن اشاره میگردد.

لیست پویا با استفاده از توابع جاوا اسکریپت قابلیت انتخاب، اضافه کردن به لیست و حذف را با شما میدهد.

لیست ساده

در نمایش ساده شما فقط امکان مشاهده و انتخاب در لیست را خواهید دید.

LTR

ul

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

div

Item 1
Item 2
Item 3
Item 4
Item 5

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

گزینه 1
گزینه 2
گزینه 3
گزینه 4
گزینه 5

Table

ستون 1 ستون 2 ستون 3
مقدار 1-1 مقدار 1-2 مقدار 1-3
مقدار 2-1 مقدار 2-2 مقدار 2-3
مقدار 3-1 مقدار 3-2 مقدار 3-3

کنترل لیست با Javascript

برای آنکه بتوانید به صورت آنلاین لیست خود را کنترل کنید، مثال زیر را مشاهده کنید.

برای شروع باید بدانید، همه اطلاعات در یک دیتا سورس داخلی ذخیره میشود، چه از ابتدا دارای مقدار باشد، چه بعدا به آن اضافه شود، این خصوصیت dataSource نام دارد که آرایه ای از جنس WNListNode است.

WNListNode
این نوع دارای خصوصیات زیر است. مقادیر id، index و element به صورت خودکار مقدار دهی میشوند.
مقدار text هر متنی که در ردیف باشد انتخاب خواهد شد.
مقدار value به خصوصیت value در آن ردیف مراجعه کرده و هر آنچه که مشخص شده باشد را انتخاب میکند.
مقدار link اگر در ردیف از لینک استفاده شده باشد، آنرا انتخاب میکند.
مقدار image اگر در ردیف از img یا i استفاده شده باشد، آنرا انتخاب میکند.

selectedItem
این خصوصیت به گزینه انتخاب شده اشاره دارد، مقدار null یعنی هیچ گزینه ای انتخاب نشده است.
selectedItem: WNListNode

selectedIndex
این خصوصیت به شماره ایندکس گزینه انتخاب شده اشاره دارد، مقدار -1 یعنی هیچ گزینه ای انتخاب نشده است.
selectedIndex: number

selectedValue
این خصوصیت به مقدار گزینه انتخاب شده اشاره دارد، مقدار null یعنی هیچ گزینه ای انتخاب نشده است.
selectedValue: string

checkedItems
در صورتیکه خصوصیت checkbox فعال باشد، هر ردیفی که تیک خورده باشد را به صورت آرایه ای جنس WNListNode برمیگرداند.
checkedItems: WNListNode[]

checkedValues
در صورتیکه خصوصیت checkbox فعال باشد، هر ردیفی که تیک خورده باشد مقادیر value آنها را به صورت آرایه ای برمیگرداند.
checkedValues: string[]

checkbox
در صورتیکه این خصوصیت فعال شود یعنی مقدار true بگیرد، هر ردیف قابلیت تیک خوردن را به خود میگیرد.
شما میتوانید این مقدار را با دستور خطی و خصوصیت checkbox تعیین کنید.
checkbox: boolean

checkedClear
تمامی گزینه هایی که تیکدار شدند از حالت تیک در می آورد.
checkedClear():void

checkedAll
تمامی گزینه هایی که تیکدار نشدند را به حالت تیک دار در می آورد.
checkedAll():void

checkedInvert
هر گزینه که تیک دارد را برداشته و هر گزینه که تیک ندارد را تیک دار میکند. یعنی وضعیت تیک ها را بلعکس میکند.
checkedInvert():void

select
این تابع با ورودی node مورد نظر، آنرا انتخاب میکند.
select(node: WNListNode): void

findByText
اگر میخواهید همه نودهایی که متن خاصی در آنها است را پیدا کنید از تابع استفاده کنید.
findByText(text: string, contains?: boolean, select?: boolean): WNListNode[]
مقدار مد نظر را text، عبارت شامل باشد یا نه عینا در متن باشد را با contains و اگر میخواهید اولین گزینه پیدا شده را انتخاب کند از select استفاده کنید.

findByValue
اگر میخواهید دقیقا نودی که مقدار خاصی در آن است را پیدا کنید از تابع استفاده کنید.
findByValue(value: string, select?: boolean): WNListNode
مقدار مد نظر را در value،و اگر میخواهید مقدار پیدا شده انتخاب شود از select استفاده کنید.

findByTextOrValue
اگر میخواهید همه نودهایی که متن خاصی در آنها است یا مقدار خاصی دارند را پیدا کنید از تابع استفاده کنید. findByTextOrValue(text: string, contains?: boolean, select?: boolean): WNListNode[]
مقدار مد نظر را text، عبارت شامل باشد یا نه عینا در متن باشد را با contains و اگر میخواهید اولین گزینه پیدا شده را انتخاب کند از select استفاده کنید.

filterByText
برای فیلتر کردن بر اساس عنوان های هر ردیف لیست، از این تابع استفاده میشود.
filterByText(text: string, contains?: boolean): void
متن ورودی و پارامتر بعدی مشخص میکند، این متن در بین متون باشد یا نه عینا همین متن فیلتر شود.

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

تیک دار کردن و انتخاب

اگر تمایل دارید گزینه ها به صورت جعه تیک باشند، خصوصیت checkbox را با مقدار true پر نمایید. یا این خصوصیت را از طریق جاوا اسکریپت مقدار دهی کنید.

برای درک بیشتر به مثال زیر توجه کنید.

LTR

  • Checkbox Manual Item 1

LTR

  • Checkbox Manual Item 1
  • Checkbox Manual Item 2
  • Checkbox Manual Item 3
  • Checkbox Manual Item 4

رخدادها

beforeClick
قبل از کلیک بر روی گزینه لیست، این رخداد فراخوانده میشود. اگر این رخداد مقدار false برگرداند، ادامه عملیات کلیک متوقف میشود.
این رخداد را به صورت جاوا اسکریپت به خصوصیت گفته شده نسبت دهید یا در خصوصیت 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