easyui表格中表头显示错位的问题解决

最新推荐文章于 2024-01-26 16:23:21 发布
最新推荐文章于 2024-01-26 16:23:21 发布
阅读量719 收藏
点赞数
文章标签： easyui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41810005/article/details/130953443
版权
文章指出在使用EasyUI框架时，如果columns配置中的title字段包含中英文混合可能导致表头错位。解决方案是保持所有title字段统一为中文或英文，包括hidden字段。若无法解决，可以尝试将autoColWidth设为false。作者已成功解决此问题，并表示会分享更多技术经验。
摘要由CSDN通过智能技术生成

就像下图这种表头错位的问题

 这种问题其实就是easyui的框架问题，就是你在配置columns的时候，其中有个字段title这个字段不能既有中文又有英文，尽量保持一致，所有的title要么就是中文要么就是英文（hidden隐藏的也要改）。

如果实在不行就把autoColWidth设置为false

我在我的项目已经解决，希望能够帮助大家！好久没写过博客了，以后会经常更新，分享精神常在！

 

代码无边，回头是岸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
datagrid表头与数据列宽度不对齐_easyui datagrid表头分组内容和表头对不齐解决办法...
weixin_29958797的博客
02-15 1273
easyui datagrid表头分组分组后，有可能导致内容行和表头对不齐的情况，可能是easyui datagrid对太复杂的表头计算出问题。解决办法：依据表头定位用的div重新设置内容行的第一行的宽度进行重新定位。效果图如下easyui datagrid表头分组分组后，导致内容行和表头对不齐的情况onLoadSuccess事件中重新设置内容行宽度和表头一致效果easyui datagrid表头...
easyui datagrid 多表头数据错位_表格数据检索（二）
weixin_39517902的博客
12-05 304
企业级中后台产品通常大量使用表格来展示结构化的数据，对表格数据进行检索，是一个常用功能。在日常设计工作中，我们经常不加思考便产出一个个带有表格数据检索功能的页面。然而，体验良好的表格数据检索功能，需要充分考虑用户的需求和具体的场景，选择合适的数据检索方式及数据检索模式。关于表格数据检索，我将分两个维度进行探讨，一个是较细粒度的方面，围绕搜索、筛选、排序这三种「数据检索方式」展开，在另一个维度，将围...
Easyui-DataGrid表头拖动效果
09-14
UI设计在一个系统中的重要性是不容忽视的，我们开发人员要做到：让用户去控制计算机，而不是计算机控制用户；减少用户的记忆负担；保持界面一致。 给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
jQuery EasyUI datagrid列名包含特殊字符会导致表格错位
哈利路亚的收藏夹
09-23 1366
首先申明：本文所述的Bug存在于1.3.3以及更高版本中，其它低版本，本人未测试，太老的版本不想去折腾了。 洒家在写前端的SQL执行工具时，表格用了 jQuery EasyUI datagrid，因为用户的SQL是千奇百怪的，所以出现了诸如:"BLOCKS*8/1024","trunc(SYSDATE)"之类的列名(field)时，表格就会错位，而且含有特殊字符的列无法手工调整大小。
easy UI中 datagrid的表头和数据错位的原因
zhao277949522的博客
03-18 4841
因列的field中，存在特殊字符或中文导致，将相应的字段替换为英文即可正常显示 例如： columns: [{"field": '字段1', "title": ‘字段1’, width: '100px' }， {"field": '字段2', "title": ‘字段2’, width: '100px' }] 这时就会出现表头和表的内容错位 这时候可改为： columns: [{"field":...
关于EasyUI表头和数据错位的问题
qq_41307492的博客
07-10 3528
如果所有浏览器都是错位，那么请检查你的列中的 field是否有重名的，第二个field的名字是否在实体中存在，注意大小写。如果谷歌好的，ie8坏的，那就是兼容性问题。easyui datagrid 1.3.3开始使用jquery2.0，对ie6,7,8兼容性不好了，这个要注意哦！还有一点就是我引用的EasyUI的样式和文件是版本比较低的，而做的时候是看着高版本的EasyUI做的，有时候也会出现数据...
EasyUI折叠表格层次显示detailview详解及实例
08-31
本文将深入探讨EasyUI中的一个特殊功能——折叠表格层次显示detailview，并提供具体的实例，帮助开发者理解和实现这种效果。 detailview是EasyUI中的一个视图组件，主要用于在表格中展示详细信息。当表格中的某一行...
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
08-29
在使用EasyUI开发Web应用时，常常会遇到datagrid表格中操作栏的按钮图标不显示的问题。这通常是由于jQuery EasyUI的自动渲染机制未能正确处理动态加载或Ajax加载的内容导致的。EasyUI Datagrid是一个功能丰富的表格...
jQuery EasyUI中对表格进行编辑的实现代码
10-29
在jQuery EasyUI中，数据网格组件可以通过声明性的方式来定义，其中包含了各种配置项来定义表格的列（columns）、工具栏（toolbar）、编辑器（editor）等。编辑器是实现表格可编辑功能的核心元素，它允许用户通过...
easyui的datagrid表格表头和内容对不齐原因之一及解决方案
weixin_46298946的博客
01-30 2587
本人之前用easyui做一个后台管理页面数据出来后表格表头和内容对不齐 在网上找了各种各样的方法都不管用，然后改了easyui文件夹下jquery.easyui.min.js才终于好了，一般是第9977行，如下图左边是改之前，右边是改之后 var ss=["<style type=“text/headTree” easyui=“true”>"]; 改成 var ss=["<style type=“text/css” easyui=“true”>"]; 希望对大家有所帮助 ...
扩展easyui.datagrid，添加数据loading遮罩效果代码
12-09
在使用的过程中，发现easyui目前还缺少一些小功能或是未开放出来 拿datagrid插件来说，数据加载提供了两种方式远程和本地数据加载，但只有远程数据加载时才会显示数据加载的遮罩层，在数据加载完成后隐藏遮罩层；而本地数据加载时则不会出现遮罩，这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要 不过呢，在实际的项目开发过程中使用时，没有考虑使用url方式加载数据，则采用了loadData方法来异步加载数据，这个时候就很有必要显示遮罩层来提示用户当前正在加载数据，分析easyui的datagrid代码，削离出其中远程数据加载时遮罩显示代码，并扩展datagrid的方法，代码如下： 代码如
jquery-easyui拓展之datagrid复合表头列锁定/解锁和列隐藏/显示
08-10
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
jquery easyui datagrid 表头与内容错位
weixin_34128501的博客
12-04 1231
为什么80%的码农都做不了架构师？>>> ...
easyui 框架datagrid表格列错位解决方法 极简处理
最新发布
DEVILMSC的博客
01-26 774
datagrid 控件当数据行比较多 出现右侧滚动条的时候，这个时候将水平滚动条滑动到最右侧 会造成15-18px的列错位 （因为样式不同 可能会有出入）表头加载了滚动条显示出来不好看，那么咱么隐藏掉滚动条的样式在给个背景色，不就可以瞒天过海了么。以上样式加载在全局样式里面 那么可以直接解决整个项目所有错位列的问题。原理很简单，错位问题是因为右侧出现滚动条造成的。网上有好多处理方式 但是都需要单个页面处理。那么将表头也加载一个右侧滚动条不就可以了么。下面介绍一个极简单的处理方式。以上个人偷懒做法 勿喷。
EasyUI动态表头与数据宽度不对应
Terisadeng的博客
09-15 2749
在测试代码时发现动态表头的大小与数据列的宽度不对应，不管怎样修改width，表头宽度都 可以跟着变动，但是数据宽度始终不动。 后来无意中修改了后台设置的列的field属性，终于成功了。 原来原因是 后台拼接的列是如下这种样子 titleMap=new HashMap(); titleMap.put("field", "price1001~2000"); titleMap.put(
EasyUI--DataGrid数据与表头错位
BtWangZhi的博客
03-06 6380
<table id="enterpriseList" title="" class="easyui-datagrid" style="width: 100%; height: 100%" data-options="pagination:true,method:'get',url:'<?php require 'config/config.php'; echo $ba
easyui datagrid 多表头数据错位_学不完的办公技巧 Excel数据查找录入篇
weixin_39897218的博客
12-11 244
点击蓝字关注我们正所谓“技多不压身”每一个小技巧都值得被认真对待往往有时候就是一小个知识点的盲区却会让你陷入无尽的麻烦与困扰中这期要跟大家分享的是日常使用Excel表格中的「数据查找录入」功能虽然看似简单但操作起来并不方便我们先看一下这张表格在图一的信息对应表中要求在图二的人员信息表中查找并录入相应的数据你会怎么做呢？▲ 图一▲ 图二看到数据不多很多人都会觉得直接复制粘贴不就完事了吗？这...
easyui在添加一个datagrid之后表头错乱
yang_zzu的博客
07-11 707
easyui在添加一个datagrid之后表头错乱 将包含该弹窗的页面中的 datagrid 注释掉之后，表头正常显示，一加上就出现其他表头错乱的问题。 最正常的问题是，在拖动列宽的时候，没有起到任何的作用，无法正常的拖动。刷新之后，表头还是错乱的情况，没有任何改善。 搜集了好多种方法： 1. 说的是，filed 属性名称重复 2. 说的是，title 包含特殊字符 3. 说的是，返回数据中含有特殊字符 4.easyui有惰性，当有多个datagrid同时存在并且有人初始化查询过，就可能导致.
EasyPoi读取文件表头时不匹配导致无法读取数据
weixin_47996698的博客
05-27 2020
/**必填，格式为YYYYMM*/ @Excel(name = "YM",fixedIndex = 0,orderNum = "0") private String ym; /**必填，仅能填写MR或DM的territory code，且输入值需唯一*/ @Excel(name = "Territory Code",fixedIndex = 1, orderNum = "1") private String territoryCode; /**必填，仅能填写MR或DM的territory post，且输入值
easyUI表格的表头checkbox的选中样式怎么调整
06-07
EasyUI 表格的表头 Checkbox 的选中样式可以通过 CSS 样式来进行调整。具体来说，可以通过修改以下样式来改变表头 Checkbox 的选中样式： ```css /* 表头 Checkbox 的选中样式 */ .datagrid-header-check input[type="checkbox"]:checked + label:before { content: '\e616'; color: #0078d7; font-family: "Glyphicons Halflings"; font-size: 14px; font-weight: normal; } /* 表头 Checkbox 的选中样式（IE8） */ .datagrid-header-check input[type="checkbox"]:checked + label { background-position: 0 -32px; border-color: #0078d7; } ``` 其中，`content` 属性的值表示选中状态下 Checkbox 前面的图标，`color` 属性的值表示选中状态下图标的颜色，`font-family` 属性的值为 EasyUI 内置的图标字体库，`font-size` 属性的值表示图标的大小，`font-weight` 属性的值表示图标的粗细。如果你想要修改选中状态下的背景色或边框颜色，可以通过修改 `background-color` 和 `border-color` 属性来实现。 另外，需要注意的是，以上样式只适用于默认情况下的表头 Checkbox。如果你使用了自定义的表头 Checkbox，需要相应地修改样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值