利用MzTreeView 2.0实现树结构显示的一个示例
MzTreeView 是一款优秀的JS开发框架，中文名为“梅花雪树控件”，主要用来进行树结构的显示，使得展示层次清晰。一个可能的使用场合是，需要展示一件产品下所包含的组件和材料信息。下面以“高压水枪”为例，利用MzTreeView 2.0实现该产品树结构显示。
（注：图片来源：http://a.img.youboy.com/coimg/2010/1/24/g3_2230987.jpg）
下图为“高压水枪”的产品结构图：
?
首先，需要建立产品信息数据库demo，demo中包含三张表：demo_product, demo_material和demo_tree。其中，demo_product包含了product, component和item的信息，这样做是为了减少数据库的复杂度。demo_material为材料数据表。demo_tree为树结构显示数据表，通过这张表建立demo_product和demo_material的联系，从而实现产品结构的树状显示。demo的数据字典如下图：
通过学习MzTreeView提供的关于csdn导航目录的例子，可以知道MzTreeView是依据“父节点_当前节点”来进行树结构展示的，所以要正确展示出“高压水枪”的树状结构图，必须在demo_tree中正确关联demo_product和demo_material中的数据。
定义好数据的存储结构后，下一步需要考虑的将是如何正确读取数据的问题。因为“高压水枪”包含组件和材料，而组件下又包含材料，所以需要递归的读取数据，因此考虑一个递归函数，只要当前节点不为材料，便继续往下读取信息，一直到材料层。
<?phprequire '../Smarty/Smarty.class.php';$id = trim($_GET['id']);// 产品ID$treeId = trim($_GET['treeId']);// 产品树ID$con = mysql_connect('localhost', User, Password);if (!$con)die('数据库连接错误：'.mysql_error());mysql_select_db('demo', $con);// 根据当前产品id，查询产品名称mysql_set_charset('utf8', $con);$prodResult = mysql_query("SELECT name FROM demo_product WHERE id = {$id}");$prodArray = mysql_fetch_array($prodResult, MYSQL_ASSOC);$prodName = $prodArray['name'];// 递归函数function getTree($proId){static $child = array();$result = mysql_query("SELECT * FROM demo_tree WHERE parentId = {$proId} ORDER BY parentId");if ($total = mysql_num_rows($result)){for ($i=0; $i<$total; $i++)$tree[$i] = mysql_fetch_array($result, MYSQL_ASSOC);}$total = count($tree);if ($total > 0){for ($i=0; $i<$total; $i++){if ($tree[$i]['type'] == 0){$result = mysql_query("SELECT name FROM demo_material WHERE id = {$tree[$i]['currentId']}");$material = mysql_fetch_array($result, MYSQL_ASSOC);$tree[$i]['name'] = $material['name'];$child = array_merge($child, array($tree[$i]));}elseif ($tree[$i]['type'] == 1){$result = mysql_query("SELECT name FROM demo_product WHERE id = {$tree[$i]['currentId']}");$product = mysql_fetch_array($result, MYSQL_ASSOC);$tree[$i]['name'] = $product['name'];$child = array_merge($child, array($tree[$i]));getTree($tree[$i]['id']);}}}return $child;}$test = getTree($treeId);//print_r($test);exit;// Use Smarty$smarty = new Smarty();$smarty->assign("treeId", $treeId);$smarty->assign("name", $prodName);$smarty->assign("child", $test);$smarty->display('show.html');mysql_close($con);?>需要说明一点，$id为产品的根节点标识，此处即指“高压水枪”在demo_product中对应的id。而$treeId为产品树的标识，即demo_tree中字段parentId=0所对应的id。PHP正是通过这两个值在数据库中进行指定查询，从而显示不同的树结构。$id和$treeId的值是通过GET方法传递的。
最后，在模板层，通过MzTreeView的语法结构data[]，配合Smarty的遍历语法foreach结构，便能正确为树结构显示赋值。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Product Tree</title><style type="text/css">#treeview{width: 500px;height: 200px;margin: 10px 0;padding: 10px;}</style><script src="../scripts/jsframework.js"></script><script type="text/javascript">var a;function test(){alert('Hello World');}function loadTree(){var data = {};{foreach from=$child item=item}data["{$item.parentId}_{$item.id}"] = "text: {$item.parentId}_{$item.id}_{$item.name} ;"; {/foreach}data["-1_{$treeId}"] = "text: {$name};";Using("System.Web.UI.WebControls.MzTreeView");a = new MzTreeView();a.autoSort = false;a.useCheckbox = false;a.canOperate = true;a.dataSource = data;document.getElementById("treeview").innerHTML = a.render();a.expandLevel(1);}</script></head><body><button onClick="javascript:loadTree();">Show Tree!</button><div id="treeview"></div></body></html>?
当在URL上传递正确的id和treeId时，如：http://127.0.0.1/treeview/demo/index.php?id=1&treeId=1，页面显示一个值为“Show Tree!”的按钮，点击按钮并将每层节点都打开时，显现如下树状图：
（完）
?