@[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 {number} count
* @param {boolean} 是否分页
*/
function fixedLayuiTable(tableobj,count,ifpage) {
if (count == 0) {
tableobj.elem.next('.layui-table-view').find('.layui-table-header').css('display', 'inline-block');
var tableBox =tableobj.elem.next('.layui-table-view').find('.layui-table-box');
tableBox.css('overflow-x', 'auto');
//改变高度：table没有分页高度减15，否则增加25
if (!ifpage) {
tableBox.height(tableBox.height() - 15);
} else {
tableBox.height(tableBox.height() + 25);
}
}
}
4、layui layer.open 弹窗全屏显示
let index =layer.open({
type: 2,
area: ['100%', '100%'], // 100%全屏
shadeClose: true,
shade: 0.4,
title: '', // 标题留空让弹窗页头隐藏掉
closeBtn: 0, // 不显示右上角那个X关闭按钮
content: url // 内容
});
layer.full(index);5、layui表格通过点击tr改变这一行的颜色
$("body").on('click','.layui-table-body tr ',function () {
console.log(this);
var data_index=$(this).attr('data-index');//得到当前的tr的index
console.log($(this).attr('data-index'));
$(".layui-table-body tr").attr({"style":"background:#FFFFFF"});//其他tr恢复颜色
$(".layui-table-body tr[data-index="+data_index+"]").attr({"style":"background:#99ff99"});//改变当前tr颜色
});六、 layer.open弹框弹出后父页面滚动问题
layer.open({
type: 1,
area: ['680px', 'auto'],
scrollbar: false,
zIndex: 50,
shade: 0.2,
shadeClose: true,
title: '标题',
content: '内容'
});设置scrollbar为false，弹框弹出时，父页面不能滚动但会回到页面顶部；scrollbar默认为true，父页面能滚动但不会回到页面顶部。
暂时没有找到能够解决的办法，不知道为什么layui官网上的在线调试没有受到scrollbar的影响都不会回到顶部，望高人指点
七、LayUI下拉框中取值和获取属性方法
获取下拉框选中的值
var configId = $("#labelSelect").find(“option:selected”).val();
var optionId = $("#optionSelect").find(“option:selected”).val();清空下拉框
$("#labelSelect").find(“option:selected”).val("");
$("#optionSelect").find(“option:selected”).val("");
form.render(‘select’);给下拉框添加值
$("#optionSelect").append(‘全部’);获取下拉框选中的option的属性
var labeltype = $("#ID").find(“option:selected”).attr(“属性名”);
LayUI下拉框中取值和获取属性方法_晓未苏的博客-CSDN博客_layui 下拉框取值
八、LayUI 获取下拉框的选中的值
LayUi的界面的确是很好看，但是想要结合Jquery达到某种效果时，有点头痛。比如下拉框
这种下拉框的确美观，但是看看它生成的HTML代码呢。
我们自己写的html的selec空间被隐藏了，变成了下面的这种html代码了
这怎么获取下拉框选中的值呢？看重点来了：
form.on('select(category)', function (data) {
console.log(data.value);
});九、layer alert时 点击其他地方会关闭
实现是否启用的弹框, 实现了点击其他地方弹框不关闭
function editSuccess(){
layer.confirm('修改成功', { btn : [ '确定'],title: '操作提示',icon: 0
}, function(index) {
layer.close(index);
});
}
十、Layui表格点击行选中复选框，点击行选择复选框
// 表格点击行自动选中 ==========================================================================
$(document).on("click",".layui-table-body table.layui-table tbody tr", function (e) {
var index = $(this).attr('data-index');
var tableBox = $(this).parents('.layui-table-box');
//存在固定列
if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
} else {
tableDiv = tableBox.find(".layui-table-body.layui-table-main");
}
var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
if (checkCell.length > 0) {
checkCell.click();
}
});
// 表格点击行出发复选框后，阻止向上冒泡===============================================================
$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
e.stopPropagation();
});第二种方法
table.on('row(tabView)', function (obj) {
//用obj.tr.eq(0)不行，有2行
var cbox = obj.tr.find('.layui-form-checkbox'), rowindex = obj.tr.eq(0).data("index");
console.log(cbox)
console.log(obj)
if (cbox.hasClass('layui-form-checked')) {
cbox.removeClass("layui-form-checked");
}
else {
cbox.addClass("layui-form-checked");
}
window._selectRole = { RoleID: obj.data.RoleID, RoleName: obj.data.RoleName };
});摘自文章：layui table 单击行选中复选框_闪耀星星的博客-CSDN博客_layui table复选框被选中事件
十一、layui表格 获取选中数据 多选框勾选数量
var list= layui.table.checkStatus('gridid').data;十二、layui的从一个选项卡跳到另一个选项卡
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li lay-id=1 class="layui-this">帧率信息</li>
<li lay-id=2>GOP信息</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<h1>第一个选项卡</h1>
</div>
<div class="layui-tab-item">
<h1>第二个选项卡</h1>
</div>
</div>
</div>最主要的就是
- lay-filter="docDemoTabBrief"
- lay-id=1 （跳转的序号）
layui.use('element', function () {
let element = layui.element;
element.tabChange('docDemoTabBrief', 2);
});十三、layui表格的合并行处理
layui.use('table', function () {
table = layui.table;
table.render({
elem: '#videoTable',
data: videoData,
height: '410',
width: '100%',
defaultToolbar: [],
cellMinWidth: 100,
cols: [colsListFalse],
page: true, //是否显示分页
limits: [10, 100, 1000, 2000],
page: {
count: videoData.length,
prev: '上一页',
next: '下一页',
layout: ['prev', 'page', 'next', 'count']
},
done: function (res, curr, count) {
mergeRows(res)
}
});
});
// 这里是从别人那里拷贝来的代码
function mergeRows(res) {
var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
// var columsName = ['deviceId', 'ypRL', 'ypLoading', 's1RL', 's1Loading', 's2RL', 's2Loading'];//需要合并的列名称
var columsName = ['deviceId'];//需要合并的列名称
// var columsIndex = [0, 2, 3, 7, 8, 12, 13];//需要合并的列索引值
var columsIndex = [0];//需要合并的列索引值
for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
var trArr = $('div[lay-id="videoTable"] .layui-table-body>.layui-table').find("tr");//所有行，如果页面多个表格，这里一定要定位到你所要合并的表格
for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
mark += 1;
tdPreArr.each(function () {//相同列的第一列增加rowspan属性
$(this).attr("rowspan", mark);
});
tdCurArr.each(function () {//当前行隐藏
$(this).css("display", "none");
});
} else {
mergeIndex = i;
mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
}
}
mergeIndex = 0;
mark = 1;
}
}
十四、layUI:table表格的单击事件，双击事件，获取所在行的数据
table.render({
done: function(res, curr, count){
$('#tableId').next().find('.layui-table-body').find("table" ).find("tbody").children("tr").on('dblclick',function(){
var id = JSON.stringify($('#tableId').next().find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
var obj = res.data[id];
console.log("行双击事件");
});
$('#tableId').next().find('.layui-table-body').find("table" ).find("tbody").children("tr").on('click',function(){
var id = JSON.stringify($('#tableId').next().find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
var obj = res.data[id];
console.log("行单击事件");
});
}
});十五、layui数据表格中根据条件展示/隐藏toolbar中的按钮
<script>
layui.use('laytpl', function(){
var laytpl = layui.laytpl;
)}
</script>
<script type="text/html" id="current_table_bar">
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
@{{# if(d.pid == 0){ }}
<a class="layui-btn layui-btn-normal layui-btn-xs dispatch-clerk" lay-event="dispatch">添加</a>
@{{# } }}
</script>对象 d 就是数据表格中接手回调数据的data
十六、layui按钮button的js设置disabled
设置disabled
$('#butid').addClass("layui-btn-disabled").attr("disabled",true);恢复可点击
$('#butid').removeClass("layui-btn-disabled").attr("disabled",false);
十七、table.cache[‘‘]获取表格当前页的所有行数据
layui.table.cache['tablename'] 获取所有数据。
十八、layui 框架的 select 获取选中的值、选中的文本、选中的索引，禁用、启用、动态选中
<div class="layui-form-item ">
<label class="layui-form-label">测试Demo</label>
<div class="layui-input-block ">
<select id="demo" lay-verify="" lay-filter="selctOnchange"
name="demo">
<option data-idx="" value="">请选择</option>
<option data-idx="5" value="5">测试5</option>
</select>
</div>
</div>
//监听select
form.on('select(selctOnchange)', function (data) {
var e = data.elem;
//获取选中的值
console.log(data.value)
//获取选中的文本
var text =e[e.selectedIndex].text;
console.log(text)
//获取选中的索引
var index = e.selectedIndex;
console.log(index)
//获取自定义属性
var data-idx = e[e.selectedIndex].dataset.idx;
console.log(data-idx)
})禁用 select
//禁用select
$("#demo").attr("disabled","disabled");
form.render('select');禁用 select
$("#demo").removeAttr("disabled");
form.render('select');动态选中
// 当前的select的id，选中测试2
$('#demo').val(2);
form.render('select');
$("#demo").val(3); //设置select默认显示的值
$("#demo option:selected").val(); //获取当前选中的value，注意非文本值
2103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
