即時資料子產品設計 版本V5

版本V5

實作基準：真正完成ajax加載模闆，根據名單清單生成相應資料文本框。

做到這步，發覺資料表需要修改了：

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230862lsJH.png"></a>

隻保留一張表，增加scoreInfo字段，存json格式的比分資料，其他兩張表廢棄。

上一個版本中，定義了：

var json={"t_1_name":"美國男子籃球隊","t_2_name":"立陶宛男子籃球隊"};

這裡就是名單，資料表中的scoreInfo為空，則從“名單清單”中擷取參加該比賽的名單，然後封裝成json格式的資料：

伺服器上的做法：

//list存放了名單List&lt;Athlete&gt;

Map&lt;String,String&gt; jsonMap

= new LinkedHashMap&lt;String,String&gt;(list.size());

 for(int i=0,j=list.size();i&amp;lt;j;i++){           

int id = i+1;          

jsonMap.put("t_"+id+"_name", list.get(i).getTeamName());

 }

 JSONObject json = JSONObject.fromObject(jsonMap);

      request.setAttribute("json",json);

如果資料表中scoreInfo不為空，則擷取到：

json

= {"t_1_section_2":"5","t_1_section_1":"30","t_2_totalScore":"80","t_2_section_4":"5","t_2_section_2":"10","t_2_section_3":"5","t_1_totalScore":"65","t_1_section_4":"5","t_1_section_3":"5","t_1_name":

"美國男子籃球隊","t_2_section_1":"40","t_2_overtime_1":"10","t_1_overtime_2":"10","t_2_name":"立陶宛男子籃球隊","t_2_overtime_2":"10","t_1_overtime_1":"10"};

是以是否存在這個資料，關鍵修改之後有沒有送出。

ok，該有的，都有了，着手代碼實作：

/**

  * 根據模闆id擷取模闆内容

  * 然後重新拼裝table

  * date  :2010-4-15

  */

function getModelCode(modelId){

  if(rsc!="" &amp;&amp; modelId!=""){

      jQuery.post("/admin/match_getModelCode.action", {Action:"get","rsc":rsc,"modelId":modelId},   

             function (data, textStatus){

    //data就是傳回的模闆内容

        //開始注入

                      //需要重新拼裝table 這裡省略代碼.....

        //結束注入

       }); 

    }else{

   alert("資料不完整");

   }

背景模闆效果圖：

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230863XgHE.png"></a>

測試之後還是有小問題，就是在重新拼裝table的時候，因為設定了全局的：

var table_basic_html = "";

var table_head_html = "";

需要清空先，不然就會一直追加内容，産生多個table，如圖所示：

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_127423086422TR.png"></a>

這些都是細節調整問題了，不能一步到位處理好，調試還是需要點時間，用心調試的。

ok，到此，版本V5算是比較成功了。

本文轉自jooben 51CTO部落格，原文連結:http://blog.51cto.com/jooben/317694