日期:2014-05-16  浏览次数:20428 次

前台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>