انتخاب همه node های فرزند هنگام انتخاب node پدر در پلاگین JSTree

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

برای انتخاب همه نودهای فرزند هنگام انتخاب نود پدر در پلاگین JSTree، می توانید از رویداد `check_node` و `uncheck_node` در JSTree استفاده کنید. در اینجا یک مثال از چگونگی پیاده سازی این کار آورده شده است:

$('#jstree').jstree({
    'core' : {
        'data' : [
            { "id" : "2", "parent" : "#", "text" : "Parent 1" },
            { "id" : "3", "parent" : "2", "text" : "Child 1" },
            { "id" : "4", "parent" : "2", "text" : "Child 2" },
            { "id" : "5", "parent" : "#", "text" : "Parent 2" },
            { "id" : "6", "parent" : "5", "text" : "Child 3" }
        ]
    },
    'plugins' : [ 'checkbox' ]
}).on('check_node.jstree', function (e, data) {
    // انتخاب همه فرزندان
    data.instance.get_node(data.node).children.forEach(function(childId) {
        data.instance.check_node(childId);
    });
}).on('uncheck_node.jstree', function (e, data) {
    // غیرفعال کردن همه فرزندان
    data.instance.get_node(data.node).children.forEach(function(childId) {
        data.instance.uncheck_node(childId);
    });
});

این کد به شما اجازه می دهد هنگامی که چک باکس یک نود پدر فعال می شود، تمام نودهای فرزند آن نیز انتخاب شوند و هنگامی که چک باکس نود پدر غیرفعال می شود، تمام نودهای فرزند آن نیز از حالت انتخاب خارج گردند.

برای اینکه وقتی شما یک node رو انتخاب می کنید همه node های فرزند انتخاب بشن کافیه فقط خاصیت three_state : true باشه. به مثال زیر توجه کنید :

<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>

در مثال بالا در قسمتی plugins مشخص شده که در کنار node ها باید checkbox وجود داشته باشه. در ادامه هم مشخص کردیم three_state برابر با true باشه. یعنی همه گره های فرزند با انتخاب پدر انتخاب بشن.

اگر این خاصیت رو برابر false قرار بدید با انتخاب هر node هیچ کدوم از node های فرزند انتخاب نمیشن.

با سلام

ممنونم از راهنمایی شما

من هنوز یک مشکل دارم

هنگامی که روی Parent کلیک میکنم همه Childها انتخاب میشند که این درست هست. هنگامی هم که دوباره روی Parent کلیک میکنم همه Child ها از انتخاب خارج میشند و این هم درست است.

ولی من میخواهم هنگامی که تک تک همه Child ها را انتخاب میکنم Parent آن انتخاب نشود. در حقیقت Parent هنگامی انتخاب شود که روی خودش کلیک میکنیم این را چگونه حل کنم؟ با سپاس