页面Code
<div style=" height:150px;overflow-x:scroll;margin-top:10px; " ><b>test17</b></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
返回的Json Response
responseSearchJson= { "JSON":{
"searchList":[
{
"underlyingList":[
{
"symbol":"test11",
"description":"11",
"pXSpot":"100",
"lotSize":"100"
},
{
"symbol":"test12",
"description":"12",
"pXSpot":"120",
"lotSize":"120"
}
],
"exchange":"SEHK",
"cCY":"344",
"strike":"11",
"valueDate":"2017-04-28",
"tenor":"11",
"expiryDate":"2017-04-28",
"maturityDate":"2017-04-28",
"pX":"11",
"pA":"11",
"depo":"1111",
"cover":"11",
"noOfOrders":"11",
"tPlus":"11",
"correlationid":"11",
"makeId":"xd36221",
"currentTime":""
},
{
"underlyingList":[
{
"symbol":"test21",
"description":"21",
"pXSpot":"200",
"lotSize":"200"
},
{
"symbol":"tset22",
"description":"22",
"pXSpot":"220",
"lotSize":"220"
}
],
"exchange":"SEHK",
"cCY":"344",
"strike":"22",
"valueDate":"2017-04-28",
"tenor":"22",
"expiryDate":"2017-04-28",
"maturityDate":"2017-04-28",
"pX":"22",
"pA":"22",
"depo":"22",
"cover":"22",
"noOfOrders":"22",
"tPlus":"22",
"correlationid":"22",
"makeId":"",
"currentTime":""
}
],
"errorCode":"",
"errorMsg":""
}
}
Jquery code
function populateSearchListResponse(responseJson){
if(responseJson!=""){
var repSearchListArr=responseJson.JSON.searchList;
if(repSearchListArr!=undefined){
var lengthForSearchList=repSearchListArr.length;
for(var i=0; i< lengthForSearchList;i++){
$("#myTab1").append("<tr class='table_search'>" +"<td nowrap align='center'><input type='radio' name='marsupial' value=" + i + " /></td>"+ "<td rowID="+ i + " onclick='fnRefresh(this);' nowrap align='center'><img src='<%=images%>/refresh.png' width='12px' height='12px' alt='i'></td>"+
"<td );
var underlyingListArr=responseJson.JSON.searchList[i].underlyingList;
var lengthForUnderlyingList=underlyingListArr.length;
for(var j=0;j<lengthForUnderlyingList;j++){
$("#descriptionList"+i).append(underlyingListArr[j].description+"<br>");
$("#pXSpotList"+i).append(underlyingListArr[j].pXSpot+"<br>");
}
}
这样就可以了，layout就得自己调试了。。但是这有个弊端，只能用到少量的数据，我们都知道现在是大数据时代，从数据库中我们要得到大量的数据，所以这个code
就不太适应了，而且数据一大JavaScript的执行时间过长，用户体验相当糟糕。这就需要进行翻页读数据库，即每一次翻页都要读一次数据库（无论是前后翻页）。
所以数据库的设计得好好搞了。
但是有时候还要进行Refrsh某一行，
function fnRefresh(obj){
var rowRefresh = $(obj).attr('rowID');//rowID就是拿取得这一行的行数，同时根据Json response的那一个来进行Refrsh。
}
同样进行radioButton的选取发现了一个问题，如果radiobutton只有一个话，我们用下面的方法会实效
这个是用form表单的。
for(var i=0;i<form.marsupial.length; i++) {
radioButtonLength = form.marsupial.length;
if(form.marsupial[i].checked){
var isSelected = true;
break;
}
}
所以当radiobutton只有一个的时候我们可以用这样的方法，
if(form.marsupial.length==undefined){
for(var i=0; i<document.form.elements.length; i++){
if(document.form.elements[i].type == "radio"){
if(document.form.elements[i].checked){
var isSelected = true;
break;
}
}
}
}