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

最新推荐文章于 2017-01-02 08:33:57 发布

sean-zou

最新推荐文章于 2017-01-02 08:33:57 发布

阅读量2.6k

点赞数

分类专栏： Java Script 文章标签： Flexgrid

本文链接：https://blog.csdn.net/a19881029/article/details/8106103

版权

Java Script 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

问题原因：

表格中的数据包含的空格无法正常显示，如数据库中取出的数据为' 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会是" 123 123"这种格式（非单纯的数据了，还有一些式样）

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

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

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

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

sean-zou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flexigrid无法正常显示数据中包含的空格

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

扫一扫