flexigrid无法正常显示数据中包含的空格
问题原因:
表格中的数据包含的空格无法正常显示,如数据库中取出的数据为' 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的解析出现错误,整个页面都无法显示
还没有什么好的方式,只能先不对包含'<'和'>'的字符串进行处理