做一個(gè)用easyui的datagrid顯示數(shù)據(jù)的功能時(shí)發(fā)現(xiàn)表格的列頭與數(shù)據(jù)錯(cuò)位了，而且這個(gè)現(xiàn)象不總是能重現(xiàn)，一直沒搞清楚原因。后來偶然在控制臺(tái)看出了一點(diǎn)端倪：

推測表頭或者單元格的class名應(yīng)該是用字段名拼出來的，如果含有特殊字符可能違反了css的命名規(guī)則（權(quán)威的css命名規(guī)則暫時(shí)沒有找到，這篇文章稍有提到）。

我找了個(gè)有特殊字符的列的數(shù)據(jù)，發(fā)現(xiàn)果然歪了。驗(yàn)證了想法。

由于項(xiàng)目的特殊性，數(shù)據(jù)庫的表是動(dòng)態(tài)創(chuàng)建的，也就是部分列名是由用戶輸入的，比較隨意（當(dāng)然，列頭是另外是有顯示名稱的）。

所以這個(gè)問題可以從兩方面解決：

①對(duì)用戶輸入進(jìn)行限制。

②找到easyui拼接class名稱的地方，處理掉特殊字符。（最后也確實(shí)在jquery.easyui.min.js里找到了）

其實(shí)easyui作者也對(duì)列名進(jìn)行了一定的處理，只是沒有考慮到這里的特殊情況。所以修改這個(gè)正則表達(dá)式就可以了（這里就不貼修改后的正則表達(dá)式了），或者限制用戶輸入與修改個(gè)正則表達(dá)式相結(jié)合。

?

?

后來看到這篇jQuery EasyUI datagrid列名包含特殊字符會(huì)導(dǎo)致表格錯(cuò)位里也提到了這個(gè)問題的處理方法，覺得作者的這個(gè)辦法很好，將字符替換為十六進(jìn)制碼

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

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/liqipeng/p/4609105.html

總結(jié)

以上是生活随笔為你收集整理的easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。