Flexigrid無法正常顯示資料中包含的空格
阿新 • • 發佈：2019-01-03
問題原因：
表格中的資料包含的空格無法正常顯示，如資料庫中取出的資料為' 123 123 123 '，顯示出來後變為'123 123 123'首尾的空格全部消失了，並且中間的多個空格被合併為一個
問題分析：
按照html的標準，空格即是' '，對於' '，ie瀏覽器會去除元素內容首尾的' '，並將內容中間的多個' '合併為一個' '
<html>
<body>
123 123;123 123;123 123
</body>
</html>顯示結果為：
123 123；123 123；123 123
解決方式：
使用js將資料中的' '替換為 
re = /(\s)/g;
str = str.replace(re,' ');但是由於表格實現是使用的flexigrid（並非標準，有很多修改，但無論是何種修改，只要有具體的思路，debug後就會發現問題所在）
其中表格每一行的資料是按如下方式生成的：
var ths = $('thead tr:first th', g.hDiv); var thsdivs = $('thead tr:first th div', g.hDiv); var tbhtml = []; tbhtml.push("<tbody>"); if (p.dataType == 'json') { if (data.rows != null) { $.each(data.rows, function(i, row) { tbhtml.push("<tr id='", "row", row.id, "'"); if (i % 2 && p.striped) { tbhtml.push(" class='erow'"); } if (p.rowbinddata) { tbhtml.push("ch='", row.cell.join("_FG$SP_"), "'"); } tbhtml.push(">"); var trid = row.id; $(ths).each(function(j) { var tddata = ""; var tdclass = ""; tbhtml.push("<td align='", this.align, "'"); var idx = $(this).attr('axis').substr(3); if (p.sortname && p.sortname == $(this).attr('abbr')) { tdclass = 'sorted'; } if (this.hide) { tbhtml.push(" style='display:none;'"); } var width = thsdivs[j].style.width; var div = []; div.push ("<div style='text-align:", this.align, ";width:", width, ";"); if (p.nowrap == false) { div.push("white-space:normal"); } div.push("'>"); if (idx == "-1") { //表格第一列的checkbox div.push("<input type='checkbox' id='chk_", row.id, "'class='itemchk' value='", row.id, "'/>"); if (tdclass != "") { tdclass += " chboxtd"; } else { tdclass += "chboxtd"; } } else { var divInner; if(this.bindCell){ divInner=row.cell; }else{ divInner=row.cell[idx] || " "; } if (this.process) { divInner = this.process(divInner, trid); } //以下注釋部分為我的修改方式 /* alert(divInner); if(divInner!=null && typeof(divInner) == 'string'){ sub = /</g; if(divInner.search(sub) == -1) { re = /\s/g; divInner = divInner.replace(re,' '); } } */ div.push(divInner); } div.push("</div>"); if (tdclass != "") { tbhtml.push(" class='", tdclass, "'"); } tbhtml.push(">", div.join(""), "</td>"); }); tbhtml.push("</tr>"); }); } } else if (p.dataType == 'xml') { ...... } tbhtml.push("</tbody>");
具體實現方式就是將整個頁面寫入js變數中然後展示，但是有時候表格的每一列並不是只是資料
有時divInner會是"<font color="#0000ff"> 123 123</font>"這種格式（非單純的資料了，還有一些式樣）
這時候只是簡單的將' '替換為' '已經出現問題了
"<font color="#0000ff"> 123 123</font>"會被替換成"<font color="#0000ff"> 123 123</font>"
font標籤出現錯誤導致html的解析出現錯誤，整個頁面都無法顯示
還沒有什麼好的方式，只能先不對包含'<'和'>'的字串進行處理