提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  大数据

当前栏目

使用zTree和json构建简单树节点

节点JSONJSON 简单 构建 ztree 使用
2023-09-14 09:08:00 时间

我们经常碰到须要构建树结构展示的情况，我推荐使用zTree和JSON。

比如：

<?
php
/**     
 * *  使用zTree和json构建树节点
 * */
$arr = array(
0=>array(
    'id' => 1,
    'pid' => 0,
    'name' => 'china',
    'son' => array(
      array(
        'id' => 3,
        'pid' => 1,
        'name' => 'Beijing',
      ),
       array(
        'id' => 5,
        'pid' => 1,
        'name' => 'Nanjing',
        'son' => array(
          array(
              'id' => 7,
              'pid' => 1,
              'name' => 'Jiangning',
          )
        ),
      ),
    ),
  ),
1=>array(
    'id' => 2,
    'pid' => 0,
    'name' => 'USA',
    'son' => array(
      array(
        'id' => 4,
        'pid' => 2,
        'name' => 'Washington',
      ),
     array(
        'id' => 6,
        'pid' => 2,
        'name' => 'New York',
      ),
    ),
  ),
);
function json_string($arr){
	echo(str_replace("son","children",json_encode($arr)));//zTree中下级用children表示,json_encode仅仅支持utf-8编码
}
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.ztree.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>


输出效果例如以下：




相关文章