1. 程式人生 > >JS繫結表格資料

JS繫結表格資料

用jQuery獲取資料,頁面用||分割需要繫結的欄位,然後用JS迴圈將獲取的資料新增到需要繫結的欄位上

前臺頁面:

<!-- 表體 -->
<div style="position:absolute;top:85px;bottom:30px; left:10px;right:10px;overflow-x:auto;overflow-y:scroll;"
onscroll="document.getElementById('tabletitle').scrollLeft = this.scrollLeft;">
<table class="am-table am-table-striped am-table-hover table-main" style="font-size:12px;table-layout:fixed;padding:0;margin:0;">
<thead style="width:100%;display:none;">
<tr style="text-align:left;width:100%;">                                                        
<th width="20px">#</th>                                           
                <th width="100px">檔名稱</th>
                <th width="150px">模組名稱</th>               
                <th width="150px">匯出時間</th>
                <th width="150px">操作</th>
</tr>
</thead> 

<!--資料表格-->
<tbody id="tabledata" style="height:100%;width:100%;padding:0;">
   
</tbody>            
</table>
</div>

<!--模板表格-->

<table id="rowsample" style="display:none;"> <!-- 這裡就需要用table來取到tbody標籤,否則tr td在轉字串時就被自動解析掉了 -->
<tr id="rowtr_||serialid||" class="rowtr">   
   <td width="20px">||serialid||</td>                                          
       <td width="100px">||filename||</td>
       <td width="150px">||modulename||</td>               
       <td width="150px">||requesttime||</td>
       <td width="150px">
       <input type="hidden" id="status" value="||status||" />
       <button  id="downexport" type="button" style="height:25px;border:1px solid transparent;border-color:#e6e6e6;background: #fff;" onclick="downloadExport('||filename||')" >
<span style="color: #0e90d2">可下載</span>
</button>
</td>
      </tr>            
</table>

前端JS:

function getRowHTML(datajson,subHTML)
{
var subList="";
var HTMLArray = subHTML.split('||');
var startNum=pagesize*(page-1);
//迴圈資料
for (var i = 0; i <= datajson.length-1; i++)
{//新增序列號
datajson[i].serialid=startNum+i+1;

jsonflag=false;

for (var j = 0; j <= HTMLArray.length-1; j++)
{

//只要html裡面不直接用||作為開頭,那麼用基/偶數就就可以判斷是否是變量了....
if (jsonflag==true)
{//如果是欄位,則用替換成資料值
subList += datajson[i][HTMLArray[j]];
} else {//不是欄位,不做任何替換(第一次為普通標籤,第二次為欄位,取反;第三次為標籤,取反...依次遍歷)
subList += HTMLArray[j];
}

//取反
jsonflag=!jsonflag;
}
}

return subList;
}

dataHTML=getRowHTML(currentdata,$("#rowsample").html());//將資料新增到模板表格
$("#tabledata").html(dataHTML.replace(/<tbody>/g,"").replace(/<\/tbody>/g,""));將模板表格新增到資料表格