精华内容
下载资源
问答
  • layui:table列宽屏幕自适应

    千次阅读 2020-12-19 08:42:35
    前端框架用的layui,发现table的列宽写成百分比没有生效,只能指定宽度,无法做到屏幕自适应。修改之前代码:style="padding-top: 20px;table-layout:fixed;width: 100%">测试环境占用服务项目编号申请人开始时间...

    前端框架用的layui,发现table的列宽写成百分比没有生效,只能指定宽度,无法做到屏幕自适应。

    修改之前代码:

    style="padding-top: 20px;table-layout:fixed;width: 100%">

    测试环境占用服务项目编号申请人开始时间结束时间项目状态操作

    {% for r in records %}

    {{ r.env_name }}

    {% if r.env_status == 0 %}

    {% elif r.env_status == 1 %}

    {% endif %}

    {{ r.use_server }}{{ r.env_pro }}{{ r.env_user }}{{ r.start_date }}{{ r.end_date }}{% if r.env_pro %}

    {{ r.get_pro_status_display }}

    {% endif %}

    {% if r.env_pro %}

    {% if r.env_user == username %}

    {% if r.pro_status == 0 or r.pro_status == 1 %}

    οnclick="openEditModel('{{ r.env_pro }}')">

    修改

    {% endif %}

    {% if r.pro_status != 1 %}

    οnclick="recordDelete('{{ r.env_pro }}','{{ r.env_name }}')">

    删除

    {% endif %}

    {% endif %}

    {% if usr_role == 'admin' or usr_role == 'dev' %}

    {% if r.pro_status == 1 %}

    οnclick="openReleaseModel('{{ r.env_pro }}')">

    释放

    {% endif %}

    {% endif %}

    {% endif %}

    {% endfor %}

    image.png

    下面是写了个js方法,获取屏幕宽度再动态生成表头信息,代码如下:

    style="padding-top: 20px;table-layout:fixed;width: 100%">

    {% for r in records %}

    {{ r.env_name }}

    {% if r.env_status == 0 %}

    {% elif r.env_status == 1 %}

    {% endif %}

    {{ r.use_server }}{{ r.env_pro }}{{ r.env_user }}{{ r.start_date }}{{ r.end_date }}{% if r.env_pro %}

    {{ r.get_pro_status_display }}

    {% endif %}

    {% if r.env_pro %}

    {% if r.env_user == username %}

    {% if r.pro_status == 0 or r.pro_status == 1 %}

    οnclick="openEditModel('{{ r.env_pro }}')">

    修改

    {% endif %}

    {% if r.pro_status != 1 %}

    οnclick="recordDelete('{{ r.env_pro }}','{{ r.env_name }}')">

    删除

    {% endif %}

    {% endif %}

    {% if usr_role == 'admin' or usr_role == 'dev' %}

    {% if r.pro_status == 1 %}

    οnclick="openReleaseModel('{{ r.env_pro }}')">

    释放

    {% endif %}

    {% endif %}

    {% endif %}

    {% endfor %}

    js:

    $(function () {

    changeWith();

    });

    //列表宽度自适应调整

    function changeWith() {

    var screenWith = document.body.clientWidth;

    var w0 = (screenWith-44) / 9;

    var w1 = 0.9 * w0;

    var w2 = 2.5 * w0;

    var w3 = 1.1 * w0;

    var thead = document.getElementById('thead');

    var tr = document.createElement("tr");

    tr.innerHTML=

    '

    ' + '测试环境' + '' +

    '

    ' + '占用服务' + '' +

    '

    ' + '项目编号' + '' +

    '

    ' + '申请人' + '' +

    '

    ' + '开始时间' + '' +

    '

    ' + '结束时间' + '' +

    '

    ' + '项目状态' + '' +

    '

    ' + '操作' + '' +

    thead.appendChild(tr);

    }

    效果如下:

    image.png

    展开全文
  • 利用pandas自动生成了一些报表,需要格式化输出。综合学习了一下各位大神的心得,总算解决了,不敢藏私,分享如下: 思路:1、通过遍历,计算最大列宽,同时注意中文宽度;2、调整列宽

    利用pandas自动生成了一些报表,需要格式化输出。综合学习了一下各位大神的心得,总算解决了,不敢藏私,分享如下(可直接使用):

    思路:1、通过遍历,计算最大列宽,同时注意中文宽度; 2、调整列宽。

    from openpyxl import load_workbook, workbook
    from openpyxl.utils import get_column_letter
    
    wb = load_workbook('自动列宽.xlsx')
    ws = wb.active
    
    
    # 第一步:计算每列最大宽度,并存储在列表lks中。
    
    lks = [] #英文变量太费劲,用汉语首字拼音代替
    for i in range(1,ws.max_column+1): #每列循环
        lk = 1 #定义初始列宽,并在每个行循环完成后重置
        for j in range(1, ws.max_row + 1): #每行循环
            sz = ws.cell(row=j,column=i).value #每个单元格内容
            if isinstance(sz,str): #中文占用多个字节,需要分开处理
                lk1 = len(sz.encode('gbk')) #gbk解码一个中文两字节,utf-8一个中文三字节,gbk合适
            else:
                lk1 = len(str(sz))
            if lk < lk1:
                lk = lk1 #借助每行循环将最大值存入lk中
            # print(lk)
        lks.append(lk) # 将每列最大宽度加入列表。(犯了一个错,用lks = lks.append(lk)报错,append会修改列表变量,返回值none,而none不能继续用append方法)
    
    # 第二步:设置列宽
    for i in range(1, ws.max_column +1):
        k = get_column_letter(i) #将数字转化为列名,26个字母以内也可以用[chr(i).upper() for i in range(97, 123)],不用导入模块
        ws.column_dimensions[k].width = lks[i-1]+2 #设置列宽,一般加两个字节宽度,可以根据实际情况灵活调整
    
    
    wb.close()
    wb.save('自动列宽.xlsx')

    展开全文
  • gridview 列宽自适应 现有的方法都是下面的这句代码,如果不分页的话,会导致加载数据的时候很卡。 this.gridView1.BestFitColumns();//自动调整所有字段宽度 后来经过涛神的指点发现了dev有以下属性,可以设置成...

    gridview 列宽自适应

    现有的方法都是下面的这句代码,如果不分页的话,会导致加载数据的时候很卡。

    this.gridView1.BestFitColumns();//自动调整所有字段宽度

    后来经过涛神的指点发现了dev有以下属性,可以设置成只对某些数量的行数进行分配计算,这样使用该代码的时候就不会拖慢速度了,或者也可以设置它的模式(bestfitmode) 为 fast模式也行。
    在这里插入图片描述

    展开全文
  • 响应数据格式: ... 发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得...以下就是自适应代码: [javascript] view plain copy print?//添加事件 function columnWidthAutoResize(){ ...

    响应数据格式:

    easyUI在html代码中结构:

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

    以下就是自适应代码:

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

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

    [javascript] view plain copy
    print ?
    1. columnWidthAutoResize(new Array("orgname","showtime"));  
      columnWidthAutoResize(new Array("orgname","showtime"));

    对以上代码的解释:

    [javascript] view plain copy
    print ?
    1. var cls=arguments[0];//需要自适应的列的名称  
    var cls=arguments[0];//需要自适应的列的名称
    接受传入的需要自适应的列的名称数组;

    [javascript] view plain copy
    print ?
    1. var rows=data.rows;//得到行数据  
    var rows=data.rows;//得到行数据
    得到从服务器端响应的数据行集合

    [javascript] view plain copy
    print ?
    1. var columnMaxCharacter=new Array();//该列最大字符数  
    var columnMaxCharacter=new Array();//该列最大字符数
    记录需要设定列的字符最大数 (只是对中文考虑了,没有考虑英文) 最后的格式键值的形式   数组名['需要设定列名']=循环后最大字符

    [javascript] view plain copy
    print ?
    1. for(var i=0;i<rows.length;i++){  
     for(var i=0;i<rows.length;i++){
    遍历所有的数据行,

    [javascript] view plain copy
    print ?
    1. for(var j=0;j<cls.length;j++){//遍历需要设置的列  
    for(var j=0;j<cls.length;j++){//遍历需要设置的列

    [javascript] view plain copy
    print ?
    1. var s=eval("rows["+i+"]."+cls[j]);  
    var s=eval("rows["+i+"]."+cls[j]);
    动态脚本 执行取出该行对应属性的字符串  rows[1].orgname 等效


    [javascript] view plain copy
    print ?
    1. //屏蔽html标签  
    2.                                      s=s.replace("<center>","");  
    3.                                      s=s.replace("</center>","");  
    //屏蔽html标签
                                         s=s.replace("<center>","");
                                         s=s.replace("</center>","");
    html标签不是显示值,所以不能当作字符算;

    [javascript] view plain copy
    print ?
    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 方便后面的对比


    [javascript] view plain copy
    print ?
    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的长度比之前的该列的字符数大,那么直接设置当前字符数为最大值

    [javascript] view plain copy
    print ?
    1. for(var j=0;j<cls.length;j++){  
     for(var j=0;j<cls.length;j++){
    这个循环遍历的是得到每一列最大字符数之后的数组,cls对应columnMaxCharacter的键值的形式

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

    [javascript] view plain copy
    print ?
    1. var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度  
       var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度
    这里是用 字体大小 * 该列最大字符数 + 1 得到列的宽度

    [javascript] view plain copy
    print ?
    1. $("td[field='"+cls[j]+"'] div").width(w);  
      $("td[field='"+cls[j]+"'] div").width(w);
    得到表头设置宽度,这里得到的就是表头,看上面第二张图片

    转载注明请地址

    easyUI版本:jQuery-easyui-1.2.5

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


    自适应之后效果图:

    自适应之前效果图:




    展开全文
  • python保存excel文件列宽自适应解决方案

    万次阅读 多人点赞 2019-11-10 19:46:08
    包括: 保存文件时列宽自适应、添加sheet而不是覆盖原xlsx文件、合并相同内容的单元格等 2020-04-18代码更新 # -*- coding:utf8 -*- from openpyxl.styles import Alignment from openpyxl.styles import ...
  • 因为项目中需要使用到ExcelWriter导出excel的列宽自适应,下面解决该问题的经过,希望可以对遇到同样问题的开发者有所帮助。 一、通过查询Hutool官方的api文档发现autoSizeColumn()方法 官方api链接 但是,在代码...
  • 两行代码搞定 //设置tableView水平滚动和自适应宽度 ui.tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::ResizeToContents); ui.tableView->horizontalHeader()->...
  • linux系统不支持中文自适应,可以参考 解决poi导出excel列宽自适应,autoSizeColumn(i)方法不支持中文、linux环境下报空指针的问题 解决思路 设置自适应后,再将自适应的列宽调整之前的1.2(或其他
  • openpyxl实现excel自适应列宽

    千次阅读 2020-06-02 12:04:36
    最近在做一些自动化生成excel的工作,为了提高excel的可读性,想要通过代码实现excel自适应列宽。查了一些资料,并没有找到相关的模块。所以,自己写了一个方法来适应列宽。 大概的思路就是,遍历每一列,找出每一列...
  • 用python的xlwt模块自适应列宽写入excel 最近需要写一个用python将数据写入excel的小工具,遇到了自适应列宽写入excel的问题,特此记录下解决思路及过程。 运行环境:Windows10、PyCharm 2017.3.2、Python3.6、xlwt...
  • 让DataGridView的列宽自适应

    万次阅读 热门讨论 2009-06-29 16:03:00
    今天有个需求,要把数据显示在一个DataGridView中,为了美观,希望列宽可以只适应内容。本想着如果实在没办法,就自己写代码实现了,没想到人家自己就提供了简便的方法。就一行代码:Columns[i].AutoSizeMode = ...
  • easyexcel自适应列宽的一种方式

    万次阅读 2020-05-11 11:35:21
    代码中,是读取所有列的长度,然后取最大列的长度,但是它的本地缓存用的是static,导致每次导出的列宽都不一样,所以我就取巧了下… public class Custemhandler extends AbstractColumnWidthStyleStrategy { ...
  • QTreeWidget的列宽设置和QTableWidget的类似,都是对head属性进行编辑。 直接上代码: ...// 列宽自适应数据长度 self.treeWidget.header().setSectionResizeMode(0, QHeaderView.ResizeToContents) ...
  • 代码是伪代码,具体用什么数据类型来封装excel的数据可以根据实际情况选择。代码如下: public class ExcelBuilder { public static HSSFWorkbook createExcel(参数){ HSSFWorkbook wb = new HSSFWorkbook(); //...
  • 本文介绍二个GridView自适应列宽不变形的方法,希望对大家有所帮助。例子:复制代码 代码示例://在GridView的行数据绑定完的事件中设置protected void gvObjectList_RowDataBound(object sender, GridViewRowEventA....
  • 探索el-table列宽自适应内容的实现

    万次阅读 2019-05-26 12:59:58
    最近项目上线之后,产品对首页的列表提出了列宽自适应内容的需求,即列的宽度由当前列中内容最宽的一个单元格决定(单元格内容不换行)。项目中的表格使用的是element-ui的table组件,非常强大,满足了各种各样的...
  • 动态绑定的GridView由于列数不固定,而列又太多(博主做的这个项目有150个左右的字段),这样设置GridView固定宽度就不能满足需求了
  • ListView列宽自适应

    万次阅读 2013-04-01 21:00:51
    使用TListView列表显示内容,如果列内容过长,就会显示成‘XXX…’形式,此时如果双击列标题,列宽将变为自适应。用代码设置如下: 1、设置ListView.Column[0].Width := -1;//列宽根据列内容自适应,此时保证列内容...
  • 背景:在listview中使用checkbox,每添加一个数据,就在listview中放入一个checkbox;...解决思路:让listview自适应列宽。 测试代码: 1.xaml代码 <Window x:Class="ListViewTest.MainWindow
  • //列宽自适应,只对英文和数字有效 for (int i = 0; i <= maxColumn; i++) { sheet.AutoSizeColumn(i); } //获取当前列的宽度,然后对比本列的长度,取最大值 for (int columnNum = 0; columnNum <= ...
  • easyUI datagrid 列宽自适应(简单 图解)

    万次阅读 2012-06-05 10:43:04
    响应数据格式: ... 发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了;...以下就是自适应代码: //添加事件  function columnWidthAutoResize(){    var cl
  • 固定数据,设置行高、列宽自适应数据(常见的设置自适应方法)2.固定列宽,缩小数据字体大小适应列宽本文将通过java程序来介绍具体的自适应设置方法。工具:Free Spire.XLS for Java(免费版)注:可通过官网Java 代码...
  • XSSFWorkbook workbook = new XSSFWorkbook(); XSSFSheet sheet = workbook.createSheet("扣费明细"); XSSFCellStyle cellStyle = workbook.createCellStyle();... 这是代码,求大神帮助,无奈了
  • field对应服务器返回来的需要展示的数据的属性(名称要相同),title是页面展示的名称,width:列宽。 二、实现方式 遍历后台返回的数据, 根据内容计算出每列的像素, 重组 columns  需要的数据,来...
  • 场景:在使用java poi导出excel表格时,设置了自适应列宽格式,但发现导出的单元格中包含中文会导致自适应列宽不生效。 excel导出异常效果如下图所示: 解决:网上查了原因,大多说是excel是老外开发的,自适应...
  • POI设置自适应列宽(中文支持)实现代码 实现代码 //poi设置自适应列宽 private void setColumnWidth(HSSFSheet sheet) { //sheet的索引从0开始,获取sheet列数 int maxColumn = sheet.getRow(0)....
  • 默认显示格式如下: 溢出隐藏,鼠标经过再显示出来,添加 show-overflow-tooltip 属性给需要的列 基于 element-ui 组件库的 el-table-column 组件, 支持自适应列宽功能 安装 npm install af-table-column 引入 // ...
  • } 设置列宽自适应 public class ExcelCellWidthStyleStrategy extends AbstractColumnWidthStyleStrategy { private static final int MAX_COLUMN_WIDTH = 255; private Map, Map, Integer>> CACHE = new HashMap(8...
  • POI导出excel列宽自适应

    千次阅读 2021-01-28 14:16:34
    让单元格宽度随着列和单元格值的宽度自适应://存储最大列宽Map maxWidth = new HashMap<>();// 将列头设置到sheet的单元格中for (int n = 0; n < columnNum; n++) {HSSFCell cellRowName = rowRowName....
  • } 列宽自适应 //宽度自适应 for (int i = 0; i ; i++) { 如果是 sheet.autoSizeColumn(i); sheet.setColumnWidth(i,sheet.getColumnWidth(i)*17/10); } 完整代码 package com.incar.base.util; import org.apache....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,777
精华内容 1,110
关键字:

列宽为自适应代码