layui table 列宽百分比显示

   var layer = layui.layer, form = layui.form, table = layui.table;
            var $ = layui.$;
            /*select gysmc,zyzw ,xm ,sjhm ,bgshm ,emilyx ,
            zgsrgzwsj ,zggsgl ,cast(gysxxid as int) as gysxxid, pc,
             gysryxxMdataID as ID,sjbs from gysryxxMdata*/
            var tableInit = table.render({
                elem: ‘#tbgysplay‘
                , method: ‘post‘
                , data: jsonData
                , height: "auto"
                , id: "tbgysplay"
                , text: {none: ‘暂无相关数据‘}
                , toolbar: "#toolbarplan"
                , cols: [[
                    {type: "checkbox", fixed: "left", width: 50}
                    , {
                        field: "number", title: "序号", width: ‘5%‘, align: "left", templet: function (data) {
                            return data.LAY_INDEX
                        }
                    }
                    , {field: "ID", title: "ID", align: "left", hide: true}
                    , {field: "action", title: "action", align: "left", hide: true}
                    , {field: "sjbs", title: "sjbs", align: "left", hide: true}
                    , {field: "供应商名称", title: "供应商名称", width: ‘20%‘, align: "left"}
                    , {field: "主要产品类型", title: "主要产品类型", width: ‘20%‘, align: ‘left‘}
                    , {field: "所在省份", title: "所在省份", width: ‘15%‘, align: ‘left‘}
                    , {
                        field: "PSA计划时间", title: "PSA计划时间", width: ‘20%‘, align: ‘left‘, edit: ‘select‘,
                        templet: function (d) {
                            return ‘<input type="text" name="rzrq" verify lay-verify="verify" value="‘ + (d.rzrq || ‘‘) + ‘" placeholder="请选择时间" readonly="readonly" class="layui-input layui-input-date" style="text-align: center"/>‘;
                        }
                    }
                    , {field: "PSA计划负责人", title: "PSA计划负责人", width: ‘20%‘, align: ‘left‘, edit: ‘text‘}
                ]]
                , done: function () {//当数据渲染完后,执行的回调
                    //日期控件
                    $(".layui-input-date").each(function (i) {
                        layui.laydate.render({
                            elem: this,
                            format: "yyyy-MM-dd",
                            done: function (value, date) {
                                if (res && res.data[i]) {
                                    $.extend(res.data[i], {‘rzrq‘: value})
                                }
                            }
                        });
                    });
                    layer.closeAll();
                }

            });
            //双击编辑行
            table.on(‘edit(tbgysplay)‘, function (obj) {
                //检验格式 电话 办公室电话  邮箱
            });

原文地址:https://www.cnblogs.com/luo1240465012/p/11423207.html

时间: 2024-11-01 17:38:17

layui table 列宽百分比显示的相关文章

Bootstrap Table列宽拖动的方法

在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table做的,客户要求能利用拖动改变列宽,为了总结和备忘,现将实现的过程记录如下: 1.Bootstrap Table可拖动,需要用到它的Resizable扩展插件,具体可见bootstrap-table的官方文档链接:http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/ 进入之后,找到Resizable插件,点击Home进入github可以找到详细的用法

devpress grid表格自适应列宽的问题

1 /// <summary> 2 /// 自适应列宽,显示横向滚轴,只有当所有列都已经在界面上加载完成之后才能生效 3 /// </summary> 4 public void setAutoCloumnWidth() 5 { 6 //自适应列宽 7 this.gridView.BestFitColumns(); 8 this.gridView.HorzScrollVisibility = DevExpress.XtraGrid.Views.Base.ScrollVisibili

CSS 控制table 滑动及调整列宽等问题总结

一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的height高度.然后设置overflow-y:scroll.这样当内容高度超过了height设定的高度,就会出现滚动条 css: .scroll_y{ max-height: 200px; /* 宽度大概比表头宽17px,具体值实际调试 */ width:531px; overflow-y: scrol

浏览器兼容的实现table中通过拖拽改变列宽的最佳实践

在企业级应用中,表格是非常常见的展现方式,这时当列数据较长时,一种比较自然,体验也较好的处理方式就是通过拖拽改变列宽,这个功能在一些重量级JS组件库中都有提供,实现原理各有不同,但是一个共同点就是实现比较复杂,那我们通过很少的代码,常规的table结构,能实现这个功能么?本文将提供一个经过实际验证的实践,供开发者参考,扩展思路. 总体思路: 1.HTML结构: 为了简化代码,采用标准的HTML结构,即table-tr-td模式,无其他限制,在我们的实际应用中,表格非常复杂,但是核心技术没有变:

angualr项目table拖拽列宽效果

首先要有一个table的html列表 我就不上了,因为加载有异步的问题,所以我把js代码放到一个封装函数里面,表格加载出来之后调用函数,这个表格的dom就能找到了.下面是封装的js代码 //拖拽调整列宽 $rootScope.searchTable= function(){ var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var table = document.getElementsByClassName('table'); console.log(t

表格列宽怎么设置都无效?(td内容自动换行问题)

有次设置表格列宽时,显示的实际宽度与设置的宽度不一致,且无规律变化.最后,在查找资料后发现,可能是td内容 自动换行 的问题.因为表格中的内容有中文.英文字母.还有数字,以及三者的各种组合,所以换行的方式不一致,导致列宽变化.(个人分析,不妥之处请拍砖.) 所以添加以下css可以解决问题: table{ word-break:break-all ; word-wrap:break-word } 说明: (1) word-break:break-all:截断单词进行换行. (2) word-wra

mysql中的回车换行,jtable换行,自动调整行高,列宽&#160;\r&#160;\n&#160;&lt;br/&gt;

两个问题: 1.mysql里不支持换行,textarea里的回车传入后再传出来就变成了空格. 2.JTable的render默认是继承jlabel的,不支持换行显示. 为了实现换行,一种方法是新写个render继承jtextarea,但是这样了之后不好设自动调整列宽,行高不能根据回车调整,也调的不准,而且超级卡...这种方法代码可以自己网上搜. 下面介绍第二种方法:默认的render不支持换行显示,我们先实现让单元格可以换行.我们在某一个单元格的value前面加上,末尾加,中间要要换行的地方加

table表中行的显示与隐藏

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <

table表格超出部分显示省略号

做table表格时,某一列字数比较多,希望超出宽度的部分以省略号显示 设置table的布局 默认automatic 以表格内容显示相应宽度 改成fixed 以表格列宽显示内容 table{    table-layout: fixed;} 在需要设置列加上 <td style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"> white-space:nowrap; 文本以单行显示,不换行 overfl