做一个用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. mybatis3.2.8 与 hibernate4.3.6 混用

    mybatis.hibernate这二个框架各有特色,对于复杂的查询,利用mybatis直接手写sql控制起来更灵活,而一般的insert/update,hibernate比较方便.同一个项目中,这二 ...

  2. ViewModelLocator

    ViewModelLocator 这里先鼓舞下士气,ViewModelLocator很简单,甚至可以去掉,它不是Mvvm必须的.在初学Mvvm时,一般都是使用NuGet安装 MvvmLight框架,总 ...

  3. Theano2.1.3-基础知识之更多的例子

    来自:http://deeplearning.net/software/theano/tutorial/examples.html More Examples 现在,是时候开始系统的熟悉theano的 ...

  4. 【跟着子迟品underscore】从用 `void 0` 代替 `undefined` 说起

    Why underscore 最近开始看 underscore源码,并将 underscore源码解读 放在了我的 2016计划 中. 阅读一些著名框架类库的源码,就好像和一个个大师对话,你会学到很多 ...

  5. DTCMS插件的制作实例电子资源管理(二)Admin后台页面编写

    总目录 插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...

  6. Hibernate用注解实现实体类和表的映射

    数据库mysql: 1.一对一 person50表password50表是一对一的关系: password50表中有外键 person_id person实体类: package com.c50.en ...

  7. SpringMVC学习--数据回显

    简介 表单提交失败需要再回到表单页面重新填写,原来提交的数据需要重新在页面上显示. 简单数据类型 对于简单数据类型,如:Integer.String.Float等使用Model将传入的参数再放到req ...

  8. hello Cookie

    Cookie 是什么? Cookie在浏览器中的表现为请求头域和响应头域的字段,也就是伴随着请求和响应的一组键值对的文本.Cookie来源于服务器,第一次请求无Cookie参数,增加Cookie通过服 ...

  9. [转]PL/SQLDeveloper导入导出Oracle数据库方法

    原文地址:http://www.2cto.com/database/201405/305452.html 1.Oracle数据库导出步骤 1.1 Tools→Export User Objects.. ...

  10. 单例模式(Singleton Pattern)

    意图 保证一个类仅有一个实例,并提供一个该实例的全局访问点 可将一个实例扩展到n个实例.限定某类最多只能创建n个实例. 双重锁定实现单例模式 C# public sealed class Single ...