flexigrid无法正常显示数据中包含的空格

问题原因:

表格中的数据包含的空格无法正常显示,如数据库中取出的数据为' 123 123      123 ',显示出来后变为'123 123 123'首尾的空格全部消失了,并且中间的多个空格被合并为一个

 

问题分析:

按照html的标准,空格即是' ',对于' ',ie浏览器会去除元素内容首尾的' ',并将内容中间的多个' '合并为一个' '

<html>
<body>
123 123;123    123;123&nbsp;&nbsp;123
</body>
</html>

 显示结果为:

123 123;123 123;123  123

 

解决方式:

使用js将数据中的' '替换为&nbsp  

re = /(\s)/g;
str = str.replace(re,'&nbsp;');

但是由于表格实现是使用的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] || "&nbsp;";
                    }
                    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,'&nbsp;'); 
                        }
                    }      */
                    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>"这种格式(非单纯的数据了,还有一些式样)

这时候只是简单的将' '替换为'&nbsp;'已经出现问题了

"<font color="#0000ff"> 123 123</font>"会被替换成"<font&nbsp;color="#0000ff">&nbsp;123&nbsp;123</font>"

font标签出现错误导致html的解析出现错误,整个页面都无法显示

还没有什么好的方式,只能先不对包含'<'和'>'的字符串进行处理

 


 

posted @ 2012-10-24 14:14  心意合一  阅读(156)  评论(0编辑  收藏  举报