精华内容
下载资源
问答
  • layui单元格换行

    2020-07-27 22:12:53
    layui单元格换行 使其能显示,如果左右列固定,在done回调中使用下方方法 .layui-table-cell { height: auto; } //固定行随单元格自动调整 function autoFixedHeight(tableElem) { // 获取表格div var $...

    layui单元格换行 使其能显示,如果左右列固定,在done回调中使用下方方法

     .layui-table-cell {
                height: auto;
            }
    
    //固定行随单元格自动调整
    function autoFixedHeight(tableElem) {
        // 获取表格div
        var $tableView = $(tableElem).next(".layui-table-view");
        // 获取两侧浮动栏
        var $fixed = $tableView.find(".layui-table-fixed");
        var dataIndex;
        var trHeight;
        // 遍历tr 修正浮动栏行高
        $tableView.find(".layui-table-main").find("tr").each(function () {
            dataIndex = $(this).attr("data-index");
            trHeight = $(this).css("height");
            $fixed.find("tr[data-index=" + dataIndex + "]").css("height", trHeight);
        });
    }
    
    //使用
    //layui.....
    done:function(){
    autoFixedHeight(this.elem[0])
    }
    
    展开全文
  • 不直观,超出内容没有自动换行,且不适应产品需求(超出部分需要自动换行) 代码: 将以下css样式覆盖到当前html文件的头部样式中即可: .layui-table-cell { font-size:14px; padding:0 5px; height:auto; o...

    改样式前效果:

    不直观,超出内容没有自动换行,且不适应产品需求(超出部分需要自动换行)

    在这里插入图片描述



    代码:

    将以下css样式覆盖到当前html文件的头部样式中即可:

            .layui-table-cell {
                font-size:14px;
                padding:0 5px;
                height:auto;
                overflow:visible;
                text-overflow:inherit;
                white-space:normal;
                word-break: break-all;
            }
    

    修改后:

    自动铺满换行,超出部分已展开
    在这里插入图片描述



    参考文献:

    layui table 填写数据内容过多,自动换行完美解决:

    https://blog.csdn.net/cdsn13082487212/article/details/91039184


























    注:以上内容仅提供参考和交流,请勿用于商业用途,如有侵权联系本人删除!


    持续更新中…

    如有对思路不清晰或有更好的解决思路,欢迎与本人交流,QQ群:273557553
    你遇到的问题是小编创作灵感的来源!


    展开全文
  • layui数据表格自动换行解决办法

    千次阅读 2020-08-02 23:02:52
    不是所有的列表都是一行就搞定,如果遇到layui.table需要支持自动换行的情况,这个时候就需要改造layui的数据表格,支持自动换行。 想要实现的效果如下:(原图找不到了,用另外一个做demo把) 单行 => 多行自动...

    问题背景

    不是所有的列表都是一行就搞定,如果遇到layui.table需要支持自动换行的情况,这个时候就需要改造layui的数据表格,支持自动换行。

    想要实现的效果如下:(=.=原图找不到了,将就理解一下把)
    单行 => 多行自动换行
    在这里插入图片描述
    改造完成效果(自动换行):
    在这里插入图片描述

    解决方案

    核心代码/改造要点如下:

    1. 修改CSS样式,支持换行(*必须)。
    <style>
        .layui-table-cell {
            line-height: 20px !important;
            vertical-align: middle;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }
    </style>
    
    1. 增加对操作栏的高度转换,以便更好的显示(可选)。
    done: function(res, curr, count){
        $(".layui-table-main tr").each(function (index, val) {
            $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
            $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
        });
    }
    

    layui.table.render代码示范:

    //动态改变列宽大小
    function changeWidth(width){
        if(screen.width<1367){
            return width/2;
        }else if(screen.width<1601){
            return width/1.5;
        }else{
            return width;
        }
    }
     table.render({
                elem: '#currentTableId',
                method: 'post',
                url: '${request.contextPath}/tender/list',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    {field: 'tenderName', minWidth: changeWidth(250),title: '名称', sort: true},
                    {field: 'tenderDesc', minWidth: changeWidth(250),title: '预算金额(采购公告)/中标单位(中标公告)'},
                    {field: 'source', title: '数据来源',minWidth:changeWidth(190),width:changeWidth(190)},
                    {field: 'category', title: '分类',minWidth:changeWidth(100),width:changeWidth(100)},
                    {field: 'tags', title: '标签',minWidth:changeWidth(100),width:changeWidth(100)},
                    {title: '附件',minWidth:200,templet: function(d){
                        if(d.attachment!=null&&d.attachment!=""&&d.attachment!="[]"){
                            let att = "";
                            //修复attachment包含非法html符合导致报错问题
                            try{
                                let json = $.parseJSON(d.attachment);
                                for(let i = 0; i<json.length; i++){
                                    att+=("<a target='_blank' href='"+renderHref(json[i].file)+"' ><i class='layui-icon layui-icon-download-circle'></i>"+json[i].name+"</a><br>");
                                }
                                return att;
                            }catch (e) {
                                console.log(e);
                                return "ERROR:包含非法HTML元素或JSON格式不正确";
                            }
                        }else{
                            return "";
                        }
                    }},
                    {field: 'createTime',minWidth:120,width:120, title: '发布时间'},
                    {title: '链接',minWidth:60,width:60,templet: function(d){
                                return '<a target="view_window" href="'+d.url+'"><i class="layui-icon layui-icon-website"></i></a>';
                        }},
                    {title: '状态',minWidth:100,width:100,templet: function(d){
                        if(d.status===2){
                            return '<i class="layui-icon layui-icon-ok-circle" style="color: #01AAED">分析</i>';
                        }else if(d.status===3){
                            return '<i class="layui-icon layui-icon-close-fill" style="color: #FF5722">异常</i>';
                        }else if(d.status===0){
                            return '<i class="layui-icon layui-icon-delete" style="color: #eeeeee">废弃</i>';
                        }else{
                            return '<i class="layui-icon layui-icon-release" style="color: #5FB878">抓取</i>';
                        }
                    }},
                    {title: '操作', minWidth: 60,width: 60, templet: '#currentTableBar',align: "center"}
                ]],
                limits: [20 , 50 , 100 , 200 , 500 , 1000],
                limit: 50,
                page: true,
                done: function(res, curr, count){
                    $(".layui-table-main tr").each(function (index, val) {
                        $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
                        $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
                    });
                }
            });
    

    最终效果

    Done !
    在这里插入图片描述

    展开全文
  • layui-table自动换行.txt

    2020-06-06 15:19:57
    使用layu数据表格i的时候,文字太多会使用……代替,用户体验不好,只需要在页面中增加几行样式文件即可解决。
  • 个人博客 地址:http://www.wenhaofan.com/article/20181120180507 layui 的table的的cell默认是超出hidden的,如果希望超出长度自动换行便需要覆盖layui的默认样式实现代码如下.mytable .layui-table-cell{ height:...

    个人博客 地址:http://www.wenhaofan.com/article/20181120180507

    layui 的table的的cell默认是超出hidden的,如果希望超出长度自动换行便需要覆盖layui的默认样式实现

    代码如下

    .mytable .layui-table-cell{
    height:auto;
    overflow:visible;
    text-overflow:inherit;
    white-space:normal;
    }

    转载于:https://www.cnblogs.com/fanwenhao/p/10020264.html

    展开全文
  • layui数据表格自动换行,当设置固定列时,会出现行高不一致的问题,用户体验不好,只需要在页面中增加几行代码即可解决。
  • Layui 数据过长自动换行

    万次阅读 2020-08-17 14:14:49
    添加此样式: .layui-table-cell { font-size:14px; padding:0 5px; height:auto; overflow:visible; text-overflow:inherit; white-space:normal; word-break: break-all; }
  • 点击不要自定收缩 element.on('tab(focusTab)', function (data) { $(".layui-tab-bar").trigger(); setTimeout(function(){ $(".layui-tab-title").addClass('layui-tab-more'); }, 0); });
  • <td style="word-wrap:break-word;word-break:break-all;"></td>
  • layui table td 内容溢出自动换行

    千次阅读 2019-11-05 09:35:39
    layui table td 内容自动换行 td随着内容自动适应宽度 <td style="word-wrap:break-word;word-break:break-all;"></td>
  • 问题:表格内容增加了自动换行功能,当行高发生改变时发现右侧固定列行高不匹配。 原因:layui用定位把固定列定位在了右边,这样就会产生一个新的table,在继承高度的时候发生了错乱 解决思路:当拖动列宽的时候循环...
  • layui中table表格内容过多自动换行

    千次阅读 2020-05-13 10:41:40
    改样式前效果:超出内容没有自动换行,超出部分需要自动换行。 将以下css样式覆盖到当前html文件的头部样式中即可: <style> .layui-table-cell { font-size:14px; padding:0 5px; height:auto; ...
  • layui数据表格换行,错位

    千次阅读 2019-09-03 23:20:56
    .layui-table-cell { height: inherit; } 给回调了加入下面代码 done: function(data, count){ //如果是异步请求数据方式,res即为你接口返回的信息。 //如果是直接赋值的方式,res即为:{data: [], count:...
  • layui表格默认的是多出的内容省略,但是会涉及到重要的信息想全部显示出来,用下面的这个样式就可以 .layui-table .layui-table-cell{ height:auto; overflow:visible; text-overflow:inherit; white-space:...
  • 我使用Layui静态表格做东西,使用的layui表格是: 这个行边框表格 配上layui静态文件后直接粘贴代码就能使用 <table class="layui-table" lay-skin="line"> <colgroup> <col width="150">...
  • .layui-table-cell{ overflow:visible; text-overflow:inherit; white-space:normal; height: auto !important; word-break: break-all; }
  • 1.在layui-form的样式中加上:white-space:nowrap!important; 2.在字数多的label添加样式:padding-left: xxx px 大小按实际情况设置
  • .layui-table-cell{ display:table-cell; vertical-align: middle; height:auto; overflow:visible; text-overflow:inherit; white-space:normal; }
  • Layui table中的文字超出宽度自动换行

    千次阅读 2019-12-19 17:42:01
    只需更改layui的默认的样式即可: .layui-fluid .layui-table-cell { line-height: 20px; padding: 5px 5px ; position: relative; box-sizing: border-box; text-align: center; overflow: visible; ...
  • layui table 填写数据内容过多,自动换行完美解决

    万次阅读 热门讨论 2019-06-06 09:50:10
    .layui-table-cell { font-size:14px; padding:0 5px; height:auto; overflow:visible; text-overflow:inherit; white-space:normal; word-break: break-all; }

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 323
精华内容 129
关键字:

layui自动换行