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);});

  

时间: 2024-10-14 14:10:30

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

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

首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为用户的SQL是千奇百怪的,所以出现了诸如:"BLOCKS*8/1024","trunc(SYSDATE)"之类的列名(field)时,表格就会错位,而且含有特殊字符的列无法手工调整大小. 经分析,datagrid组件在画表格的时候会在宿主DOM后动态追加一个style节

Jquery提交包含特殊字符的表单数据

我们都知道,jquery提交表单数据可以用ajax进行提交,例如: $.ajax({ url:"<%=luci.dispatcher.build_url("admin/ap/add")%>", async:false, type:"POST", data:"apname="+$("#apname").val()+"&basemac="+$("#basemac

xml 特殊字符 导致的 solr 数据导入异常

一.问题 最近开发那边反应 solr 的数据好像一个月没有更新了,登陆到 solr 的服务器,查看日志,有以下的报错日志. org.apache.solr.handler.dataimport.DataImportHandlerException: Data Config problem: The reference to entity "xdm2" must end with the ';' delimiter. at org.apache.solr.handler.dataimpo

EasyUI中datagrid的查询实现

在使用EasyUI的datagrid时,避免不了的需要使用其查询功能 html代码 <div style="padding:0 0 0 7px;color:#333;">         查询管理:<input type="text" class="textbox" name="search_game_name" style="width:110px;">         创建时间从

easyui 中Datagrid 控件在列较多且无数据时,列显示不全的解决方案

在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var dc = $(this).data('datagrid').dc; var header2Row = dc.header2.find('tr.datagrid-header-row'); dc.body2.find('table').append(header2Row.clone().css({"

easyui的datagrid分页写法小结

easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 1 //关闭tab1打开tab2 查询Detail 2 function refundDetail(){ 3 $('#tt').tabs('select', "Detail Information");//subtitle为选项卡的标题 4 //发起ajax请求,查询退款detail 5 var dayendDate = $("#dayendDate").val(); 6 var term

在EasyUI的DataGrid中嵌入Combobox

在做项目时,需要在EasyUI的DataGrid中嵌入Combobox,花了好几天功夫,在大家的帮助下,终于看到了它的庐山真面: 核心代码如下: <html> <head> @*添加Jquery EasyUI的样式*@ <link href="@Url.Content("../../Content/JqueryEasyUI/themes/default/easyui.css")" rel="stylesheet" /

EasyUI中DataGrid构建复合表头

在使用easyui的DataGrid控件时,构建复合表头就显得非常简单了.只需要在使用columns属性时通过数组的方式编写列名即可.如我们需要构建成一个如下的表头: Columns的代码如下: columns: [[ { field: '_id', title: '行号', fixed: true, rowspan:2 }, { field: '_j', title: '铁路局', fixed: true, colspan:2 } ], [ { field: '_id', title: '京局

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

我的数据库设计是一张老师表teacher,一张学生表student,一个教师对应多个学生,在学生一方建立外键; 还有一点想清楚,需要展示的数据是根据什么来的,是成功登陆的用户的id?还是直接展示所有的学生? student表 教师表: 我是习惯性的从后写到前,这里展示的是登录成功的老师下的学生信息 1 建立项目,建立好对应的包以及工具包 2建立好与数据库对应的实体类 package com.zr.model; public class Student { private int sid; pri