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

01:11:00 AM - 1400/05/02

دوستان برای نمایش اطلاعات به صورت سلسله مراتبی و درختی از پلاگین 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>

حالا میخوام بعضی از نودها رو غیرفعال کنم تا کاربر نتونه انتخاب کنه. لطفا راهنمایی کنید چه کدی برای این کار باید بنویسم.

به این سوال امتیاز بدهید 0 تعداد بازدید این سوال : 1865

پاسخ دهنده : fateme 01:17:00 AM - ۱۴۰۰/۰۵/۰۲

برای غیرفعال کردن نودهای درخت در پلاگین 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>

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

غیرفعال کردن نودها در JsTree