jQuery EasyUI datagrid列名包含特殊字符会导致表格错位
2020-11-08 16:14:59
开发教程
admin
首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试。在写前端的SQL执行工具时,表格用了jQueryEasyUIdatagrid,因为用户的数据源是千奇百怪的,所以出现了诸如:"BLOCKS*8/1024","
首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试。
在写前端的SQL执行工具时,表格用了jQueryEasyUIdatagrid,因为用户的数据源是千奇百怪的,所以出现了诸如:"BLOCKS*8/1024","trunc(SYSDATE)"之类的列名(field)时,表格就会错位,而且含有特殊字符的列无法手工调整大小。
经分析,datagrid组件在画表格的时候会在宿主DOM后动态追加一个style节点,里面定义列的若干class,正是因为我们的field含有"*/#()..."等css中class无法识别的命名,导致class无效,从而引发了一连串血案。我们来看下,有问题的style节点:
<tableid="resultTable"style="display:none;"></table>
<styletype="text/css"easyui="true">
.datagrid-cell-c1-BLOCKS*8/1024{width:147px}
.datagrid-cell-c1-SEGMENT_NAME{width:231px}
.datagrid-cell-c1-TRUNC(SYSDATE){width:159px}
</style>
在写前端的SQL执行工具时,表格用了jQueryEasyUIdatagrid,因为用户的数据源是千奇百怪的,所以出现了诸如:"BLOCKS*8/1024","trunc(SYSDATE)"之类的列名(field)时,表格就会错位,而且含有特殊字符的列无法手工调整大小。
经分析,datagrid组件在画表格的时候会在宿主DOM后动态追加一个style节点,里面定义列的若干class,正是因为我们的field含有"*/#()..."等css中class无法识别的命名,导致class无效,从而引发了一连串血案。我们来看下,有问题的style节点:
<tableid="resultTable"style="display:none;"></table>
<styletype="text/css"easyui="true">
.datagrid-cell-c1-BLOCKS*8/1024{width:147px}
.datagrid-cell-c1-SEGMENT_NAME{width:231px}
.datagrid-cell-c1-TRUNC(SYSDATE){width:159px}
</style>
很赞哦! ()
- 上一篇: HTML列表(Lists)
- 下一篇: HTML表单(Forms)