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

本文介绍了在EasyUI Datagrid中遇到的标题列与数据列宽度不对齐的问题,以及如何通过自定义JavaScript代码实现列宽度的自动调整,以确保标题和数据对齐。作者提供了一个在数据加载成功后计算并设置列宽的方法,从而解决宽度不匹配的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体自适应呢?如: columns: [[{ field: 'testName', title: '测试名', align: 'center' },{ field: 'testValue', title: '测试值', align: 'center' }]],如果按照上面这样设置列而不做其他处理的话。绑定出来的数据将会变成:

          

如上图这样列标题和数据主体对不上号。或许有的朋友会想,直接设个固定值不就完了,但是对于一些不能确定长度的数据设固定值显然不能达到我们的要求。带着这个问题我百度谷歌了一番 发现网络上并没有我太满意的相关资料。毛主席曾经曰过:自己动手丰衣足食。我只好听从毛主席的教导自己解决问题。By 梨洛

要设置列宽度,我们必须知道easyui datagrid在html中是怎么样的。于是乎动用chrome的开发人员工具,查看一番如图:

头部列标题为:

即我们可以用Jquery选择器 $(".datagrid-header-inner table tr:first-child")来取到标题列  (数据主体列也差不多我就不贴出来了)。

既然能取得到这些ÿ

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值