हैलो मेरे पास JSON है और मैं बूटस्ट्रैप ट्रीव्यू बनाना चाहता हूं, लेकिन मैं यह नहीं समझ सकता कि इसे कैसे किया जाए।

[
  {
    "text": "n1",
    "nodes": [
      {
        "text": "next",
        "nodes": []
      },
      {
        "text": "hello",
        "nodes": [
          {
            "text": "test",
            "nodes": [
              {
                "text": "wow",
                "nodes": [
                  {
                    "text": "hhh",
                    "nodes": []
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "text": "fajno",
        "nodes": [
          {
            "text": "abb",
            "nodes": []
          }
        ]
      }
    ]
  }
]

यहाँ मेरे पास स्क्रिप्ट में यह json है:

var value = document.getElementById("value").value;

और फिर वृक्षदृश्य बनाने का प्रयास करें:

$('#treeview2').treeview({
            data: value
        });

एचटीएमएल में:

 <h2>Collapsed</h2>
     <div id="treeview2" class=""></div>

H2 पाठ को छोड़कर कुछ भी नहीं दिखाया गया है। बूटस्ट्रैप ट्रीव्यू बनाने के लिए यह जेसन कैसा दिखना चाहिए?

0
Senio Vak 11 जून 2018, 20:28

1 उत्तर

सबसे बढ़िया उत्तर

आपको यह सुनिश्चित करने की आवश्यकता है कि आप आवश्यक लिंक और स्क्रिप्ट टैग और उचित क्रम में जोड़ते हैं

कोड और स्टाइल के बिना डेटा का कोई मतलब नहीं है

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>

अपना ट्रीव्यू देखने के लिए इस स्निपेट को चलाएँ

$(function(){
var tvData = [
  {
    "text": "n1",
    "nodes": [
      {
        "text": "next",
        "nodes": []
      },
      {
        "text": "hello",
        "nodes": [
          {
            "text": "test",
            "nodes": [
              {
                "text": "wow",
                "nodes": [
                  {
                    "text": "hhh",
                    "nodes": []
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "text": "fajno",
        "nodes": [
          {
            "text": "abb",
            "nodes": []
          }
        ]
      }
    ]
  }
];

$('#treeview1').treeview({data:tvData});

});
#treeview1{width:200px;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>


<div id="treeview1" class="treeview"></div>
0
fnostro 11 जून 2018, 22:49