zTree -- jQuery 树插件在oneThink中的应用

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

zTree 是开源免费的软件。可以在官网下载插件的最新版本，应用到自己的系统中。下面说一下zTree在onethink中的应用方法。

1、        去官网下载最新版本的资源包，我下载下来之后删掉一些内容，简化了一下内容，如果用到别的功能或者内容可以自己再添加，但是一般情况下已经够用了。

2、        把下载的资源放到项目目录下，onethink框架一般放到Public文件夹下的static文件夹。如下图：

3、        最后一步就是引用插件中的js和Css来实现树的显示了。下面是头部的js和css引用，以及树的赋值：

<link rel="stylesheet" href="__STATIC__/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="__STATIC__/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="__STATIC__/zTree/js/jquery.ztree.core-3.5.js"></script>
<SCRIPT type="text/javascript" >
	var setting = {
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onClick: onClick
		}
	};
	var zNodes ={$branch};
	//alert(JSON.stringify({$branch}));//alert出所有的值
	
	//选中村子时
	function onClick(event, treeId, treeNode, clickFlag) {
		//把选中村子赋值在隐藏的input
		$('#cid').val(treeNode.id);
	}	
	$(document).ready(function(){			
		$.fn.zTree.init($("#tree"), setting, zNodes);
		//初始化选中的值
		var treeObj = $.fn.zTree.getZTreeObj("tree");
		var cid={$data['cid']};//数据库中的保存值
		var node = treeObj.getNodeByParam("id", cid);
		treeObj.selectNode(node,false);//赋值
		//给隐藏的cid赋值
		$('#cid').val(cid);
	});
  </SCRIPT>

html代码为：

<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
	                <input type="hidden" name="cid" id="cid"/>

后台数据调取为：

//给树列表赋值
        $branch=M('Branch')->field('id,pid,branch as name')->select();
        $branch=json_encode($branch);
        $this->assign('branch',$branch);

其中树默认的字段是id,pId,name等，这个字段的名称可以在jquery.ztree.core-3.5.js中修改，但注意修改的时候一定要全面。这样树就可以显示出来了！下面是我调取的村子列表。