Member Avatar for Rahman_1

I have a list of id like this from mysql

JM.1
JM.2
JM.2.1
JM.2.2
JM.2.1.0
JM.2.1.1
JM.3
...
...etc

I want to make a display as well
JM.1
JM.2
---JM.2.1
---JM.2.2
---------JM.2.1.0
---------JM.2.1.1
JM.3
...
...etc

How to display using PHP and How To using CSS like that, Or is there who has a reference?

Edited by Rahman_1
  • 3 Contributors
  • 2 Replies
  • 268 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

A pragmatic, maintainable way to get the “table of contents” look is to convert the dot IDs into a real tree on the server, render semantic nested lists (<ul>/<li>), and let CSS handle the visual indentation or dash-prefix. This keeps markup accessible, makes ordering/sorting easier, and aligns with ’s parent/child suggestion while offering a bit more structure than the quick dash-by-count shortcut from .

The following PHP shows a compact tree builder and renderer that attaches a depth-based dash string as a data attribute (so the visual dashes stay in CSS):

<?php
function build_tree(array $items) {
    $root = [];
    foreach ($items as $full) {
        $parts = explode('.', $full);
        $node = &$root;
        foreach ($parts as $i => $part) {
            if (!isset($node[$part])) $node[$part] = ['label' => null, 'children' => []];
            if ($i === count($parts) - 1) $node[$part]['label'] = $full;
            $node = &$node[$part]['children'];
        }
    }
    return $root;
}

function render_tree(array $tree, $depth = 0) {
    if (!$tree) return;
    echo "<ul>";
    foreach ($tree as $key => $node) {
        $prefix = str_repeat('-', $depth * 3);
        $label = htmlspecialchars($node['label'] ?? $key, ENT_QUOTES, 'UTF-8');
        echo '<li data-prefix="'.htmlspecialchars($prefix).'">'.$label;
        render_tree($node['children'], $depth + 1);
        echo "</li>";
    }
    echo "</ul>";
}
?>

A simple CSS approach uses the data attribute to show dashes and increases visual indent for nested lists:

nav.toc { font-family: monospace; }
nav.toc ul { list-style: none; margin: 0; padding: 0; }
nav.toc li { position: relative; margin: .2em 0; padding-left: .8em; }
nav.toc li::before { content: attr(data-prefix); position: absolute; left: 0; color: #333; }
nav.toc ul ul { margin-left: .6em; }

Notes and cautions: store a numeric sort key or use natural sorting when items include multi-digit segments (JM.10 vs JM.2). Normalize the DB to a parent_id if edits/queries will be frequent. Escape labels (shown above) and cache the rendered tree for large datasets to avoid repeated rebuilds. This approach preserves semantics, supports keyboard/screen-reader access, and keeps presentation separate from hierarchy logic.

Recommended Answers

All 2 Replies

Member Avatar for Member #46692

Easiest might be to store them in table as parent and child then recurse through them.

Member Avatar for Member #120589

You could use something like this:

$dotdash = array(2=>3,3=>9);

$array = array('JM.1','JM.2','JM.2.1','JM.2.2','JM.2.1.0','JM.2.1.1','JM.3');

foreach($array as $item)
{
    $dots = substr_count($item,'.');
    $add = (isset($dotdash[$dots])) ? str_repeat('-',$dotdash[$dots]) : '';
    echo $add . $item .  '<br />';   
}

OUTPUT:

JM.1
JM.2
---JM.2.1
---JM.2.2
---------JM.2.1.0
---------JM.2.1.1
JM.3

Edited by Member #120589
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.