How to use JavaScript or css to display the tree structure in the thinkPHP Template

How can I use JavaScript or css to display the background data of the tree structure in the thinkPHP template?

Array (2) {[0] => array (4) {["pid"] => string (1) "0" ["id"] => string (1) "1" ["name"] => string (9) "Jiangxi province" ["son"] => array (2) {[0] => array (3) {["pid"] => string (1) "1" ["id"] => string (1) "2" ["name"] => string (9) "Nanchang city"} [1] => array (4) {["pid"] => string (1) "1" ["id"] => string (1) "3" ["name"] => string (9) "Ganzhou City" ["son"] => array (1) {[0] => array (3) {["pid"] => string (1) "3" ["id"] => string (1) "4" ["name"] => string (9) "" }}} [1] => array (4) {["pid"] => string (1) "0" ["id"] => string (1) "6" ["name"] => string (12) "Heilongjiang province" ["son"] => array (1) {[0] => array (3) {["pid"] => string (1) "6" ["id"] => string (1) "5" ["name"] => string (12) "Harbin "}}}}

How to output data in the foreground may change. In other words, you cannot write a dead style. Guidance

Reply to discussion (solution)

Are you writing css or tp tags? There are several layers of this tree, which is unknown. the tp template uses the volist label to determine whether there is son. son is a style, and son is another style.

Can tp tags provide code?

First of all, you need to use volist foreach to determine whether to use it. if, then you can use it. Baidu will be available in the manual.