غیرفعال کردن (Disable) نودهای درخت در پلاگین JsTree

پاسخ هوش مصنوعی

برای غیرفعال کردن نودهای درخت در پلاگین JsTree، می توانید از ویژگی `state` برای تنظیم `disabled` به نودهای خاص استفاده کنید. به عنوان مثال، شما می توانید در داخل داده های خود یک فیلد `state` با مقدار `disabled` برای نودهای مورد نظر اضافه کنید.

در زیر نمونه ای از نحوه اعمال این ویژگی به نودها آورده شده است:

{
    "id": "node1",
    "text": "نود 1",
    "state": { "disabled": true }, // نود غیرفعال شده
    "children": [
        {
            "id": "node2",
            "text": "نود 2",
            "state": { "disabled": false } // نود فعال
        },
        {
            "id": "node3",
            "text": "نود 3",
            "state": { "disabled": true } // نود غیرفعال شده
        }
    ]
}

شما باید اطمینان حاصل کنید که داده های JSON شما مطابق با این فرمت تنظیم شده اند تا نودهای غیرفعال به درستی کار کنند.

سپس با استفاده از روش jstree می توانید درخت را با این داده ها راه اندازی کنید:

<script>
     $(function () {
         $("#jstreeteacher").on("changed.jstree", function (e, data) {
            }).jstree({
                "core": {
                    "themes": {
                        "variant":"large"
                    },
                    "data":  @Html.Raw(ViewBag.teacherJson) ,
                },
                "checkbox": {
                    "Keep_selected_style": false
                },
                "plugins": ["checkbox"],
                checkbox: { three_state: false, cascade: "" }
            }).on("loaded.jstree", function () {
                $.jstree.reference('#jstreeteacher').open_all();
            });
     });
</script>

برای غیرفعال کردن نودهای درخت در پلاگین JsTree در ابتدا باید لیستی از نودهایی که میخواید فعال باشن رو ایجاد کنید. این لیست رو از بخش کنترلر توسط ViewBag به View ارسال کنید :

ViewBag.ypurlist = JsonConvert.SerializeObject(Query.Select(t => t.ID).ToList());

خب حالا این لیست رو باید توسط جی کوئری دریافت کنید :

var idlist = [];
idlist = '@ViewBag.yourlist';

حالا توسط متد disable_node میتونید لیستی از نودهای فعال رو مشخص کنید و بقیه غیر فعال:

<script>
     $(function () {
         $("#jstreeteacher").on("changed.jstree", function (e, data) {
            }).jstree({
                "core": {
                    "themes": {
                        "variant":"large"
                    },
                    "data":  @Html.Raw(ViewBag.teacherJson) ,
                },
                "checkbox": {
                    "Keep_selected_style":false
                },
                "plugins": ["checkbox"],
                checkbox: { three_state: false, cascade: "" }
            }).on("loaded.jstree", function () {
                $.jstree.reference('#jstreeteacher').open_all();

                var idlist = [];
                idlist = '@ViewBag.yourlist';
                for (var i = 0; i < idlist.length; i++) {
                    $.jstree.reference('#jstreeteacher').disable_node(idlist[i]);
                }
            });
     });
</script>

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