نمایش منو (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();
با سپاس
- برای کسب و کار تلگرام پرمیوم بهتره یا واتس اپ بیزینس ؟
- جلوگیری از انتشار غیرمجاز مطالب در کانال های تلگرامی
- تفاوت های تلگرام و واتس اپ چیست ؟
- چرا استوری های واتس اپ برای دوستان نمایش داده نمیشن ؟
- چند تا استوری رایگان می تونیم تلگرام بذاریم ؟
- خطای Severity Code Description Project هنگام استارت پروژه
- کار نکردن navBar و sideBar در پروژه Asp.net core
- خطا موقع استفاده از Api در سی شارپ
- آموزش استفاده از پلاگین گردونه شانس در Asp.net core به همراه سورس
- نمایش متن به صورت فرمت شده در CkEditor
- کار با CkEditor با قابلیت آپلود عکس
- خطا در ایجاد migration در Asp.net core
- تفاوت های Asp.net core و Asp.net mvc چیه؟
- دلیل اسپم شدن ایمیل های ارسالی از سرور
- نحوه لایه بندی پروژه Core و اضافه کردن به IIS
- ارسال ایمیل در Asp.net core
- آیا میشه در mvc core از کامپونت استفاده کرد
- آپلود فایل در Asp.net core چگونه است؟
- حذف کامل یک رکورد در جدول ریلیشن شده
- اشکال در آپلود فایل ویدیو در mvc core 2
