JQuery easyui DataGrid column names containing special characters can cause table misalignment

First of all: the bug described in this article exists in 1.3.3 and later, other low version, I did not test, too old version do not want to toss.

Batting practice when writing the SQL Execution tool on the front-end, the table uses the JQuery Easyui DataGrid, because the user's SQL is strange, so when a column name (field) such as "blocks*8/1024", "Trunc (sysdate)" appears, The table will be misplaced, and columns with special characters cannot be resized manually.

After analysis, the DataGrid component will dynamically append a style node after the host DOM when drawing the table, which defines several classes of the column, because our field contains a "*/# () ..." name that is not recognized by class in CSS, which causes the class to be invalid. Which led to a series of murders. Let's take a look at the problematic style node:

1. <table  id= "resulttable"  style=< Span class= "Attribute-value" > "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>

It is obvious that the first and third class definitions are not valid. So how the problem is broken, the source of the analysis process I will not say, in fact, it is very simple, we do not use field as the class suffix on the line, the field to 16 binary is absolutely safe. Let's talk about how to change the code.

Search in the Jquery.easyui.min.js file "[\.| \s] "keyword, please rest assured that the search, 1.3.3 (including 1.3.3) after the major versions are sold, after the search you will find that this is actually a replacement function of the regular expression, we just have to replace the Replace function of the result of further hexadecimal can be done, so, The code becomes:

1. Field.replace (/[\.| \s]/g, "-"). Replace (/./g,function ($) {return $1.charcodeat (0). toString (+);});

I replace the Replace function again after the purpose is to turn it into hexadecimal, this modification method should be safe and non-toxic side effects, please rest assured that use.

　　

JQuery easyui DataGrid column names containing special characters can cause table misalignment