场景：在springMVC,手动拼接的list,转成本json字符串后，传到前台，
解决：需要解析成json对象，获取对象的属性，动态生成table。
首先，以下是后台准备好的list，list中有两条记录，每条记录有五个属性：
1 String json; 2 json = JSONArray.fromObject(list).toString();//什么需要转成json字符串，就将对应的list放进去进行转换 3 map.put("balanceList", json); 4 return map;
然后，前台通过Ajax进行接收：
/* 根据查询条件动态创建table */
function test(){
//清除div中之前的table
$("#table_div").empty();
var partVersion = '0';
var containerIds = '0';
$.ajax({ //ajax取得相应的值
type: "POST",
url: "balance/banlanceList.do",
data: {'partVersion':partVersion,'containerIds':containerIds},
success:function(data){
var obj=eval("("+data.balanceList+")");//将后台传过来的list进行解析
var j=0;
for(j=0;j<obj.length;j++){
var balanceObj = obj[j];
var table= $("<table />").addClass("table"+j).appendTo($("#table_div"));//list中有多少条记录，循环创建多少个table
//每一条记录中有五个属性，创建完table后，继续创建五个行
var row1 = $("<tr/>").appendTo(".table"+j);
var row2 = $("<tr/>").appendTo(".table"+j);
var row3 = $("<tr/>").appendTo(".table"+j);
var row4 = $("<tr/>").appendTo(".table"+j);
var row5 = $("<tr/>").appendTo(".table"+j);
//每一行的列是不固定的，通过遍历自动生成列
for(var i=0;i<balanceObj.length;i++){
var o1=balanceObj[i].week;
var o2=balanceObj[i].stock;
var o3=balanceObj[i].demand;
if(i==0){
var td=$("<td />").css({ "border-right": "1px solid rgb(217,217,217)"});
row1.append(td);
td.text("编号"+balanceObj[i].containerId);
}else{
var td=$("<td />");
row1.append(td);
var week = o1.substring(4,6) + "w";
td.text(week);
}
if(i==0){
var td=$("<td />").css({ "border-right": "1px solid rgb(217,217,217)"});
row2.append(td);
td.text("计划");
}else{
var td=$("<td />");
row2.append(td);
td.text(0);
}
if(i==0){
var td=$("<td />").css({ "border-right": "1px solid rgb(217,217,217)"});
row3.append(td);
td.text("库存量");
}else{
var td=$("<td />");
row3.append(td);
td.text(o2);
}
if(i==0){
var td=$("<td />").css({ "border-right": "1px solid rgb(217,217,217)"});
row4.append(td);
td.text("需求量");
}else{
var td=$("<td />");
row4.append(td);
td.text(o3);
}
if(i==0){
var td=$("<td />").css({ "border-right": "1px solid rgb(217,217,217)"});
row5.a ppend(td);
td.text("库存-需求");
}else{
var td=$("<td />");
row5.append(td);
td.text(o2-o3);
}
}
}
tableRenderer();
}
});
}
//对table进行渲染，对第一列添加背景色，对选中添加背景色
function tableRenderer(){
$(".baobiao_tab table tbody tr td:last-child").css('border-right','none');
$(".baobiao_tab table tbody tr td:first-child").css('background','rgb(238,238,238)');
$(".baobiao_tab table:last-child tr:last-child td").css('border-bottom','none');
$(".baobiao_tab table:first-child").css('border-top','none');
$(".baobiao_tab table tbody tr").click(function(){
$(".baobiao_tab table tbody tr").css("background","rgb(255,255,255)");
$(this).css("background","rgb(223,232,246)");
})
}
)
页面div用于显示table
<div class="baobiao_tab" id="table_div"> </div>
小结：(1)List集合转换成JSON对象
用net.sf.json包下JSONArray的静态方法：fromObject(list) 这是网上大多是都是直接用此方法快捷转换JSON，但是对于Hibernate级联操作关联的对象，这个方法就会报错，如果将映射文件中的级联配置去掉就行了。
解决方法就是：JSONArray subMsgs = JSONArray.fromObject(object, config);
//提供了一个过滤作用，如果遇到关联的对象时他会自动过滤掉，不去执行关联关联所关联的对象
JsonConfig config = new JsonConfig(); config.setJsonPropertyFilter(new PropertyFilter() { public boolean apply(Object arg0, String arg1, Object arg2) { if (arg1.equals("article") ||arg1.equals("fans")) { return true; } else { return false; } } });
(2)eval在JS中将JSON的字符串解析成JSON数据格式
var dataObj=eval("("+data+")");//转换为json对象
(3)Jquery 操作dom
第一次写，表示挺好用的，一些常用的方法，appendTo,remove,empty,attr,css等等，需要多加练习