easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题
做一个用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时列名包含特殊字符导致表头与数据错位的问题的更多相关文章
- EasyUI DataGrid设置列宽为百分比导致表头和内容错位的解决方法
在DataGrid中设置列宽为百分比一般是没有问题的 columns: [[{ title: '内容', field: '__EMPTY', width: '40%' }, { title: '隐患级 ...
- jQuery EasyUI datagrid列名包含特殊字符会导致表格错位
首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...
- js页面传参数时,参数值包含特殊字符的处理
js页面传参数时,参数值包含特殊字符应该怎么处理,解决方法就是利用js的escape函数,这个函数在解决中文乱码等方面应用的比较广泛.推荐使用. 工作中遇到的小问题,一个页面中通过window.sho ...
- jmeter接口测试-GET请求路径中包含特殊字符或中文导致Response400报错
问题描述:接口测试中异常用例GET请求路径中包含特殊字符或中文,运行jmeter会报错,取样器中只能看到Response400,响应结果为空 解决思路: 对于通过BODY发送的中文内容可以用Jmete ...
- easyui框架Date日期类型以json形式显示到前台datagrid时,显示为[object Object]
如下图,easyui当后台把时间数据返回转换成json然后加载在easyui的datagrid里面,显示为[object Object] 需要对时间格式添加格式的显示方法 /** * 时间格 ...
- easyui的datagrid分页写法小结
easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 //关闭tab1打开tab2 查询Detail function refundDetail(){ $('#tt').tab ...
- [原创]java WEB学习笔记98:Spring学习---Spring Bean配置及相关细节:如何在配置bean,Spring容器(BeanFactory,ApplicationContext),如何获取bean,属性赋值(属性注入,构造器注入),配置bean细节(字面值,包含特殊字符,引用bean,null值,集合属性list map propert),util 和p 命名空间
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- MVC模式下的数据展示:EasyUI的datagrid
我的数据库设计是一张老师表teacher,一张学生表student,一个教师对应多个学生,在学生一方建立外键; 还有一点想清楚,需要展示的数据是根据什么来的,是成功登陆的用户的id?还是直接展示所有的 ...
- easyUI中datagrid的使用
easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...
随机推荐
- 大圆满的精髓–肯•威尔伯(KEN WILBER)
作者:肯·威尔伯(Ken Wilber),目前被公认为是“后人本心理学”的最重要的思想家.理论家和发言人,其影响已经跨越了心理学领域,波及哲学和神学领域.由于肯·威尔伯在意识领域的研究极富基础性和开创 ...
- DTCMS插件的制作实例电子资源管理(二)Admin后台页面编写
总目录 插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...
- JQuery fullCalendar 时间差 排序获取距当前最近的时间。
let time = (wo: WoDto) => wo.ScheduleTime || wo.ScheduleStartTime; let wo = technician.wos .filte ...
- Linux进程间通信之共享内存
一,共享内存 内核管理一片物理内存,允许不同的进程同时映射,多个进程可以映射同一块内存,被多个进程同时映射的物理内存,即共享内存. 映射物理内存叫挂接,用完以后解除映射叫脱接. 1,共享内存的特点 ...
- React-Native运行知乎日报遇到的问题
研究几天RN(React-Native)后,跟着官方的demo做了一下电影图片显示的那个,但是总感觉官方的demo欠缺点什么,所以找来找去找到了RN版的知乎日报,话说知乎日报什么版的都有,不信你们上网 ...
- sprintf_s的教训
sprintf_s 是个比sprintf更安全的函数,今天在使用的过程中犯了个错误,代码的大致意思如下 void Test_sprintf_s() { ]; memset(buff, , sizeof ...
- SQLite剖析之功能特性
SQLite是遵守ACID的轻型数据库引擎,它包含在一个相对较小的C库中.它是D.RichardHipp创建的公有领域项目.不像常见的客户端/服务器结构范例,SQLite引擎不是一个与程序通信的独立进 ...
- Project Serve 2013部署方法
在线版Project2013部署手册 服务器环境要求 系统:windows server 2008r2.windows server2012x64 Sharepoint 2013 内存至少16GB,最 ...
- 1118ALTER TABLE tabname DISCARD TABLESPACE快速导入数据利用表空间
-- 快速导入数据如果你有.ibd文件的一个干净的备份,你可以按如下操作从被起源的地方恢复它到MySQL安装中:相当快速 1. 发出这个ALTER TABLE语句: 2. ALTER TABLE tb ...
- 第七章 java基础类库
1. 日期时间: 用Calendar类. 2. 分隔符:空格.tab.回车. 3. Scanner:读取键盘输入.读取文件. 4. 系统类: System Runtime. 5. 所有的java类都 ...