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中的数据。
定义好数据的存储结构后,下一步需要考虑的将是如何正确读取数据的问题。因为“高压水枪”包含组件和材料,而组件下又包含材料,所以需要递归的读取数据,因此考虑一个递归函数,只要当前节点不为材料,便继续往下读取信息,一直到材料层。
<?php
require '../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!”的按钮,点击按钮并将每层节点都打开时,显现如下树状图:
(完)
- 大小: 11.8 KB
- 大小: 165.6 KB
- 大小: 11.8 KB
- 大小: 8.5 KB
分享到:
相关推荐
自己改写的mztreeview2.0 ,功能更强大, 欢迎使用
只需在后追加个属性即可生成带复选框的树,并且可指定复选框的选中状态。 例如:data["-1_12345"] = "text:节点名;checked:checked;value:checkboxvalue;"; checked:指定是否选中。 value:指定checkbox的值。
梅子园系列 Mztreeview1.0 Mztreeview2.0 日历控件 日期控件 详情请访问:http://www.cnblogs.com/qiaojun/articles/1428058.html
三个常用树控件dtree最新dtree带checkbox还有mztreeview1.0跟2.0里面还有本人写的部分demo如果是常用开发请使用mztree1.0或dtree 如果有特殊需求请使用带checkbox的dtree或mztree2.0
MzTreeView + jQuery 实现地区树型选择.
js 代码生成树形 列表 已存在默认样式 进入 点击Mtree.html 直接查看效果
梅花雪的CSDN树,其名气不用多说
MzTreeView10 开发文档 菜单树开发入门
mztreeview,梅花雪 树形菜单 你们懂得
主站不能下载了 找了好久才找到 mztreeview1.0 好用的树形结构 灵活
梅花雪MzTreeView1.0 梅花雪MzTreeView1.0 梅花雪MzTreeView1.0 梅花雪MzTreeView1.0 梅花雪MzTreeView1.0
NULL 博文链接:https://zgqhyh.iteye.com/blog/257698
树控件MzTreeView,可以无限增加多级树节点,并且有节点展开,折叠状态图标
MzTreeView10。梅花网站已经不能下了。 转帖帮忙下载下
梅花雪树形控件1.0和2.0MzTreeView /*---------------------------------------------------------------------------*\ | Subject: JavaScript Framework | Author: meizz | Created: 2005-02-27 | Version: 2006-...
MzTreeView大家都知道吧,是一个效率很高的树,但是源代码是asp的,现增加asp.net调用方法.
MZTreeView
myeclipse工具开发的简单web项目,下载后解压导入到myecllipse中,可直接运行,查看结果。(详见readme.txt) 项目功能:读取指定服务器目录下文件及文件目录显示在web页面树中。