tableTree4j的施用实例

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为listgridTree=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这个两个属性才可以。