动态显示数据项(横向存储数据之展示)

动态展示数据项(横向存储数据之展示)
需求：
ID  NAME  TYPE  VALUE
A   LI    a     1
A   LI    b     2
A   LI    c     2
A   LI    d     2
B   WANG  b     2
B   WANG  c     2

ui展示效果

编号  姓名  a  b  c  d
A     LI    1  2  2  2
编号  姓名  b  c
B     WANG  2  2

数据库数据：




我自己展示的效果图如下：




处理速度自己当初做了个测试，展示30个用户的信息，速度还可以接受，至于大批量的展示，没有做过测试！

testJquery.html

.....<!--记得引入jquery包--》

<div id='mydiv'></div>
.....

function showInfo(){
		$.post("../temp/data.xml",function(data){
			//查找所有的usr节点
			var s="<table border='1' id='datatable'>";
			var length = $(data).find('size').attr('length');
			//alert("节点个数 "+length);
			
			for(var a=0; a<length; a++){
				s += " "
				var chlength = $(data).find('usrlength' + a).attr('chlength');
				var id = $(data).find('usr' + a).attr('id');
				var mName = $(data).find('usr' + a).attr('uname');
				////alert( id+"子节点个数 "+chlength);
				var Stname = " <tr> <td><b>序号</b></td> <td><b>员工编号</b></td> <td><b>员工姓名</b></td>";
				var Stvalue = " <tr> <td>"+ a +"</td> <td>"+ id +"</td> <td>"+ mName +"</td> ";
				
				for(var b=0; b<chlength; b++){
					//alert( id + " 节点的 " + b +" 元素");
					
					var tname = $(data).find('kpi'+b).attr('name');
					var tvalue = $(data).find('usr' + a).children('kpi' + b).text();
					//s += tname + "&nbsp;&nbsp;&nbsp;&nbsp; "+  tvalue +"</br>";
					
					Stname += "<td><b>" + tname + "</d></td>";
					Stvalue += "<td>" + tvalue + "</td>";
				}
				//alert("Stname " +Stname);
				//alert("Stvalue " +Stvalue);
				s += Stname + "</tr>" + Stvalue + "</tr>";
				//alert("s "+s);
			}
			
			s += "</table>"
			$('#mydiv').html(s);
		});
}

<?xml version="1.0" encoding="gbk"?>
<root>
<size length="4"></size>
<usr0 id="H001" uname="H001">
<kpi0 name="总经理每月布置的跟踪项目，达成率=每月实际达成跟踪项目/目标跟踪项目； 以100%为目标">35</kpi0>
<kpi1 name="主管考评">55</kpi1>
<usrlength0 chlength="2"></usrlength0>
</usr0>
<usr1 id="H002" uname="李四">
<kpi0 name="总经理每月布置的跟踪项目，达成率=每月实际达成跟踪项目/目标跟踪项目； 以100%为目标">36</kpi0>
<kpi1 name="主管考评">53</kpi1>
<usrlength1 chlength="2"></usrlength1>
</usr1>
<usr2 id="H003" uname="王四">
<kpi0 name="总经理每月布置的跟踪项目，达成率=每月实际达成跟踪项目/目标跟踪项目； 以100%为目标">37</kpi0>
<kpi1 name="主管考评">56</kpi1>
<usrlength2 chlength="2"></usrlength2>
</usr2>
<usr3 id="H004" uname="赵六">
<kpi0 name="总经理每月布置的跟踪项目，达成率=每月实际达成跟踪项目/目标跟踪项目； 以100%为目标">37</kpi0>
<kpi1 name="主管考评">56</kpi1>
<usrlength3 chlength="2"></usrlength3>
</usr3>
</root>

后台处理代码，就不提供了。

心得：
1.展示效果可以进一步通过CSS优化一下。
2.展示速度应该再做一下测试。
3.优化一下JS处理。