最近在工作上面碰到如下需求，要將下面三列中的大于100%的數(shù)據(jù)都以100%顯示厢漩，小于的則不處理褐澎。
需求分析
由于報表數(shù)據(jù)是在后臺組合的，每個指標間的數(shù)據(jù)都是取自緩存烈评，如果直接在后臺進行邏輯處理火俄，會打亂很多業(yè)務處理流程，因此經(jīng)過一番琢磨后讲冠，決定在前臺頁面進行修改瓜客，等報表組合完畢后。
這里要注意的是，報表展示頁面為靜態(tài)的HTML文件谱仪，前后臺是分離的玻熙，數(shù)據(jù)通過AJAX調(diào)用后臺接口，因此疯攒，請求不同的ID會有不同的報表在相同的頁面進行展示嗦随，如果直接在JS中寫處理邏輯的話，會導致其他報表的TABLE相同的部分也會被處理敬尺，這顯然不是我們需要的枚尼。
這是需求
這是處理后的結(jié)果
前臺數(shù)據(jù)修改
通過Jquery在報表生成之后，對指定的數(shù)據(jù)進行修改
var str = "0,1,2";
function reset_percent(str){
var arr=str.split(",");
if (arr.length>0){
$(".table_body table tbody tr").each(function(i,n){
for (var j=0; j<arr.length;j++){
if(parseInt($(n).children("td:eq("+parseInt(arr[j])+")").html())>=100){
$(n).children("td:eq("+parseInt(arr[j])+")").html("100%");
}
}
})
}
}
分析,我們先分析報表的組成結(jié)構(gòu)砂吞，類似于如下結(jié)構(gòu)
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
我們可以通過Jquery選擇器先找到table署恍，然后找到tbody，再找到tbody下面的tr蜻直，然后通過each函數(shù)對tr進行遍歷盯质，使得每個tr下面具體需要的第幾個td的數(shù)據(jù)進行改變，因此代碼如下
//重置 三列的百分比
function reset_percent(str){
var arr=str.split(",");
if (arr.length>0){
$(".table_body table tbody tr").each(function(i,n){
for (var j=0; j<arr.length;j++){
if(parseInt($(n).children("td:eq("+parseInt(arr[j])+")").html())>=100){
$(n).children("td:eq("+parseInt(arr[j])+")").html("100%");
}
}
})
}
}
如上概而，我們通過遍歷每一個tr元素呼巷，找到tr元素下面具體的td進行修改，我們在其他地方調(diào)用上面這個方法到腥，傳入需要改變的幾列的字符串朵逝，需要注意的是蔚袍，td的index是以0開頭的乡范，所以改變第一列td的話，就從0開始啤咽。
后臺處理
后臺報表模型里面添加晋辆，JS事件處理，即每一個報表都可以配置自己需要的JS Handler 事件宇整，當然瓶佳，這些事件提前寫好在一個JS文件里，只是我們根據(jù)不同的報表去具體的調(diào)用鳞青。
舉個例子霸饲，報表A的模型里有一欄是寫JS的，如下：
將配置寫在模型的sql中進行保存臂拓，以XML格式保存厚脉，然后通過Simple XML進行解析，我之前也寫過Simple XML解析XML的方式胶惰，傳送門
接下來傻工，我們在組裝報表之前，和組裝報表之后，分別判斷從后臺傳來的結(jié)果是否包含額外的事件處理
function build_table_simple(jsonData){
reset_title_link();
//是否有附加處理js
if (additionHandle!=null && additionHandle.execute_time=="create_table_before"){
eval(additionHandle.execute_function);
}
.... 省略
如果有要處理的話中捆，通過eval()解析字符串鸯匹，讓字符串具有JS的時間處理能力，傳來的字符串相當于調(diào)用了上面寫的那個方法泄伪，并傳入了具體需要修改的td列殴蓬。
總結(jié)
我們在業(yè)務處理中，很多表格都是通過遍歷來組成的蟋滴，因此你無法手動去修改表格里面哪一行那一列具體的值科雳。
而且很多頁面是公用的，他通過傳入ID的不同展示不同的表格和數(shù)據(jù)脓杉，這樣的話糟秘，你如果在頁面引用的JS里面直接調(diào)用處理函數(shù)，這樣其他的報表也會受到影響球散，因此尿赚，最好的方法就是，不同的報表配置不同的事后JS處理事件蕉堰，存在數(shù)據(jù)庫中凌净，當調(diào)用這個報表時，也調(diào)用相對應的JS處理函數(shù)屋讶，這樣需求也就解決了位仁。
END
