最近在公司的一个项目中用到了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' οnclick='detail("+data[i].deviceid+","+data[i].mapId+")'>"+data[i].normal+"</a>",//在列属相上添加链接 "<a href='javascript:void(0)' style='color:red' οnclick='detail2("+data[i].deviceid+","+data[i].mapId+")'>"+data[i].fault+"</a>", data[i].sum); // " <a href='javascript:void(0)'>" // +"<img style='border:0px' src='../../images/bj.gif'" // +" width='16' height='16'/></a> "+ // " <a href='javascript:void(0)' οnclick='delmenu()'><img style='border:0px' " // +"src='../../images/shanchu.gif' width='16' height='16' /></a> "); 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这个两个属性才可以。