جدول پیشرفته

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

جدول با داده پیش فرض

در این مثال شما تمایل دارید فقط جدول شما بدون دریافت اطلاعات از سرور و به صورت دیتای ثابت مدیریت شود.

برای ساخت جدول پویا دقت کنید، حتما جدول دارای ساختار thead و tbody باشد.

برای استفاده از کلاسهای مرتبط با جدول به قسمت جدول مراجعه کنید.

حتما برای استفاده از جدول پویا بایستی خصوصیت wn-type را با مقدار table مقدار دهی کنید.

LTR

#	First Name	Last Name	Position	Birth Date
1	omid	Moridi	WidgetNas Creator	1979-04-04
2	reza	Rahmani	Developer	2000-05-17
3	Mohammad	Keshavarz	Marketing	2005-02-20

RTL

#	نام	نام خانوادگی	عنوان	تاریخ تولد
1	امید	مریدی	سازنده ویجت نس	1979-04-04
2	رضا	رحمانی	برنامه نویس	2000-05-17
3	محمد	کشاورز	بازاریابی	2005-02-20

خصوصیات و قوانین ایجاد جدول

برای ساخت جدول پویا بایستی موارد زیر را در نظر داشته باشید.

tablex

این کلاس برای معرفی جدول پویا است، میتوانید از این کلاس استفاده کنید یا کلاس مرتبط با آن را بسازید و از کلاس خود استفاده کنید.

calendar

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

cultureinfo

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

معرفی ستونها

برای معرفی ستونها بایستی در تگ thead ستونهای خود را با خصوصیات مد نظر تنظیم کنید.

پس از تعریف یک thead بایستی یک تگ tr و سپس ستون ها با استفاده از تگ th یا td استفاده کنید. برای هر td بر حسب نیاز خصوصیات زیر را تنظیم کنید.

data-field

این خصوصیت برای تنظیم نام فیلد در لیست دیتای شما میباشد. یا همان نام فیلد.

data-type

این خصوصیت جنس فیلد را مشخص میکند. این خصوصیت میتوانید یکی از موارد زیر باشد.

string فیلد به صورت رشته ای است، در صورت عدم تنظیم، این مقدار پیش فرض است.
number فیلد به صورت عددی است، چه اعشار و چه غیر آن.
date فیلد به صورت تاریخ و ساعت است.

data-format

اگر میخواهید بر اساس قوانین خاص برای نمایش مقدار استفاده کنید، آنرا در این خصوصیت مشخص کنید. برای مثال برای فیلدهای تاریخی عبارت shortdate یا longdate یا yyyy/MM/dd یا برای اعداد 0 یا 0.00 یا هر فرمت دیگر طبق استاندارد استفاده کنید.

sortable

اگر میخواهید ستون قابلیت منظم شدن داشته باشند، این خصوصیت مشخص میکند این ستون میتواند بر اساس دیتای آن مرتب شود.
اگر مقدار value را وارد کنید بر اساس مقدار آن ستون و اگر مقدار text را وارد کنید بر اساس متن نمایش داده عملیات صورت میگیرد. مقدار پیش فرض value است.
در فیلدهایی مانند تاریخ که در دو فرهنگ متفاوت قابل نمایش هستند این گزینه بسیار مهم است. یعنی اگر بر اساس value باشد بر اساس تاریخ مرتب میشود ولی اگر بر اساس text باشد، مرتب سازی بر اساس اصول متن و تاریخ تبدیل شده منظم میشود.

filterable

اگر میخواهید ستون قابلیت فیلتر شدن داشته باشند، این خصوصیت مشخص میکند این ستون میتواند بر اساس دیتای آن و مقدار وارد شده در جعبه متن ورودی فیلتر شود.
اگر مقدار value را وارد کنید بر اساس مقدار آن ستون و اگر مقدار text را وارد کنید بر اساس متن نمایش داده عملیات صورت میگیرد. مقدار پیش فرض value است.

condition

هر شرط و شروطی که میخواهید در موقع نمایش اطلاعات بررسی شود، به صورت یک تابع جاوا اسکریپت قابل برنامه ریزی است. برای مثال میخواهید، خانه هایی که اعداد منفی را دارند را قرمز کنید، شما میتوانید با استفاده از این رخداد، آنها را تنظیم کنید.
condition: (t: HTMLTableCellElement, node: WNTableNode, value: any, text: string) => void در پارمترهای این رخداد t به td ساخته شده اشاره دارد و مقدار node به ردیف اطلاعاتی که در آن است. مقدار value و text به مقادیر متناظر آن در آن سلول اشاره میکند.

command

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

خواندن اطلاعات از سرور

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

setDataSource

ارسال آرایه از اطلاعات که طبق ستونهای مندرج است. این دیتا در خصوصیت dataSource که از نوع WNTableNode است ذخیره میگردد.
setDataSource(dataSource: any, append?: boolean): void
پارامتر append مشخص میکند، دیتا به آخر اضافه شود یا نه کل دیتا جدید است. این خصوصیت برای لود جداول lazy کار آمد است.

WNTableNode

هر ردیف دیتا در این ساختار در حافظه قرار میگیرد.
privateId: number,
rowElement: HTMLTableRowElement,
fields: { [id: string]: WNTableFieldValue }
privateId: به ازای هر ردیف یک کد یکتا از 1 الی... میگیرد.
rowElement: هر زمان در جدول یک tr ساخته شود، آن را به آن رکورد متصل میکند
fields: لیست مقداری است که توسط شما به ازای هر رکود وارد شده است. با این تفاوت که آن فیلد خود دو خصوصیت value و text دارد. در خصوصیت value مقدار واقعی ذخیره شده و در خصوصیت text مقداری که برای نمایش آماده سازی میشود، نمایش داده میشود.

removeFromDataSource

برای حذف یک رکورد در dataSource از این تابع استفاده کنید.
removeFromDataSource(r: WNTableNode): boolean

updateNodeElement

برای بروز کردن دیتای یک رکورد از این تابع استفاده کنید.
updateNodeElement(r: WNTableNode): void

addToDataSource

اگر میخواهید یک ردیف دیتا به dataSource اضافه کنید از این تابع استفاده کنید. دقت کنید ورودی فقط باید دیتای خام شما طبق جدول باشد.
addToDataSource(r: any): WNTableNode

sort

اگر میخواهید عمل مرتب شدن بر اساس ستون خاص باشد، از این تابع استفاده کنید.
sort(colIndex: number): void

خصوصیات

cols

آرایه ای از تمام ستونهای تحلیل شده میباشد.
cols: WNTableCol[]
ساختار آن عبارت است از:
index: number,
caption: string,
field: string,
datatype: string,
sortable: WNTableTextValue,
filterable: WNTableTextValue,
format: string,
class: string,
elementInHeader: HTMLTableCellElement
elementFilter: HTMLInputElement
commandElement: HTMLButtonElement[],
condition: (t: HTMLTableCellElement, node: WNTableNode, value: any, text: string) => void
index: شماره ستون است
caption: عنوان ستون است
field: نام فیلد دیتای آن است
datatype: نوع فیلد دیتای آن است
sortable: قابلیت مرتب سازی دارد یا نه و بر چه اساس است
filterable: قابلیت فیلتر کردن دارد یا نه و بر چه اساس است
format: فرمت نمایش داده چه شکل میباشد
class: چه کلاس هایی را باید به ستون اضافه کند
elementInHeader: المنت آن در هدر است
elementFilter: اگر فیلتر دارد به المنت ورودی آن اشاره دارد
commandElement: اگر از نوع ستون دستوری است، لیست کلیدهای الگو را معین میکند
condition: رخدادی برای فرخوانی در هنگام هر شرط را تعیین میکند

dataSource

لیستی از دیتای ورودی با ساختار مرتبط را دارد.
dataSource: WNTableNode[]

currentPage

اگر از خاصیت صفحه بندی استفاده کردید، شماره صفحه انتخاب شده را مشخص میکند.
currentPage: number

selectedItem

زمانیکه بر روی هر ردیف جدول کلیک کنید، آن ردیف انتخاب شده و در این خصوصیت مشخص میشود.
selectedItem: WNTableNode

رخدادها

beforeFilter

قبل از عملیات فیلتر کردن داده ها صدا زده شده و اگر مقدار false برگرداند عمل لغو میشود.
beforeFilter: (t: IWNTable) => boolean

afterFilter

بعد از فیلتر کردن صدا زده میشود.
afterFilter: (t: IWNTable) => void

beforeSort

قبل از عملیات مرتب سازی داده ها صدا زده شده و اگر مقدار false برگرداند عمل لغو میشود.
beforeSort: (t: IWNTable) => boolean

afterSort

بعد از مرتب سازی صدا زده میشود.
afterSort: (t: IWNTable) => void

beforeSelected

قبل از انتخاب ردیف صدا زده شده و اگر مقدار false برگرداند عمل لغو میشود.
beforeSelected: (t: IWNTable, oldNode: WNTableNode, newNode: WNTableNode) => boolean

selectionChanged

بعد از آنکه ردیفی انتخاب شد صدا زده میشود.
selectionChanged: (t: IWNTable, oldNode: WNTableNode, newNode: WNTableNode) => void

beforePageChange

قبل از انتخاب صفحه جدید صدا زده شده و اگر مقدار false برگرداند عمل لغو میشود.
beforePageChange: (t: IWNTable, oldPage: number, newPage: number) => boolean

afterPageChange

بعد از تغییر صفحه صدا زده میشود.
afterPageChange: (t: IWNTable, oldpage: number, newpage: number) => void

command

زمانیکه بر روی یک دکمه دستوری که در بالاتر نحوه ساخت آن گفته شد کلیک شود، این رخداد فراخوانده میشود.
در پارامتر command دستوری که در آن دکمه مشخص کردید ارسال میگردد و همین طور ردیف مرتب با آن در node.
به همین منظور شما به راحتی میتوانید هر ردیف جدول را هر آنگونه که میخواهید مدیریت کنید. برای مثال حذف، ویرایش، یا حتی محتوی بیشتری از آن نمایش دهید.
command: (t: IWNTable, command:string,node: WNTableNode) => void

LTR

#	Name	Exam	Date	Points

RTL

#	نام	آزمون	تاریخ	نمره

صفحه بندی

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

در هر قسمت از صفحه که خواستید آنرا قرار دهید ولیکن حتما از کلاس pagination استفاده کنید.
تعداد صفحاتی که در نظر دارید نمایش داده شود را به صورت button معرفی کنید. تعدادی که قرار دادید، از آن استفاده خواهد شد.
اگر میخواهید دکمه ابتدا را داشته باشید، یک دکمه با کلاس first بسازید.
اگر میخواهید دکمه صفحه قبل را داشته باشید، یک دکمه با کلاس previous بسازید.
اگر میخواهید دکمه صفحه بعد را داشته باشید، یک دکمه با کلاس next بسازید.
اگر میخواهید دکمه آخرین صفحه را داشته باشید، یک دکمه با کلاس last بسازید.
هر استایل و هر شکلی که تمایل دارید بسازید و انواع کلاسها را قرار دهید.
برای نمایش تعداد ردیف در هر صفحه از خصوصیت page-seize استفاده کنید. هر تعداد ردیف را وارد کنید، آن تعداد در هر صفحه نمایش داده خواهد شد.

مثال از رخدادها

#	Name	Exam	Date	Points

Event

گروه بندی و سر جمع

بعضی از مواقع نیاز داریم جدول را بر اساس یک گروه بندی خاص به نمایش بگذاریم. این جدول با پشتیبانی از 10 گروه بندی که از 0 تا 9 مقدار دهی میشود، قابلیت نمایش را دارد، اگر تعداد بیشتری گروه بندی خواستید بایستی در فایل css خصوصیات group-10 و به بعد را تعریف کنید.

برای گروه بندی، بایستی اسم فیلدهای موجود در دیتاسورس خود را با جدا ساز , در خصوصیت groups وارد کنید. یا توسط جاوا اسکریپت این خصوصیت را مقدار دهی کنید. که آرایه ای از نام فیلدها است.

اگر میخواهید در گروه بندی یا به صورت کلی سرجمع داشته باشید بایستی زمانیکه در هدر به تعریف کردن مشخصات ستون مشغول هستید خصوصیت aggregate را نیز مقدار دهی کنید.
sum: به معنی جمع ستون
avg: به معنی میانگین ستون
count: به معنی تعداد در ستون
max: به معنی بیشترین مقدار در ستون
min: به معنی کمترین مقدار در ستون

عدد 1	عدد 2	عدد 3

ریسپانسیو کردن جدول

برای ریسپانسیو کردن جدول باید کل جدول را در یک div قرار داد و به آن div کلاس responsive را اضافه کرد و هر اندازه ای که مد نظر است به آن داد.

جدول در زمان ریسپانسیو شدن، عنوان و پانوشت به صورت چسبان همیشه نمایش داده میشود.

فقط خواندنی و غیر فعال

Readonly

#	First Name	Last Name	Position	Birth Date
1	omid	Moridi	WidgetNas Creator	1979-04-04
2	reza	Rahmani	Developer	2000-05-17
3	Mohammad	Keshavarz	Marketing	2005-02-20

Disabled

#	First Name	Last Name	Position	Birth Date
1	omid	Moridi	WidgetNas Creator	1979-04-04
2	reza	Rahmani	Developer	2000-05-17
3	Mohammad	Keshavarz	Marketing	2005-02-20