tableTree4j的应用实例

最近在公司的一个项目中用到了tableTree4j这个树形列表的框架，于是在完成功能的前提下，我也研究了一下这个框架，下面我将写一个案例来介绍这个框架

首先我们需要写一个js，如下

 

var action="add";
var pubmenuid;
var pubrownum;
var gridTree;

//实时统计树形菜单

// 页面加载
function initdata(){
	var deviceType=document.getElementById("deviceType").value;
				var mapid =  document.getElementById("mapid").value;
				var system= document.getElementById("system").value;
					var deviceTypezt= document.getElementById("state").value;
					var tongji=setXAxis()
					$.post("historyCount!getAll.action",
						{'deviceType':deviceType,'emap.mapid':mapid,'tongji':tongji,'system':system,'deviceTypezt':deviceTypezt},
						function(data){//ajax获取到数据源
					//在指定的div中加载指定模版的报表
						createtable(data.list);
				},'json');

}
//判断那个被选为X轴
			function setXAxis(){
				var xx=document.getElementsByName("xAxisName");
				
				for(var i=0;i<xx.length;i++){
					if(xx[i].checked){
						return xx[i].value;
					}
				}
			}
// 创建模块显示部分
function createtable(data){//此处的data为list
	gridTree=new TableTree4J("gridTree","../module/");	
	gridTree.tableDesc="<table border=\"1\" class=\"GridView\" width=\"98%\" id=\"table1\""
		+"cellspacing=\"0\" cellpadding=\"0\" style=\"border-collapse: collapse\" "
		+" align=\"center\" bordercolordark=\"#C0C0C0\" bordercolorlight=\"#C0C0C0\" >";
	var headerDataList=new Array("部门名称","正常数量","故障数量","总数");	//设置列明
	var widthList=new Array("25%","10%","10%","15%");//每列的大小
	gridTree.setHeader(headerDataList,-1,widthList,true,"headerbg");//设置表头样式
	gridTree.gridHeaderColStyleArray =
			new Array("","centerClo","centerClo","centerClo");//设置每列样式
	gridTree.gridDataCloStyleArray =
			new Array("","centerClo","centerClo","centerClo");		
	if(data!=null)
	{
	for(var i=0;i<data.length;i++){
//		alert(data[i].mapName)
			//此处放置每行要显示的数据
		var dataList=new Array(data[i].mapName,
				"<a href='javascript:void(0)' style='color:green' onclick='detail("+data[i].deviceid+","+data[i].mapId+")'>"+data[i].normal+"</a>",//在列属相上添加链接
				"<a href='javascript:void(0)' style='color:red' onclick='detail2("+data[i].deviceid+","+data[i].mapId+")'>"+data[i].fault+"</a>",
								data[i].sum);
//								"&nbsp;&nbsp;<a href='javascript:void(0)'>"
//								+"<img style='border:0px' src='../../images/bj.gif'"
//								+" width='16' height='16'/></a>&nbsp;&nbsp;"+
//								"&nbsp;&nbsp;<a href='javascript:void(0)' onclick='delmenu()'><img style='border:0px' "
//								+"src='../../images/shanchu.gif' width='16' height='16' /></a>&nbsp;&nbsp;");
			var mid = data[i].mapId;
			var parentid = data[i].parentId;
			var mapid =  document.getElementById("mapid").value;
			//当数据中的自身的部门id等于搜索条件的部门id时，将此条数据的parentid设置为-1，否则报错
			if(mid==mapid){
				parentid=-1;
			}
		gridTree.addGirdNode(dataList,mid,parentid,null,i,null,null,"","",null,"plus","onlines_minus");
	}
	
	}
	gridTree.printTableTreeToElement("system,div");//树渲染的位置
}

 

 js通过ajax向一个action发送请求，然后数据以json字符串的形式返回给前台页面，然后在回调函数中执行createtable(data)方法此处传入的为list集合，之后遍历这个list将每个值取出然后将对应的属性放入到dataList集合中，此处传入的值必须有mid和parentid这两个属性的值，此处注意，当mid等于mapid的时候我们需要将此条数据的parentid设置为-1，否则js报错。printTableTreeToElement()方法就是树形表格需要渲染到的位置的id。

在jsp中大家可以执行一个onclick事件来执行这个方法。

注意的是，list的实体类必须包含id和parentid这个两个属性才可以。