🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

Ramazan HABER / JQuery / dinamik treeview json master detail id parent child klasörleme yapısı oluşturma ajax jquery infinity kategori catagory

1-) JQuery - dinamik treeview json master detail id parent child klasörleme yapısı oluşturma ajax jquery

 

infinity kategori categori sonsuz kategori

 

EKRAN GÖRÜNTÜSÜ

 

KOD

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>TreeView Örneği</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />

</head>

<body>

 

<div id="treeview"></div>

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>

<script>

    $(function() {

        var data = [

            {"id": 1, "ad": "Front", "masterId": "1"},

            {"id": 2, "ad": "Önbüro", "masterId": "1"},

            {"id": 3, "ad": "HK", "masterId": "1"},

            {"id": 4, "ad": "Temizlik", "masterId": "3"},

            {"id": 5, "ad": "Back", "masterId": "5"},

            {"id": 6, "ad": "Office", "masterId": "5"}

        ];

 

        var treeData = data.map(function(item) {

            return {

                id: item.id.toString(),

                parent: item.masterId === item.id.toString() ? "#" : item.masterId,

                text: item.ad

            };

        });

 

        $('#treeview').jstree({

            'core': {

                'data': treeData,

                'check_callback': true,

                'themes': {

                    'responsive': false

                }

            },

            'plugins': ["wholerow"]

        }).on("loaded.jstree", function() {

            $(this).jstree("open_all");

        });

    });

</script>

 

</body>

</html>

 

 

 2023 Aralık 04 Pazartesi
 276