Home > Developer > Web Develop
Use zTree and json to build Tree nodes and ztreejson to build nodes
We often encounter situations where we need to build a tree structure for display. I recommend zTree and JSON.
For example:
<? Php/***** build a tree node using zTree and json **/$ arr = array (0 => array ('id' => 1, 'pi' => 0, 'name' => 'China', 'son' => array ('id' => 3, 'pi' => 1, 'name' => 'beijing',), array ('id' => 5, 'pid' => 1, 'name' => 'nanjing ', 'son' => array ('id' => 7, 'pid '=> 1, 'name' => 'jiangning',), 1 => array ('id' => 2, 'pid '=> 0, 'name' => 'usa', 'son' => array ('id' => 4, 'pid '=> 2, 'Nam E '=> 'Washington',), array ('id' => 6, 'pid '=> 2, 'name' => 'New York ',); function json_string ($ arr) {echo (str_replace ("son", "children ", json_encode ($ arr); // the child in the zTree is represented by children. json_encode only supports UTF-8 encoding.} json_string ($ arr);?> <! Doctype html public "-// W3C // DTDHTML4.01 // EN" "http://www.w3.org/tr/html4/strict.dtd"> <HTML> <HEAD> <TITLE> ztree demo </TITLE> <meta http-equiv =" content-type "content =" text/html; charset = gb2312 "> <link rel =" stylesheet "href = ".. /css/zTreeStyle/zTreeStyle.css "type =" text/css "> <script type =" text/javascript "src = ".. /js/jquery-1.11.1.min.js "> </script> <script type =" text/javascript "src = ".. /js/jquery. z Tree. all-3.5.min.js "> </script> <script type =" text/javascript "> function zTreeInit () {var zTreeObj; var setting ={}; var zNodes = eval (<? Php json_string ($ arr)?> ); ZTreeObj = $. fn. zTree. init ($ ("# treeDemo"), setting, zNodes) ;}$ (document ). ready (function () {zTreeInit ();}); </script> </HEAD> <BODY> <div> <ul id = "treeDemo" class = "ztree"> </ul> </div> </BODY> </HTML>
Not necessarily, it depends on whether the last node is sorted from left to right. The full binary tree is defined as a K-depth binary tree with n nodes. if and only when each node is k-depth
Js tree ztree, set the node parent-child relationship, through id/pid, or through children?
When initializing a node, check whether it is a parent node. The rules are as follows:
1. check whether a child node exists in the initialized node (you can use the children attribute to include the child node or the id pId corresponding to the simple data mode). If the child node exists as the parent node, if it does not exist, the next condition is used.
2. If no child node exists in the initialization node, determine whether the isParent attribute is true. If yes, it is the parent node. If not true, It is the leaf node.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
