درختواره جاوا اسکریپت

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

مثال مشترک

رخدادها

پارامترهای t به معنی کلاس جاوایی tree است یا همان this

پارامترهای e به معنی رخداد جاوایی مرتبط با عمل است. مثلا در کلیک کردن پارامترهای مرتبط با MouseEvent

پارامترهای n به معنی انجام عملیات بر روی کدام node است.

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

        <ul onbeforeclick="..." ...>
        WN('tree-id').wn.beforeClick = (t, node, e) => {};

        <ul onafterclick="..." ...>
        WN('tree-id').wn.afterClick = (t, node, e) => {};
    

selectionChanged
اگر درختواره قابلیت انتخاب گزینه ای داشت، بعد از انتخاب آن گزینه این رخداد صدا زده میشود.

        <ul onselectionchanged="..." ...>
        WN('tree-id'].selectionChanged = (t,node) => { }
    

beforetoggle و aftertoggle
زمانیکه یک نود، بین بسته شدن و یا باز شدن سوئیچ میکند، این رخدادها صدا زده میشود.

        <ul onbeforetoggle="..." ...>
        WN('tree-id'].beforeToggle = (t,node) => {}

        <ul onaftertoggle="..." ...>
        WN('tree-id'].afterToggle = (t,node) => {}
    

beforecollapse و aftercollapse
زمانیکه تابع collapse توسط جاوا اسکریپت صدا زده میشود، این رخدادها فعال میشوند.

        <ul onbeforecollapse="..." ...>
        WN('tree-id'].beforecollapse = (t,node) => {}

        <ul onaftercollapse="..." ...>
        WN('tree-id'].aftercollapse = (t,node) => {}
    

beforeexpand و afterexpand
زمانیکه تابع expand توسط جاوا اسکریپت صدا زده میشود، این رخدادها فعال میشوند.

        <ul onbeforeexpand="..." ...>
        WN('tree-id'].beforeexpand = (t,node) => {};

        <ul onafterexpand="..." ...>
        WN('tree-id'].afterexpand = (t,node) => {};
    

checkChanged

خصوصیات

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

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

        type WNTreeNode = {
            id:number,
            text: string,
            html: string,
            link: string,
            value: string,
            image: string,
            liElement: HTMLLIElement,
            element: HTMLElement,
            parentNode: WNTreeNode,
            children: WNTreeNode[]
        }
    

در قسمت توابع به نحوه مقدار دهی از طریق دیتای وارد شده توسط سرور یا هر تابع دیگری اشاره خواهیم کرد.

selectedItem
در صورت انتخاب هر گزینه در درختواره، گزینه انتخاب شده در این خصوصیت برگردانده میشود. این خصوصیت مقداری از خصوصیت WNTreeNode و گزینه ای در دل dataSource است. شما با استفاده از فیلدهای مرتبط با آن میتوانید به اطلاعات یا موضوعات مرتبط با آن دسترسی پیدا کنید.
در قسمت توابع، بسیار از این گزینه یا ردیف اطلاعاتی از جنس WNTreeNode استفاده میشود.

توابع

اجرای برخی دستورات برای مدیریت بهتر درختواره توسط این توابع انجام میشود.

select
اگر میخواهید گزینه ای را به صورت دستی انتخاب کنید، از این تابع استفاده کنید. ورودی آن یک ردیف اطلاعاتی از جنس WNTreeNode است.
ردیف اطلاعاتی مشخص شده در درختواره انتخاب میشود.
از این تابع زمانی استفاده میشود که مثلا شما دیتا را وارد کردید و از سمت سرور یک ردیف اطلاعاتی پیش فرض را باید انتخاب و نمایش دهید.

        WN('tree-id').wn.select(WN('tree-id').wn.dataSoure[0]);
    

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

        WN('tree-id').wn.toggle(WN('tree-id').wn.dataSoure[0]);
    

collapse
اگر گزینه ای دارای فرزند باشد و شما بخواهید مجموعه زیر آنرا بسته از این تابع استفاده کنید. ورودی آن یک ردیف اطلاعاتی از جنس WNTreeNode است.

        WN('tree-id').wn.collapse(WN('tree-id').wn.dataSoure[0]);
    

collapseWithChild
اگر گزینه ای دارای فرزند باشد و فرزندان آن نیز دارای فرزند باشند و شما بخواهید تمام مجموعه های زیر آنرا بسته از این تابع استفاده کنید. ورودی آن یک ردیف اطلاعاتی از جنس WNTreeNode است.

        WN('tree-id').wn.collapseWithChild(WN('tree-id').wn.dataSoure[0]);
    

collapsedAll
اگر میخواهید همه گزینه ها بسته باشند از این تابع استفاده کنید.

        WN('tree-id').wn.collapsedAll();
    

expand
اگر گزینه ای دارای فرزند باشد و شما بخواهید مجموعه زیر آنرا نمایش دهید از این تابع استفاده کنید. ورودی آن یک ردیف اطلاعاتی از جنس WNTreeNode است.

        WN('tree-id').wn.expand(WN('tree-id').wn.dataSoure[0]);
    

expandToParent
اگر گزینه ای در زیر مجموعه چندین شاخه است و شما بخواهید تمام مجموعه های بالا دستی آنرا باز کنید تا این گزینه نمایش داده شود از این تابع استفاده کنید. ورودی آن یک ردیف اطلاعاتی از جنس WNTreeNode است.

        WN('tree-id').wn.expandToParent(WN('tree-id').wn.dataSoure[0]);
    

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

        WN('tree-id').wn.expandChilds(WN('tree-id').wn.dataSoure[0]);
    

expandAll
اگر میخواهید همه گزینه ها باز شوند از این تابع استفاده کنید.

        WN('tree-id').wn.expandAll();
    

findByText
زمانیکه میخواهید یک یا چند ردیف اطلاعاتی را بر اساس محتوی نمایش داده شده پیدا کنید، از این تابع استفاده کنید، این تابع تمامی ردیف های اطلاعاتی که دارای چنین متنی باشد را انتخاب میکند.
پارامترها:
text: متن مورد جستجو
contains: مقدار متن شامل باشد یا نه دقیقا همان متن جستجو شود.
select: پس از جستجو، آنرا انتخاب کند یا خیر

        WN('tree-id'].findByText('text',true,true);
    

findByValue
زمانیکه میخواهید یک یا چند ردیف اطلاعاتی را بر اساس مقدار آن ردیف ها پیدا کنید، از این تابع استفاده کنید، این تابع تمامی ردیف های اطلاعاتی که دارای چنین مقداری باشد را انتخاب میکند.
پارامترها:
value: متن مورد جستجو
select: پس از جستجو، آنرا انتخاب کند یا خیر

        WN('tree-id'].findByValue('text',true,true);
    

findByTextOrValue
زمانیکه میخواهید یک یا چند ردیف اطلاعاتی را بر اساس محتوی نمایش داده شده یا مقدار آن پیدا کنید، از این تابع استفاده کنید، این تابع تمامی ردیف های اطلاعاتی که دارای چنین متنی باشد را انتخاب میکند.
برای مثال میخواهید هم بر اساس کد کالا و هم بر اساس شرح کالا جستجو داشته باشید.
پارامترها:
text: متن مورد جستجو
contains: مقدار متن شامل باشد یا نه دقیقا همان متن جستجو شود.
select: پس از جستجو، آنرا انتخاب کند یا خیر

        WN('tree-id'].findByTextOrValue('text',true,true);
    

filterByText
زمانیکه میخواهید یک سری گزینه ها را که حاوی متنی مشخص است را فقط نمایش دهید، از این تابع استفاده کنید، این تابع تمامی گزینه هایی که دارای چنین متنی باشد را نمایش داده و بقیه را مخفی میکند، در صورتیکه ردیفی پیدا شده و آن زیر مجموعه ردیف دیگری باشد، آن ردیف نیز نمایش داده میشود.
پارامترها:
text: متن مورد جستجو
contains: مقدار متن شامل باشد یا نه دقیقا همان متن جستجو شود.

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

        WN('tree-id'].filterByText('text',true);

        WN('tree-id'].filterByText('',true);
    

مدیریت dataSource

addToDataSource
اگر میخواهید به صورت دستی ردیفی به درختواره اضافه کنید از این تابع استفاده کنید.
پارامترها:
parent: این ردیف اطلاعاتی زیر مجموعه کدام ردیف است؟ مقدار null یعنی در بدنه اصلی اضافه گردد.
text: محتوی به صورت html یا متن ساده که بایستی نمایش داده شود.
link: اگر ردیف اطلاعاتی از نوع لینک است آدرس را مشخص میکند، مقدار خالی یعنی از نوع لینک نیست.
value: مقدار هر ردیف است.
image: آدرس یا محتوی تصویر هر ردیف است.

        WN('tree-id').wn.addToDataSource(null,'text','','','');
        WN('tree-id').wn.addToDataSource(WN('tree-id').wn.selectedItem,'text','','','');
    

removeFromDataSource
اگر میخواهید به صورت دستی ردیفی از درختواره حذف کنید از این تابع استفاده کنید.
پارامترها:
node: ردیف اطلاعاتی مد نظر

        WN('tree-id').wn.removeFromDataSource(WN('tree-id').wn.selectedItem);
    

updateNodeElement
اگر به هر دلیلی به صورت دستی ردیفی از درختواره را تغییر دادید و خواستید متن و تصویر یا لینک آن اعمال شود از این تابع استفاده کنید.
پارامترها:
node: ردیف اطلاعاتی مد نظر

        WN('tree-id').wn.updateNodeElement(WN('tree-id').wn.selectedItem);
    

setDataSourceByParentId
در نرم افزارهایی که دیتا را مستقیم از دیتابیس میخوانند، اغلب برای ذخیره سازی درخت از دو فیلد شناسه و والد استفاده میشود. سپس دیتا به صورت یک لیست یکسان استخراج میشود. حال که نمایش درختواره با چنین ساختاری هماهنگ نیست، برای ورود آن از این تابع استفاده کنید.
پارامترها:
parentNode: دیتای مد نظر زیر شاخه کدام ردیف باشد. مقدار null یعنی در ریشه.
dataSource: آرایه ای از دیتای مد نظر
idFieldName: نام فیلد شناسه یا id چیست؟
parentFieldName: نام فیلد والد یا parent چیست؟
parentRootValue: چه مقداری مشخص میکند در فیلد والد که موضوعات در ریشه درج شود. null یا صفر؟ یا هر مقدار دیگری.
displayFieldName: نام فیلدی که حاوی محتوی html برای نمایش است
valueFieldName: نام فیلد مقداری که بعد از انتخاب به هر ردیف نسبت داده میشود.
linkFieldName: نام فیلدی که آدرس لینک در آن است.
imageFieldName: نام فیلدی که آدرس تصویر یا html مرتبط با تصویر در آن است.
append: آیا دیتای جدید به دیتای کنونی اضافه شود یا خیر.

setDataSourceByItem
اگر ساختار دیتای شما همانند فایلهای جیسون یا جاوا اسکریپت است، یعنی یک فیلد آرایه ای در آن است که حاوی زیر شاخه ها است، میتوانید از این تابع استفاده کنید.
پارامترها:
parentNode: دیتای مد نظر زیر شاخه کدام ردیف باشد. مقدار null یعنی در ریشه.
dataSource: آرایه ای از دیتای مد نظر
itemFieldName: نام آرایه ای که دیتای زیر شاخه ها در آن است
displayFieldName: نام فیلدی که حاوی محتوی html برای نمایش است
valueFieldName: نام فیلد مقداری که بعد از انتخاب به هر ردیف نسبت داده میشود.
linkFieldName: نام فیلدی که آدرس لینک در آن است.
imageFieldName: نام فیلدی که آدرس تصویر یا html مرتبط با تصویر در آن است.
append: آیا دیتای جدید به دیتای کنونی اضافه شود یا خیر.

setDataSource
اگر ساختار دیتای شما بر اساس نوع WNTreeNode است از این تابع استفاده کنید.
پارامترها:
parentNode: دیتای مد نظر زیر شاخه کدام ردیف باشد. مقدار null یعنی در ریشه.
dataSource: آرایه ای از دیتای مد نظر
append: آیا دیتای جدید به دیتای کنونی اضافه شود یا خیر.

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

بارگذاری اطلاعات

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

در زیر یک مثال برای دریافت اطلاعات از سرور است که برای پرشدن خودکار روی هر گزینه که زیر مجموعه ندارد کلیک کنید دیتا از سرور درخواست و به شاخه انتخاب شده اضافه میشود.