前台JS获取后台的Json数据， 动态创建table并填充数据

<!-- 测试点击“查看流程记录 ”时激发的JS -->
<script language="JavaScript" type="text/JavaScript">      
  	function getJosnData(){  	
  	   alert($("#formID").val());        		
  		$.ajax({
  			url:"/support/pages/poapply/PoApply.do?actionFlag=getAllLoginInfoJsonData",
  			type: "GET",
  			dataType: "json",
  			data: { applyFormID:$("#formID").val()},
  			success: function(data){
  			      alert("dddd");
  				  //调用创建表和填充动态填充数据的方法.
  				  
				//检查后台返回的数据				
				createShowingTable(data)
  			},
  			error: function() 
  			{
  				var msg = "<bean:message key="sys.err.unknowerror"/>";
				alert(msg);
			}
		}
	  );		
  }

 //动态的创建一个table，同时将后台获取的数据动态的填充到相应的单元格
  function createShowingTable(data){
  	//获取后台传过来的jsonData,并进行解析
  	alert("------->进入当前的数据展现");
  	var dataArray = $.parseJSON(data.jsonData);
  	//此处需要让其动态的生成一个table并填充数据
  	var tableStr = "<table>";
  	tableStr = tableStr + "<thead><td>时间</td><td>处理人</td><td>具体处理</td></thead>";
  	var len = dataArray.length;
  	if(len>=10){
  		len = 10;
  	}
  	for(var i=0 ;i<len ; i++){
  		tableStr = tableStr + "<tr><td>"+ dataArray[i].PARTICIPANT_TIME +"</td>"+"<td>"+dataArray[i].PARTICIPANT_ID + "</td>"+"<td>"+dataArray[i].WF_JOB_POSITION +"</td></tr>";
  	}
  	tableStr = tableStr + "</table>";
  	//将动态生成的table添加的事先隐藏的div中.
  	$("#dataTable").html(tableStr);  	
  }      
</script>

<!-- jian实验用途 -->
	    
<div  id="dataTable" style="padding-top:12px; text-align:left">
	<a href="javascript:getJosnData()">
	    <font color="#00bbff">
	    	<bean:message key="ec.apply.license.showlog"/> 
	    </font>
	 </a>
 </div>

<!-- jian实验用途 -->
<tr><td id="formID" value="APF00000003"></td></tr>

 





 

评论

1 楼 ln_software 2015-06-04  

[u][u][u][u][u][u][u][u][u][u][u][u][/u][/u][/u][/u][/u][/u][/u][/u][/u][/u][/u][/u]