نمایش منو (ContextMenu) در پلاگین JsTree و انتخاب یا عدم انتخاب فرزند ها
با سلام
من قطعه کد زیر را دارم
<script>
$(function () {
$("#jstree").on("changed.jstree", function (e, data) {
}).jstree({
"core": {
"data": JsonData,
},
"checkbox": {
"keep_selected_style":false
},
"plugins": ["checkbox"],
checkbox: {three_state:true,cascade:""}
});
});
</script>
اکنون میخواهم هنگامی که روی یک نود کلیک راست کردم منویی باز شود که در آن منو گزینه "انتخاب همه" وجود داشته باشد و با انتخاب آن گزینه همه نودهای فرزند آن نود انتخاب شوند.
با سپاس
پاسخ هوش مصنوعی
برای اضافه کردن منوی زمینه (ContextMenu) در پلاگین JsTree و انجام عملیات انتخاب یا عدم انتخاب همه نودهای فرزند، می توانید قطعه کد زیر را به کد فعلی خود اضافه کنید:
<script>
$(function () {
$("#jstree").on("changed.jstree", function (e, data) {
// عملیات انتخاب نود
}).jstree({
"core": {
"data": JsonData,
},
"checkbox": {
"keep_selected_style": false
},
"plugins": ["checkbox", "contextmenu"],
"contextmenu": {
"items": function (node) {
return {
"select_all": {
"separator_before": false,
"separator_after": false,
"label": "انتخاب همه",
"action": function () {
var tree = $.jstree.reference('#jstree');
tree.get_children_dom(node).each(function () {
tree.checkbox.toggle_node(this);
});
}
}
};
}
},
checkbox: {
three_state: true,
cascade: ""
}
});
});
</script>در این کد:
- ما پلاگین "contextmenu" را به حالت tree اضافه کردیم.
- تابع
itemsبه ما اجازه می دهد تا گزینه های دلخواه خود را به منو اضافه کنیم. - گزینه "انتخاب همه" وظیفه انتخاب تمام نودهای فرزند را بر عهده دارد.
با استفاده از این کد، می توانید از نود انتخاب شده راست کلیک کنید و گزینه "انتخاب همه" را مشاهده کنید که با انتخاب آن، همه نودهای فرزند انتخاب خواهند شد.
سوال شما شامل 2 بخش هست :
- نحوه افزودن Contextmenu به پلاگین JsTree
- و دوم هم اینکه منویی در این ContextMenu داشته باشید که توسط اون بتونید همه فرزندان رو انتخاب کنید یا از حالت انتخاب در بیارید.
ببینید اگر هدف شما این هست که با انتخاب یک node همه فرزندان اون انتخاب بشن یا از حالت انتخاب دربیان که این کار رو که خود checkbox موجود در پلاگین انجام میده. در کدهای خودتون هم این کار انجام شده در بخش زیر
checkbox: {three_state:true,cascade:""}
اما اگر هدفتون این هست که حتما این کار توسط ContextMenu انجام بشه. میتونید توسط کدهای زیر ContextMenu رو استفاده کنید. کدهای زیر رو در یک صفحه html کپی و پیست کنید و تست کنید.
افزودن ContextMenu به پلاگین JsTree
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Simple jsTree</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript">
$(function () {
var jsondata = [
{ "id": "ajson1", "parent": "#", "text": "Simple root node" },
{ "id": "ajson2", "parent": "#", "text": "Root node 2" },
{ "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
{ "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
];
createJSTree(jsondata);
});
function createJSTree(jsondata) {
$('#SimpleJSTree').jstree({
"core": {
"check_callback": true,
'data': jsondata
},
"plugins": ["contextmenu"],
"contextmenu": {
"items": function ($node) {
var tree = $("#SimpleJSTree").jstree(true);
return {
"Create": {
"separator_before": false,
"separator_after": true,
"label": "Create",
"action": false,
"submenu": {
"File": {
"seperator_before": false,
"seperator_after": false,
"label": "File",
action: function (obj) {
$node = tree.create_node($node, { text: 'New File', type: 'file', icon: 'glyphicon glyphicon-file' });
tree.deselect_all();
tree.select_node($node);
}
},
"Folder": {
"seperator_before": false,
"seperator_after": false,
"label": "Folder",
action: function (obj) {
$node = tree.create_node($node, { text: 'New Folder', type: 'default' });
tree.deselect_all();
tree.select_node($node);
}
}
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
tree.edit($node);
}
},
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Remove",
"action": function (obj) {
tree.delete_node($node);
}
}
};
}
}
});
}
</script>
</head>
<body>
<div id="SimpleJSTree"></div>
</body>
</html>
خروجی کدهای بالا مشابه تصویر زیر هست :
خب حالا باید نحوه پیاده سازی تیک زدن و برداشتن تیک همه نودهای فرزند رو بررسی کنید که این کار کمی سخت هست بنظرم. ولی توسط دستور زیر انجام میشه. (البته این دستور مرحله آخره)
$.jstree.reference('#jstree').check_all();
این لینک هم میتونه خیلی بهتون کمک کنه
Configuring jstree right-click contextmenu for different node types
با سلام
ممنون از جوابتون. ولی من متوجه نشدم قطعه کد زیر چه موقعه اجرا میشه؟ آیا هنگام کلیک راست روی یک نود و انتخاب گزینه انتخاب همه ؟
$.jstree.reference('#jstree').check_all();
با سپاس
- آموزش استفاده از پلاگین گردونه شانس در Asp.net core به همراه سورس
- نمایش متن به صورت فرمت شده در CkEditor
- آموزش استفاده از SignalR در Asp.net Core با مثال عملی
- ادغام چند گزارش استیمول سافت بصورت پی دی اف در یک فایل
- نحوه تغییر استایل کامپوننت select2 چگونه است ؟
- چگونه امنیت پروژه را در Asp.net Core افزایش دهیم ؟
- ارسال پارامتر در دستور window.open جی کویری
- ارسال پارامتر از طریق جاوااسکریپت با کلیک روی تگ a
- خطای 500 زمان اجرا شدن پروژه روی هاست
- کویری نویسی در استیمول سافت جهت فیلتر اطلاعات
- کار با CkEditor با قابلیت آپلود عکس
- خطا در ایجاد migration در Asp.net core
- تفاوت های Asp.net core و Asp.net mvc چیه؟
- دلیل اسپم شدن ایمیل های ارسالی از سرور
- نحوه لایه بندی پروژه Core و اضافه کردن به IIS
- ارسال ایمیل در Asp.net core
- آیا میشه در mvc core از کامپونت استفاده کرد
- آپلود فایل در Asp.net core چگونه است؟
- حذف کامل یک رکورد در جدول ریلیشن شده
- اشکال در آپلود فایل ویدیو در mvc core 2
