yogi posted

Treeview in php and html , no javascript

making an tree-view but it should be without JS .
without JS because i dont have more deeply knowledge of JS . so i am skipping to use part code which i dont know more deeply.
i need tree-view in PHP , want to use only PHP and HTML no JavaScript.

i tried boostrap treeview but its not javascript free



<link href="bootstrap.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>
<div id="tree"></div>
<script type="text/javascript">
function getTree() {
 var tree = [
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1"
          },
          {
            text: "Grandchild 2"
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 2"
  },
  {
    text: "Parent 3"
  },
  {
    text: "Parent 4"
  },
  {
    text: "Parent 5"
  }
];
  return tree;
}

$('#tree').treeview({data: getTree()});
</script>

Edit Question

css-learner
answered Apr 24 '23 00:00

In PHP and HTML, a tree view can be created using HTML lists ( <ul> and <li> tags) and CSS styling, without the use of JavaScript. A tree view is a hierarchical representation of data that allows users to navigate through a nested structure. Here's an example of how to create a tree view:


<style>
    /* CSS styles for the tree view */
</style>

<ul>
    <li>
        <!-- Parent node -->
        <a href="#">Parent Node</a>
        <ul>
            <li>
                <!-- Child node -->
                <a href="#">Child Node</a>
                <ul>
                    <li>
                        <!-- Grandchild node -->
                        <a href="#">Grandchild Node</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

In this example, a nested list is created using < ul > and <li> tags. The top-level <ul> tag represents the root of the tree, and each <li> tag represents a node in the tree. Child nodes are nested inside their parent nodes using additional <ul> and <li> tags. The <a> tag is used to create a clickable link for each node.

To style the tree view, you can use CSS. For example, you can add padding and borders to each node to make it more visually appealing. You can also add icons or expand/collapse buttons using CSS pseudo-elements like ::before and ::after.

Edit Answer

yogi posted

Treeview in php and html , no javascript

css-learner answered Apr 24 '23 00:00

Related Questions

Insert link

Insert image

css-learner
answered Apr 24 '23 00:00