دسته بندی ها
08:04 1400/06/14

نمایش منو (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>

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

با سپاس

 

ویرایش شده در یکشنبه 14 شهریور 1400 ساعت 20:02:38
مشخصات سوال کننده :
کاربر : majid2849     امتیاز کاربر : 1     رتبه کاربر : 150
دسته بندی : Asp.net Core جاوا اسکریپت JsTree
به این سوال امتیاز بدهید    ‎−1
تعداد بازدید این سوال : 3278
پاسخ دهنده : hamid_b 20:01 1400/06/14

سوال شما شامل 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>

خروجی کدهای بالا مشابه تصویر زیر هست :

 

افزودن contextmenu به jstree

 

خب حالا باید نحوه پیاده سازی تیک زدن و برداشتن تیک همه نودهای فرزند رو بررسی کنید که این کار کمی سخت هست بنظرم. ولی توسط دستور زیر انجام میشه. (البته این دستور مرحله آخره)

$.jstree.reference('#jstree').check_all();

 

این لینک هم میتونه خیلی بهتون کمک کنه

Configuring jstree right-click contextmenu for different node types

به این پاسخ امتیاز بدهید    0
امتیاز: 510 رتبه: 4
پاسخ دهنده : majid2849 20:25 1400/06/14

با سلام

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

$.jstree.reference('#jstree').check_all();

با سپاس

ویرایش شده در یکشنبه 14 شهریور 1400 ساعت 20:34:27
به این پاسخ امتیاز بدهید    0
امتیاز: 1 رتبه: 150
2 نظر
hamid_b : توی توضیحاتم گفتم این قسمتش کمی سخت هست و این کدی که براتون قرار دادم مرحله آخر کار هست. شما وقتی روی یک node کلیک راست میکنید باید لیست همه فرزندان اون node رو بدست بیارید. حالا وقتی روی انتخاب همه کلیک می کنید توسط این کد میتونید همه فرزندان رو انتخاب کنید. دقت کنید که متد check_all میتونه آرایه به عنوان ورودی دریافت کنه. که این آرایه همون لیست فرزندان node هست که باید به این متد بدید.
امتیاز کاربر : 510   رتبه کاربر : 4   تاریخ ثبت : 08:33 1400/06/14
حذف
hamid_b : کد این کار رو در حال حاضر ندارم. اگر پیدا کردم براتون میفرستم همینجا.
امتیاز کاربر : 510   رتبه کاربر : 4   تاریخ ثبت : 08:33 1400/06/14
حذف
آخرین سوالات ثبت ‌شده
سوالات مرتبط
آموزش های پرطرفدار
آموزش ساخت اتوماسیون اداری تحت وب
آموزش ساخت سیستم فروش و انبارداری وب
آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن
آموزش ساخت سیستم آزمونگیر آنلاین
برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید.   ورود