layui遇到的一些问题

最新推荐文章于 2025-04-15 14:54:45 发布

琪公子呀

最新推荐文章于 2025-04-15 14:54:45 发布

阅读量1.7k

点赞数 27

分类专栏： layui 文章标签： layui 前端 javascript html 前端框架

本文链接：https://blog.csdn.net/Benxiaohai_311/article/details/124426302

版权

@[toc]

1、layui nav 菜单栏默认收缩

默认收缩的是li上的class 去掉 layui-nav-itemed。就可以了。我一直再找的是ul标签上的。

<div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <!-- 下面的li元素的class加上 layui-nav-itemed 就可以展开二级菜单 -->
                    <li class="layui-nav-item">
                        <a href="javascript:;">主动安全管理</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="javascript:;" class="leftdaohang" data-url="ADAS" mytitle="高级辅助驾驶(ADAS)">高级辅助驾驶(ADAS)</a>
							</dd>
							<dd>
								<a href="javascript:;" class="leftdaohang" data-url="BSD" mytitle="驾驶远监测(BSD)">驾驶远监测(BSD)</a>
							</dd>
							<dd>
								<a href="javascript:;" class="leftdaohang" data-url="DSM" mytitle="盲区检测(DSM)">盲区检测(DSM)</a>
							</dd>
                            <dd>
								<a href="javascript:;" class="leftdaohang" data-url="SDA" mytitle="激烈驾驶行为(SDA)">激烈驾驶行为(SDA)</a>
							</dd>
                            <dd>
								<a href="javascript:;" class="leftdaohang" data-url="UploadConfig" mytitle="附件上传策略配置">附件上传策略配置</a>
							</dd>
						</dl>
                    </li>
                    
                    <li class="layui-nav-item leftdaohang" data-url="online" mytitle="上下线统计"><a>上下线统计</a></li>
                    <li class="layui-nav-item leftdaohang" data-url="alarm" mytitle="警报统计"><a>警报统计</a></li>
                </ul>
            </div>
        </div>

2、layui 数据表格单元格颜色设置

{ field: 'attachmentInfo', title: languageTL.count.alarmData[0],align: 'center', event: 'setOnline',
        templet:function(d){
            if (!d.attachmentInfo.uploadedNumber) {
                return '<ul class="dataRow" style="color: rgba(50,130,216,1); text-decoration: underline; cursor: pointer;">0/' + d.attachmentInfo.number + '</ul>';
            } else {
                return '<ul class="dataRow" style="color: rgba(50,130,216,1); text-decoration: underline; cursor: pointer;">' + d.attachmentInfo.uploadedNumber+ '/' +d.attachmentInfo.number + '</ul>';
            }
        }
    },

附件信息那一栏有变化了，可以根据class="dataRow"改变颜色

3、layui表格没有数据的时候，表头没有横向滚动条

table的配置文件增加回调函数
done: function (res, curr, count) {
fixedLayuiTable(this,count);
}

layui.use(['table'], function () {
    tableView = layui.table;
    tableView.render({
        elem: '#tabView',
        data: listData,
        height: '520',
        cellMinWidth: 80,
        cols: [colsList],
        page: true, //是否显示分页
        limits: [10, 100, 1000, 2000],
        page: {
            count: listData.length,
            prev: '上一页',
            next: '下一页',
            layout: ['prev', 'page', 'next', 'count']
        },
        done: function (res, curr, count) {
            fixedLayuiTable(this, count);
        }
    });

});       




/**
* 解决table在没有数据的时候,因表格列宽度超出了浏览器的宽度，导致没有横向滚动条
* 使用：在table的参数中添加回调函数done: function (res, curr, count) {fixedLayuiTable(this,count);}
* @param {object} tableobj
* @param {numb