现在的位置: 首页 > easyui > Grid > datagrid > 正文
jQuery EasyUI datagrid列名包含特殊字符会导致表格错位
2014年11月14日 datagrid ⁄ 共 976字 评论数 7 ⁄ 被围观 12,666 views+

首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了。

洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为用户的SQL是千奇百怪的,所以出现了诸如:"BLOCKS*8/1024","trunc(SYSDATE)"之类的列名(field)时,表格就会错位,而且含有特殊字符的列无法手工调整大小。

经分析,datagrid组件在画表格的时候会在宿主DOM后动态追加一个style节点,里面定义列的若干class,正是因为我们的field含有"* / # ( )..."等css中class无法识别的命名,导致class无效,从而引发了一连串血案。我们来看下,有问题的style节点:

  1. <table id="resultTable" style="display: none;"></table>
  2. <style type="text/css" easyui="true">
  3. .datagrid-cell-c1-BLOCKS*8/1024{width:147px}
  4. .datagrid-cell-c1-SEGMENT_NAME{width:231px}
  5. .datagrid-cell-c1-TRUNC(SYSDATE){width:159px}
  6. </style>

很明显第一个和第三个的class定义是无效的。那么这个问题究竟怎么破呢,源码的分析过程我就不说了,其实很简单,我们不使用field作为class后缀就行了,将field转换为十六进制是绝对安全的。下面来说说怎么改代码。

在 jquery.easyui.min.js 文件中搜索 "[\.|\s]"关键字,请放心搜索,1.3.3(包含1.3.3)之后的各大版本均有销售,搜到之后你会发现这其实是一个replace函数的正则表达式,我们只要将replace函数的执行结果进一步替代成十六进制就可以了,于是乎,代码就变成了:

  1. field.replace(/[\.|\s]/g, "-").replace(/./g,function($1){return $1.charCodeAt(0).toString(16);});

我在replace函数之后又replace了一次,目的是将其转为十六进制,这个修改方法应该是安全无毒副作用的,请大家放心使用。

目前有 7 条留言 其中:访客:3 条, 博主:2 条 引用: 2

  1. yangk : 2015年01月22日11:05:56  -49楼 @回复 回复

    1.3.2 版本的特殊字符显示怎么处理呢?
    我显示的内容中包含了如下信息,能保存,就显示异常
    @{string code=@Model[“code”];
    }@{@code}


    • 管理员
      世纪之光 : 2015年01月22日20:42:36  地下1层 @回复 回复

      这篇文章说的是列名(field)包含特殊字符会造成表格错位,你贴的这些内容也是列名?

      • Sara : 2015年08月13日14:45:22  地下2层 @回复 回复

        对于内容带特殊符号的,会不显示,这个有解决方法吗?比如


        • 管理员
          世纪之光 : 2015年08月13日16:05:23  地下3层 @回复 回复

          这个最好是在后端就对特殊符号做转义,前端没有什么特别好的方法。

  2. wl2din : 2015年07月08日00:00:00  -48楼 @回复 回复

    高人啊,正好遇到这样的问题,看了本文后,马上解决,感谢!

给我留言

留言无头像?


×