做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因。后来偶然在控制台看出了一点端倪:

推测表头或者单元格的class名应该是用字段名拼出来的,如果含有特殊字符可能违反了css的命名规则(权威的css命名规则暂时没有找到,这篇文章稍有提到)。

我找了个有特殊字符的列的数据,发现果然歪了。验证了想法。

由于项目的特殊性,数据库的表是动态创建的,也就是部分列名是由用户输入的,比较随意(当然,列头是另外是有显示名称的)。

所以这个问题可以从两方面解决:

①对用户输入进行限制。

②找到easyui拼接class名称的地方,处理掉特殊字符。(最后也确实在jquery.easyui.min.js里找到了)

其实easyui作者也对列名进行了一定的处理,只是没有考虑到这里的特殊情况。所以修改这个正则表达式就可以了(这里就不贴修改后的正则表达式了),或者限制用户输入与修改个正则表达式相结合。

后来看到这篇jQuery EasyUI datagrid列名包含特殊字符会导致表格错位里也提到了这个问题的处理方法,觉得作者的这个办法很好,将字符替换为十六进制码

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

  

easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题的更多相关文章

  1. EasyUI DataGrid设置列宽为百分比导致表头和内容错位的解决方法

    在DataGrid中设置列宽为百分比一般是没有问题的 columns: [[{ title: '内容', field: '__EMPTY', width: '40%' }, { title: '隐患级 ...

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

    首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...

  3. js页面传参数时,参数值包含特殊字符的处理

    js页面传参数时,参数值包含特殊字符应该怎么处理,解决方法就是利用js的escape函数,这个函数在解决中文乱码等方面应用的比较广泛.推荐使用. 工作中遇到的小问题,一个页面中通过window.sho ...

  4. jmeter接口测试-GET请求路径中包含特殊字符或中文导致Response400报错

    问题描述:接口测试中异常用例GET请求路径中包含特殊字符或中文,运行jmeter会报错,取样器中只能看到Response400,响应结果为空 解决思路: 对于通过BODY发送的中文内容可以用Jmete ...

  5. easyui框架Date日期类型以json形式显示到前台datagrid时,显示为[object Object]

    如下图,easyui当后台把时间数据返回转换成json然后加载在easyui的datagrid里面,显示为[object Object]      需要对时间格式添加格式的显示方法 /** * 时间格 ...

  6. easyui的datagrid分页写法小结

    easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 //关闭tab1打开tab2 查询Detail function refundDetail(){ $('#tt').tab ...

  7. [原创]java WEB学习笔记98:Spring学习---Spring Bean配置及相关细节:如何在配置bean,Spring容器(BeanFactory,ApplicationContext),如何获取bean,属性赋值(属性注入,构造器注入),配置bean细节(字面值,包含特殊字符,引用bean,null值,集合属性list map propert),util 和p 命名空间

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  8. MVC模式下的数据展示:EasyUI的datagrid

    我的数据库设计是一张老师表teacher,一张学生表student,一个教师对应多个学生,在学生一方建立外键; 还有一点想清楚,需要展示的数据是根据什么来的,是成功登陆的用户的id?还是直接展示所有的 ...

  9. easyUI中datagrid的使用

    easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...

随机推荐

  1. 文本比较算法Ⅱ——Needleman/Wunsch算法

    在"文本比较算法Ⅰ--LD算法"中介绍了基于编辑距离的文本比较算法--LD算法. 本文介绍基于最长公共子串的文本比较算法--Needleman/Wunsch算法. 还是以实例说明: ...

  2. <实训|第七天>横扫Linux磁盘分区、软件安装障碍附制作软件仓库

    期待已久的linux运维.oracle"培训班"终于开班了,我从已经开始长期四个半月的linux运维.oracle培训,每天白天我会好好学习,晚上回来我会努力更新教程,包括今天学到 ...

  3. Web Api 2 接口API文档美化

    使用用第三方提供的swgger ui 帮助提高 web api 接口列表的阅读性,并且可以在页面中测试服务接口. 运行程序如下: 注意:在IE中必须输入红色部分. 并且可以对方法进行测试. 在开发we ...

  4. JavaScript学习笔记-简单的倒计时跳转页面

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. ContentProvider备份短信,以xml文件存储

    因为短信的内容已经通过ContentProvider暴露出来,所以我们可以直接用内容解析者获取短信内容. 想要获取短信内容,你需要知道的一些东西: 1.Uri uri = Uri.parse(&quo ...

  6. MySQL 5.7.9版本sql_mode=only_full_group_by问题

    用到GROUP BY 语句查询时com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Expression #2 of SELECT l ...

  7. Android复习笔记--Activity

    #Activity注册 Android四大组件(Activity,Service,Broadcast Receiver, Content Provider)都需要在AndroidManifest中注册 ...

  8. 1025WHERE执行顺序以及MySQL查询优化器

    转自http://blog.csdn.net/zhanyan_x/article/details/25294539 -- WHERE执行顺序-- 过滤比较多的放在前面,然后更加容易匹配,从左到右进行执 ...

  9. java定时器

    package com.lid;            import java.util.Calendar;      import java.util.Date;      import java. ...

  10. Java的反射机制(Reflection)

    反射机制 指可以在运动时加载.探知.使用编译期间完全未知的类 程序在运行状态中,可以动态加载一个只有名称的类,对于任意一个已加载的类,都能够获取这个类的属性和方法:对于任意一个对象可以调用它的任意一个 ...