jQuery EasyUI datagrid列名包含特殊字符会导致表格错位

Posted 2020-08-23 JulesHello

首先申明：本文所述的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了一次，目的是将其转为十六进制，这个修改方法应该是安全无毒副作用的，请大家放心使用。