方法一:容易,实用的方法

在jquery.easyui.min.js中查找到field.replace(/[\.|\s]/g, "-")在其后添加replace

例子:field.replace(/[\.|\s]/g, "-").replace(/./g, function ($1) { return $1.charCodeAt(0).toString(16); });//有改动,目的是将其转为十六进制

方法二:用过,借鉴的方法:onLoadSuccess:直接设置列宽

$('#stthb_div').datagrid({
data: [],
//title: "分析",
//iconCls:'icon-save',
padding: "30px",
nowrap: false,
singleSelect: true,
//striped: true,
height: win_h,
collapsible: true,
resizable: false,
//sortable: true,
remoteSort: false,//本地数据排序
//frozenColumns//不会滚动
columns: [
columns
]
//bind数据成功设置列宽度
, onLoadSuccess: function (data) {
//datagrid头部 table 的最后一个tr 的td们,即columns的集合
var headerTds = $(".datagrid-header-inner table tr:last-child").children();
//datagrid主体 table 的首个tr 的td们,即第一个数据行
var bodyTds = $(".datagrid-body table tr:first-child").children();
var totalWidth = 0; //合计宽度,用来为datagrid头部和主体设置宽度
//循环设置宽度
bodyTds.each(function (i, obj) {
var headerTd = $(headerTds.get(i));
var bodyTd = $(bodyTds.get(i));
//$("div:first-child", headerTds.get(i)).css("text-align", "center");
var headerTdWidth = headerTd.width(); //获取第i个头部td的宽度
//这里加5个像素 是因为数据主体我们取的是第一行数据,不能确保第一行数据宽度最宽,预留5个像素。有兴趣的朋友可以先判断最大的td宽度都在进行设置
var bodyTdWidth = bodyTd.width();
var width = 0;
//如果头部列名宽度比主体数据宽度宽,则它们的宽度都设为头部的宽度。反之亦然
if (headerTdWidth > bodyTdWidth) {
width = headerTdWidth;
bodyTd.width(width);
headerTd.width(width);
totalWidth += width;
} else {
width = bodyTdWidth;
headerTd.width(width);
bodyTd.width(width);
totalWidth += width;
}
});
var bodyTable = $(".datagrid-body table:first-child");
//循环完毕即能得到总得宽度设置到头部table和数据主体table中
//bodyTable.width(totalWidth + 55);
bodyTable.width($(".datagrid-header-inner table tr:last-child").width());
///将所有的列都设置为可以排序
var columns = $("#stthb_div").datagrid("options").columns[0];
for (i = 0; i < columns.length; i++) {
columns[i].sortable = true;
};
}
});

转载于:https://www.cnblogs.com/wusm/p/5643906.html

easyui datagrid 表头与数据错位相关推荐

  1. easyui datagrid 表头固定(垂直滚动条)、列固定(水平滚动条)

    easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...

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

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

  3. datagrid表头与数据列宽度不对齐_easyui datagrid标题列宽度自适应

    最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...

  4. easyui datagrid表头 toolbar 固定

    当用到EasyUI中的 datagrid 时,设置 fit:true, 就会使表头跟toolbar固定,但是这个容器要设置固定的宽和高.

  5. easyui datagrid 每行数据添加 按钮

    今天做项目的时候,想在easyui的datagrid每一列数据后边都加上一个操作按钮,一开始想在后台拼接字符串用JSON传回,但是我测试之后发现这个方法不管用,在网上搜索了一下,整理如下: 其实要加一 ...

  6. EasyUI DataGrid DetailView(数据表格详细展示带子表格)

    Mark一下EASY UI 的数据表格详细展示使用记录. 第一步:创建页面布局 这一步主要是引用Easy UI的JS,除了easyui.min.js还有datagrid-detailview.js & ...

  7. easyui datagrid表头样式设置

    文章目录 需求描述 问题分析 问题解决 需求描述 今天,接到一个项目需求,要求动态的将easyui中的datagrid中的表头样式进行修改. 例如:将表头中的字体增大.将某个表头的字体加粗- 问题分析 ...

  8. easyui datagrid 表头 sort 排序

    datagrid的点击列表头刷新,分为两种,一种是页面刷新,不涉及后台服务器数据,不会从新查询数据库,只会刷新当前页数据: 一种是服务器级刷新,会重新加载全部数据. 如果不需要自定义排序,可以直接使用 ...

  9. easyui datagrid加载数据的三种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

最新文章

  1. 京东到家甩包袱给达达 路走错了合并也没
  2. BZOJ2351[BeiJing2011]Matrix——二维hash
  3. 8.Boost之unordered_set
  4. 隐藏画质代码_和平精英120帧率怎么设置?和平精英120帧率代码介绍!
  5. Java8函数式编程(4)--collector(收集器)
  6. python为mysql设置id自增长_postgresql如何设置id自增长
  7. CentOS 7 防火墙操作
  8. Boost笔记--Thread--Ubuntu上初次使用时遇到的问题
  9. 【应用安全技术】浅谈安卓开发代码混淆技术
  10. 微信群活跃度测试软件,微信群怎么监控活跃度?
  11. bpsk在瑞利信道matlab,请教BPSK在瑞利信道下的误码率仿真
  12. 解决IDEA支持GBK编码项目的问题
  13. itext tif图片转为pdf
  14. SPH(光滑粒子流体动力学)流体模拟实现五:PCISPH
  15. hive-sql中平方和开根号函数
  16. 【第一篇】Qt学习与使用---将数字转换成中文大写的形式
  17. WeChat 聊天记录从一台手机转移到另外一台手机的注意事项
  18. 4.16 Android 感应器实现摇一摇的功能
  19. mac新建文件的方法,新建js文件就是把txt后缀改成js
  20. 白嫖小程序云存储空间,手撸你的专属云盘

热门文章

  1. 算法导论-算法基础-2.1插入排序 (从小到大)
  2. 简单的flash小动画成品_怎么制作flash动画?看这里怎么说。
  3. mysql_connect报告“No such file or directory“错误的解决方法
  4. git仓库删除文件夹/文件
  5. python scipy 稀疏矩阵详解
  6. 求数组非连续子序列的最大和
  7. 垃圾收集器Serial 、Parallel、CMS、G1
  8. Centos7安装时引导错误以及解决方案
  9. Android组件化开发实践(九):自定义Gradle插件
  10. 7个GIF动图帮你瞬间理解三角函数