jCT 使用教程之[UI组件]Tree

SVN已经更新.最新下载：jCT最新版本

更多信息请看我博客里的jCT专题 ，或者jCT开源主页示例 里面有最简单的例子，另外我更希望感兴趣的你能直接提出html代码和需求，我们讨论如何用jCT的方法写出.

=====================================================

jCT是前台模板,其实本身就具有了设计UI组件的功能.今天拿Tree实战一下.

通常tree的数据一般是单独获取的,为了方便我们手工做一个模拟的数据.

同样,对于样式的定义,我也偷个懒,先不管他,其实要做的话很简单,不过这不是重点.

 

<ul>
<!---/*+findsub*/
	var D=this.D,pid=arguments[0];
	var re=[];
	for(var i=0;i<D.length;i++)
		if(D[i].pid==pid) re.push(D[i]);
	return re;
-->
<!---
	var D=arguments[0];
	for(var i=0;i<D.length;i++){
-->
<li>+-D[i].name-+</li>
<!---
	var Sub=this.findsub(D[i].id);
	if(Sub.length){
-->
<li><!---this.GetViewContinue(Sub);--></li>
<!---}} -->
</ul>

其中 findsub 定义了一个函数,用来查找子tree,当然你也可以把它独立出来写.GetViewContinue是递归的调用方法,因为tree的行为里有递归的成分,为什么不用GetView?因为GerView会清空输出缓存,不符合递归的需求.

就这么短!而且要控制样式,你可以随便写!比如简单到 通过判断i==0或者i==D.length-1.对应的 增加一些class或style罢了.

为了方便大家测试我在jCT的项目主页写好了一个测试的代码(仍然采用嵌入式模板的方法,因为这是最简单的用法)

http://jsct.googlecode.com/svn/trunk/jCT/example/example4.html

 

你觉得这段代码是否简洁?可制定度高呢?