kendo ui یکی از جذابترین و بهترین فریم ورکهای HTML5 است که استفاده از آن بین برنامه نویسان جا افتاده است و تلریک هم پشتیبانی خوبی از آن به عمل آورده است. من هم به تازگی از شیء treeview آن استفاده کردم و موقعیکه کارم با شیء Treeview به پایان رسید، یک فایل کوچک جاوااسکریپت به کار اضافه شد که شامل تعدادی از توابع چون حذف گره و ... بود که تصمیم گرفتم بر اساس مستندات و نیازهای عمومی، تعداد این توابع را بالا ببرم که برای استفاده در صفحات و پروژههای دیگر و بالا بردن امتیاز استفاده مجدد از کد از آن استفاده کنم. سورس آن در گیت هاب موجود است.
بعد از صدا زدن فایلهای مورد نیاز کندو، این فایل جاوااسکریپتی را هم به پروژه اضافه کنید. بیشتر توابع تست شده و جواب گرفته و فکر نکنم مشکلی باشد؛ هر چند عیب یابی آن هم ساده است و مشکلی برای برطرف کردن آن وجود ندارد و هر تابع دو یا سه خط بیشتر نیست.
معرفی توابع
اولین و مهمترین تابع میباشد که باید قبل از همه در زمان لود پروژه بعد از ایجاد درخت آن را صدا بزنید، در صورتی که صدا زده نشود، بقیهی توابع کار نخواهند کرد. این تابع وظیفه دارد شیء درخت معرفی شده را پیدا کرده و داخل یک متغیر عمومی به اسم treeview قرار دهد:
گره انتخابی را باز میگرداند:
گره انتخابی را غیرفعال میکند:
گره انتخابی را فعال میکند:
همهی گرهها را فعال میکند:
همهی گرهها را به سمت فرزندان باز میکند:
همه گرهها به سمت والد را جمع میکند:
گره انتخابی را حذف میکند:
گرههایی که عبارت مد نظر در آنها باشند، نمایش میابند:
گرهها را به صورت صعودی یا نزولی مرتب میکند. مقادیر پارامتر ورودی آن یا "asc" است یا "desc"
قسمت اطلاعاتی یک گره که شامل مواردی چون عنوان یا Id است را باز میگرداند:
Id گره را بر میگرداند:
متن یا مقدار گره را باز میگرداند:
مقدار گره را به مقدار جدید تغییر میدهد:
اولین گره با این متن را باز میگرداند:
گره ای با این Id را باز میگرداند:
متن دو گره را دریافت میکند، گرهای را بر اساس متن پارامتر دوم پیدا کرده و بعد از آن گره اول را با مقدار پارامتر اول درج میکند.
مقدار گرهها را دریافت میکند و بعد از پیدا کردن آنها، گره اول را به بعد از گره دوم انتقال میدهد:
دو تابع بعد مثل توابع بالا هستند و فقط به قبل آن اضافه میکند یا انتقال میدهد.
والد گره انتخابی را بر میگرداند:
گره را (در صورت داشتن فرزند) باز و بسته میکند:
گره جدیدی را اضافه میکند. پارامتر اول مقدار گره، پارامتر دوم Id گره و پارامتر سوم در صورتی که بخواهید یک زیر گره باشد، باید گره والد را به آن پاس کنید و درصورتی که زیر گره نیست آن را نال مقدار دهی کنید.
بعد از صدا زدن فایلهای مورد نیاز کندو، این فایل جاوااسکریپتی را هم به پروژه اضافه کنید. بیشتر توابع تست شده و جواب گرفته و فکر نکنم مشکلی باشد؛ هر چند عیب یابی آن هم ساده است و مشکلی برای برطرف کردن آن وجود ندارد و هر تابع دو یا سه خط بیشتر نیست.
معرفی توابع
var treeview; function FindTreeViewObj(objName) { treeview = $(objName).data("kendoTreeView"); }
FindTreeViewObj("#treeview");
function GetSelectedNode() { return treeview.select(); }
GetSelectedNode();
function DisableSelectedNode() { treeview.enable(GetSelectedNode(), false); }
DisableSelectedNode();
function EnableSelectedNode() { treeview.enable(GetSelectedNode(), true); }
EnableSelectedNode();
function EnableAllNodes() { treeview.enable(".k-item"); }
EnableAllNodes();
function ExpandAllNodes() { treeview.expand(".k-item"); }
ExpandAllNodes();
function CollapseAllNodes() { treeview.collapse(".k-item"); }
CollapseAllNodes();
function RemoveSelectedNode() { treeview.remove(GetSelectedNode()); }
RemoveSelectedNode()
function FilterTreeView(filterText) { if (filterText !== "") { treeview.dataSource.filter({ field: "text", operator: "contains", value: filterText }); } else { treeview.dataSource.filter({}); } }
FilterTreeView('my node')
function SortTreeView(sortType) { treeview.dataSource.sort({ field: "text", dir: sortType }); }
SortTreeView('asc'); SortTreeView('desc');
function GetSelectedDataItem() { return treeview.dataItem(GetSelectedNode()); }
GetSelectedDataItem();
function GetSelectedNodeId() { var data = GetSelectedDataItem(); return data.id; }
GetSelectedNodeId();
function GetSelectedNodeText() { var data = GetSelectedDataItem(); return data.Name; }
GetSelectedNodeText();
function SetSelectedNodeText(value) { var node = GetSelectedNode(); treeview.text(node, value); }
SetSelectedNodeText('new value');
function GetNodeByText(text) { return treeview.findByText(text); }
GetNodeByText('mynode');
function GetNodeByText(id) { return treeview.findByUid(id); }
GetNodeByText(4);
function InsertAfter(item, nextItem) { treeview.insertAfter({ text: "item" }, GetNodeByText(nextItem)); }
InsertAfter('new item', 'old item')
function MoveToAfter(firstItem, secondItem) { treeview.insertAfter(GetNodeByText(firstItem), GetNodeByText(secondItem)); }
MoveToAfter('firstItem', 'secondItem');
function InsertBefore(item, nextItem) { treeview.insertBefore({ text: "item" }, GetNodeByText(nextItem)); } function MoveToBefore(firstItem, secondItem) { treeview.insertBefore(GetNodeByText(firstItem), GetNodeByText(secondItem)); }
InsertBefore('new item', 'old item'); MoveToBefore('firstItem', 'secondItem');
function GetParent(node) { return treeview.parent(node); }
GetParent(GetSelectedNode());
function Toggle(node) { treeview.toggle(node); }
Toggle(GetSelectedNode());
function NewNode(nodeText, nodeValue, selectedNode) { treeview.append({ Name: nodeText, Id: nodeValue }, selectedNode); }
NewNode('new node', 1, null); NewNode('new sub node', 2, GetSelectedNode());