响应数据格式:

easyUI在html代码中结构:

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

以下就是自适应代码:

  1. //添加事件
  2. function columnWidthAutoResize(){
  3. var cls=arguments[0];//需要自适应的列的名称
  4. $('#grid').datagrid({
  5. onLoadSuccess:function(data){
  6. var rows=data.rows;//得到行数据
  7. var columnMaxCharacter=new Array();//该列最大字符数
  8. //遍历所有行数据,获得该列数据的最大字符数
  9. for(var i=0;i<rows.length;i++){
  10. for(var j=0;j<cls.length;j++){//遍历需要设置的列
  11. var s=eval("rows["+i+"]."+cls[j]);
  12. //屏蔽html标签
  13. s=s.replace("<center>","");
  14. s=s.replace("</center>","");
  15. if((typeof columnMaxCharacter[cls[j]])=='undefined'){
  16. columnMaxCharacter[cls[j]]=0;
  17. }
  18. if(s.length>columnMaxCharacter[cls[j]]){
  19. columnMaxCharacter[cls[j]]=s.length;
  20. }
  21. }
  22. }
  23. //设置列宽度和字体
  24. for(var j=0;j<cls.length;j++){
  25. //得到该列的字体
  26. //    alert($("td[field='"+cls[j]+"'] div").get(0).currentStyle);
  27. // var fontSize=$("td[field='"+cls[j]+"'] div").get(0).currentStyle.fontSize;//获得字体大小
  28. //  fontSize= fontSize.replace("px","");//去掉px方便运算
  29. var fontSize=12;
  30. var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度
  31. //设定该列的宽度
  32. $("td[field='"+cls[j]+"'] div").width(w);
  33. }
  34. }
  35. });
  36. }
//添加事件
                 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++){//遍历需要设置的列
                                     var s=eval("rows["+i+"]."+cls[j]);
                                     //屏蔽html标签
                                      s=s.replace("<center>","");
                                      s=s.replace("</center>","");
                                     if((typeof columnMaxCharacter[cls[j]])=='undefined'){
                                         columnMaxCharacter[cls[j]]=0;
                                     }
                                     
                                    if(s.length>columnMaxCharacter[cls[j]]){
                                        columnMaxCharacter[cls[j]]=s.length;
                                     }
                                    
                                 }
                              }
                             
                              //设置列宽度和字体
                              for(var j=0;j<cls.length;j++){
                                  //得到该列的字体
                              //    alert($("td[field='"+cls[j]+"'] div").get(0).currentStyle);
                              // var fontSize=$("td[field='"+cls[j]+"'] div").get(0).currentStyle.fontSize;//获得字体大小
                                 //  fontSize= fontSize.replace("px","");//去掉px方便运算
                                  var fontSize=12;
                                  var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度
                                  //设定该列的宽度
                                  $("td[field='"+cls[j]+"'] div").width(w);
                              }
                             
                          }
                      });
                 }

下面在看如何调用:传入的参数的那一列需要自适应宽度:

  1. columnWidthAutoResize(new Array("orgname","showtime"));
  columnWidthAutoResize(new Array("orgname","showtime"));

对以上代码的解释:

  1. var cls=arguments[0];//需要自适应的列的名称
var cls=arguments[0];//需要自适应的列的名称

接受传入的需要自适应的列的名称数组;

  1. var rows=data.rows;//得到行数据
var rows=data.rows;//得到行数据

得到从服务器端响应的数据行集合

  1. var columnMaxCharacter=new Array();//该列最大字符数
var columnMaxCharacter=new Array();//该列最大字符数

记录需要设定列的字符最大数 (只是对中文考虑了,没有考虑英文) 最后的格式键值的形式   数组名['需要设定列名']=循环后最大字符

  1. for(var i=0;i<rows.length;i++){
 for(var i=0;i<rows.length;i++){

遍历所有的数据行,

  1. for(var j=0;j<cls.length;j++){//遍历需要设置的列
for(var j=0;j<cls.length;j++){//遍历需要设置的列
  1. var s=eval("rows["+i+"]."+cls[j]);
var s=eval("rows["+i+"]."+cls[j]);

动态脚本 执行取出该行对应属性的字符串  rows[1].orgname 等效

  1. //屏蔽html标签
  2. s=s.replace("<center>","");
  3. s=s.replace("</center>","");
//屏蔽html标签
s=s.replace("<center>","");
s=s.replace("</center>","");

html标签不是显示值,所以不能当作字符算;

  1. if((typeof columnMaxCharacter[cls[j]])=='undefined'){
  2. columnMaxCharacter[cls[j]]=0;
  3. }
if((typeof columnMaxCharacter[cls[j]])=='undefined'){
columnMaxCharacter[cls[j]]=0;
}

如果第一次 没有给该列设置最大字符数是undefined 给默认值0 方便后面的对比

  1. if(s.length>columnMaxCharacter[cls[j]]){
  2. columnMaxCharacter[cls[j]]=s.length;
  3. }
  4. //alert(columnMaxCharacter[cls[j]]);
  5. }
 if(s.length>columnMaxCharacter[cls[j]]){
columnMaxCharacter[cls[j]]=s.length;
}
//alert(columnMaxCharacter[cls[j]]);
}

如果当前的s的长度比之前的该列的字符数大,那么直接设置当前字符数为最大值

  1. for(var j=0;j<cls.length;j++){
 for(var j=0;j<cls.length;j++){

这个循环遍历的是得到每一列最大字符数之后的数组,cls对应columnMaxCharacter的键值的形式

  1. var fontSize=12;
 var fontSize=12;

这个是默认字体的大小,为什么写死值,是因为暂时没有找到在火狐下得到默认字体大小的方法 $("td[field='"+cls[j]+"'] div").get(0).currentStyle.fontSize(火狐不支持)

  1. var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度
   var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度

这里是用 字体大小 * 该列最大字符数 + 1 得到列的宽度

  1. $("td[field='"+cls[j]+"'] div").width(w);
  $("td[field='"+cls[j]+"'] div").width(w);

得到表头设置宽度,这里得到的就是表头,看上面第二张图片

转载注明请地址

easyUI版本:jQuery-easyui-1.2.5

如果大家发现其中不足,请指出,谢谢!

自适应之后效果图:

自适应之前效果图:



easyUI datagrid 列宽自适应(简单 图解)(转)的更多相关文章

  1. easyui datagird 列宽自适应

    代码如下: onLoadSuccess: function (data) { var rows = data.rows; //得到行数据 var columnMaxCharacter = new Ar ...

  2. 一步步实现 easyui datagrid表格宽度自适应,效果非常好

    一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性  fitColumns:true $(function(){ //初始加载,表格宽 ...

  3. easyui datagrid 列隐藏和显示

    easyui datagrid 列隐藏和显示 用js怎么控制列的显示和隐藏?   最佳答案   $('#grid').datagrid('hideColumn','列field');把hideColu ...

  4. WPF DataGrid 列宽填充表格方法

    WPF中使DataGrid 列宽填充表格方法,设置ColumnWidth属性为ColumnWidth="*"即可. 源码: <DataGrid AutoGenerateCol ...

  5. NPOI 列宽自适应 代码示例

    //列宽自适应,只对英文和数字有效 for (int i = 0; i <= maxColumn; i++) { sheet.AutoSizeColumn(i); } //获取当前列的宽度,然后 ...

  6. js控制easyui datagrid列的显示和隐藏

    easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列

  7. easyui datagrid 列的内容超出所定义的列宽时,自动换行

    定义表单  nowrap="false"可以使得列中的内容超出所定义的列宽是就会自动换行pagination : true, // 当true时在DataGrid底部显示一个分页工 ...

  8. 动态改变EasyUI grid 列宽和隐藏列

    隐藏显示 $('#yourGrid').datagrid('hideColumn','yourColumn'); $('#yourGrid').datagrid('hideColumn','yourC ...

  9. POI导出excel列宽自适应

    让单元格宽度随着列和单元格值的宽度自适应: //存储最大列宽 Map<Integer, Integer> maxWidth = new HashMap<>(); // 将列头设 ...

随机推荐

  1. KMP算法(研究总结,字符串)

    KMP算法(研究总结,字符串) 前段时间学习KMP算法,感觉有些复杂,不过好歹是弄懂啦,简单地记录一下,方便以后自己回忆. 引入 首先我们来看一个例子,现在有两个字符串A和B,问你在A中是否有B,有几 ...

  2. java基础06 IO流

    IO用于在设备间进行数据传输的操作. Java IO流类图结构:   IO流分类 字节流: InputStream FileInputStream BufferedInputStream Output ...

  3. 虚拟机Linux系统下配置网络

    虚拟机上安装Redhat9.0后是没有网络的,而本来的Windows系统是可以上网的,此时想在Redhat上网就需要在Linux系统上配置网络,以下是笔者自己配置的一点心得. 1.电脑本机系统打开网络 ...

  4. redis 一般性使用概述

    最近一段时间与redis接触比较频繁.发现有些东西还是工作中经常会用到的,自己也花了点时间巩固下.本篇文章主要是以总结性的方式梳理,因为redis的主题很大,任何一个技术点展开都是几篇文章的量.也可以 ...

  5. HDU1036 Average is not Fast Enough!

    Problem Description A relay is a race for two or more teams of runners. Each member of a team runs o ...

  6. npm的package.json字段含义中文文档

    简介 本文档有所有package.json中必要的配置.它必须是真正的json,而不是js对象. 本文档中描述的很多行为都受npm-config(7)的影响. 默认值 npm会根据包内容设置一些默认值 ...

  7. 【原创】01-1. 基于 checked 关于 attribute 和 property 的理解

    Attribute(属性) 和 Property(特性) Attribute(元素节点的属性),例如html中常用的class.title.align等(即:属性节点).而Property 是这个DO ...

  8. GPUImage原理

    GPUImage是一个开元的基于GPU的图片或视频的处理框架,其本身内置了多达120多种常见的滤镜效果,并且支持照相机和摄像机的实时滤镜,并且能够自定义图像滤镜. 美颜的基本概念 OpenGL ES: ...

  9. Java编写的日历,输入年月,输出这个月的日期与星期

    import java.util.Scanner; public class rili { public static void main(String[] args) { for (int g = ...

  10. (5)UIView常见属性

    此时打印的所有子控件会把使用自动布局的控件也打印出来,不准确,所以得去掉这两个选项,再进行打印 使用实例如下: viewWithTag的注意点,当有多个相同的Tag值时,它是先找到第一个Tag值,而不 ...