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

发布时间：2020-12-15 04:43:11 所属栏目：百科来源：网络整理

导读：问题原因：表格中的数据包含的空格无法正常显示，如数据库中取出的数据为' 123 123????? 123 '，显示出来后变为'123 123 123'首尾的空格全部消失了，并且中间的多个空格被合并为一个 ? 问题分析：按照html的标准，空格即是'nbsp;'，对于' '，ie浏览器会去

问题原因：

表格中的数据包含的空格无法正常显示，如数据库中取出的数据为' 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:",";width:",width,";");
                if (p.nowrap == false) {
                    div.push("white-space:normal");
                }
                div.push("'>");
                if (idx == "-1") { //表格第一列的checkbox
                    div.push("<input type='checkbox' id='chk_","'class='itemchk' value='","'/>");
                    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会是" 123 123"这种格式（非单纯的数据了，还有一些式样）

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

" 123 123"会被替换成"<font color="#0000ff"> 123 123"

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!