easyUI datagrid 列宽自适应(简单图解)

最新推荐文章于 2023-03-24 15:34:40 发布

雨泽

最新推荐文章于 2023-03-24 15:34:40 发布

阅读量1.5w

点赞数 3

分类专栏： javascript 文章标签： datagrid html div function 服务器脚本

本文链接：https://blog.csdn.net/yanghongchang_/article/details/7633517

版权

本文介绍了如何实现easyUI datagrid的列宽自适应。通过分析html结构和属性field，提供了一段自适应代码，确保列宽根据内容自动调整。文章还展示了自适应前后的效果对比，并提到适用于jquery-easyui-1.2.5版本。

摘要由CSDN通过智能技术生成

响应数据格式:

easyUI在html代码中结构:

发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了;

以下就是自适应代码:

//添加事件
                 function columnWidthAutoResize(){
                     
                     var cls=arguments[0];//需要自适应的列的名称
                     
                      $('#grid').datagrid({
                          onLoadSuccess:function(data){
                             var rows=data.rows;//得到行数据
                             var columnMaxCharacter=new Array();//该列最大字符数
                              //遍历所有行数据,获得该列数据的最大字符数
                              for(var i=0;i<rows.length;i++){
                                 for(var j=0;j<cls.length;j++){//遍历需要设置的列