目录
- 一、layui nav 菜单栏默认收缩
- 二、layui 数据表格 单元格 颜色设置
- 三、layui表格没有数据的时候，表头没有横向滚动条
- 四、layui layer.open 弹窗全屏显示
- 五、layui表格通过点击tr改变这一行的颜色
- 六、 layer.open弹框弹出后父页面滚动问题
- 七、LayUI下拉框中取值和获取属性方法
- 八、LayUI 获取下拉框的选中的值
- 九、layer alert时 点击其他地方会关闭
- 十、Layui表格点击行选中复选框，点击行选择复选框
- 十一、layui表格 获取选中数据 多选框勾选数量
- 十二、layui的从一个选项卡跳到另一个选项卡
- 十三、layui表格的合并行处理
- 十四、[layUI:table表格的单击事件，双击事件，获取所在行的数据](https://www.cnblogs.com/DDDKC/p/15716193.html)
- 十五、layui数据表格中根据条件展示/隐藏toolbar中的按钮
- 十六、layui按钮button的js设置disabled
- 十七、table.cache[‘‘]获取表格当前页的所有行数据
- 十八、layui中根据条件判断使table单元格变色
- 十九、Layui table中筛选列增加 [全选，反选] 功能
- 二十、[layui穿梭框右侧增加上移下移功能](https://www.freesion.com/article/9804310203/)
- 二十一、[Layui中如何在table中筛选列增加 [全选，反选] 功](https://blog.csdn.net/qq_33966519/article/details/103617778)
一、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>
二、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"改变颜色
三、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);
}
}
}
四、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);
五、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弹框弹出后父页面滚动问题.
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 获取下拉框的选中的值
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();
});
Layui表格点击行选中复选框，点击行选择复选框
第二种方法
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 单击行选中复选框
十一、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>
最主要的就是
1.lay-filter=“docDemoTabBrief”
2.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>
十六、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中根据条件判断使table单元格变色
done:function (res,curr,count) {
var that = this.elem.next();
var preliminaryDayList = res.data; // 拿到后台给的数据
preliminaryDayList.forEach(function (item,index) { // 循环取后台给的条件的值
if (item.isPreliminaryDay == true) {
that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#FA8072"); // 行变色
}
});
}
十九、Layui table中筛选列增加 [全选，反选] 功能
table.on('toolbar()', function (obj) {
var config = obj.config;
var btnElem = $(this);
var tableId = config.id;
var tableView = config.elem.next();
switch (obj.event) {
case 'LAYTABLE_COLS':
// 给筛选列添加全选还有反选的功能
var panelElem = btnElem.find('.layui-table-tool-panel');
var checkboxElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]');
var checkboxCheckedElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]:checked');
$('<li class="layui-form" lay-filter="LAY_TABLE_TOOL_COLS_FORM">' +
'<input type="checkbox" lay-skin="primary" lay-filter="LAY_TABLE_TOOL_COLS_ALL" '
+ ((checkboxElem.length === checkboxCheckedElem.length) ? 'checked' : '') + ' title="全选">' +
'<span class="LAY_TABLE_TOOL_COLS_Invert_Selection">反选</span></li>')
.insertBefore(panelElem.find('li').first())
.on('click', '.LAY_TABLE_TOOL_COLS_Invert_Selection', function (event) {
layui.stope(event);
// 反选逻辑
panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]+').click();
});
form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
break;
}
});
// 监听筛选列panel中的全选
form.on('checkbox(LAY_TABLE_TOOL_COLS_ALL)', function (obj) {
$(obj.elem).closest('ul')
.find('[lay-filter="LAY_TABLE_TOOL_COLS"]' + (obj.elem.checked ? ':not(:checked)' : ':checked') + '+').click();
});
// 监听筛选列panel中的单个记录的change
$(document).on('change', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]', function (event) {
var elemCurr = $(this);
// 筛选列单个点击的时候同步全选的状态
$('input[lay-filter="LAY_TABLE_TOOL_COLS_ALL"]')
.prop('checked',
elemCurr.prop('checked') ? (!$('input[lay-filter="LAY_TABLE_TOOL_COLS"]').not(':checked').length) : false);
form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
});
二十、layui穿梭框右侧增加上移下移功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="js/layui-v2.5.6/layui/css/layui.css">
<style>
.layuiTransformBtns{
/*border:1px solid red;*/
display: inline-block;
position: absolute;
z-index: 19999;
top:26%;
left:16%
}
</style>
<script src="js/jquery.min.1-11-3.js"></script>
<script src="js/layui-v2.5.6/layui/layui.js"></script>
</head>
<body>
<div id="usingGrid" style="position:relative;">
<div class="layuiTransformBtns" style="">
<button type="button" data-direction="up" class="layui-btn layui-btn-sm videoMoveBtn" style="margin-bottom: 95px;"><i class="layui-icon layui-icon-up"></i></button><br>
<button type="button" data-direction="down" id="moveDown" class="layui-btn layui-btn-sm videoMoveBtn"><i class="layui-icon layui-icon-down"></i></button>
</div>
<div id="test3" class="demo-transfer"></div>
<button type="button" id="getRightData" class="layui-btn layui-btn-sm">取数据</button>
<div class="layui-form-mid layui-word-aux">数据显示在控制台</div>
</div>
<script>
$(function(){
layui.use(['transfer', 'layer', 'util'], function(){
var $ = layui.$
,transfer = layui.transfer
,layer = layui.layer
data2 = [
{"value": "1", "title": "瓦罐汤"}
,{"value": "2", "title": "油酥饼"}
,{"value": "3", "title": "炸酱面"}
,{"value": "4", "title": "串串香"}
,{"value": "5", "title": "豆腐脑"}
,{"value": "6", "title": "驴打滚"}
,{"value": "7", "title": "北京烤鸭"}
,{"value": "8", "title": "烤冷面"}
,{"value": "9", "title": "毛血旺"}
,{"value": "10", "title": "肉夹馍"}
,{"value": "11", "title": "臊子面"}
,{"value": "12", "title": "凉皮"}
,{"value": "13", "title": "羊肉泡馍"}
,{"value": "14", "title": "冰糖葫芦"}
,{"value": "15", "title": "狼牙土豆"}
]
//初始右侧数据
transfer.render({
elem: '#test3'
,data: data2
,value: ["1", "3", "5", "7", "9", "11"]
,id: 'demo1' //定义索引
})
// 当前元素在父元素的位置
$('#getRightData').click(function () {
//获得右侧数据
var getData = transfer.getData('demo1');
console.log(getData);
})
$('.videoMoveBtn').click(function () {
transfornMove({
elem:'#usingGrid',
direction:$(this).data('direction')
})
})
//layui穿梭框上移、下移功能
function transfornMove(option) {
// debugger
//右侧穿梭框
var rightTransforn=$($(option.elem+ " ul")[1])
// 穿梭框选中的元素
var checkItem=rightTransforn.find('.layui-form-checked').parent()
// 穿梭框右侧下面部分
var rightTransBottom=rightTransforn.children()
// 第一个元素的下标
var checkOneIndex=rightTransBottom.index(option.direction=='down'?checkItem[checkItem.length-1]:checkItem[0])
// 右侧有几条数据
var rightDataLength=rightTransBottom.length
console.log('右侧共有' , rightDataLength , '条数据');
console.log('当前选择的元素',checkItem);
console.log('第一个元素的下标',checkOneIndex);
console.log('当前元素在父元素的位置',rightTransBottom.index(checkItem));
if(!checkItem.length){
layer.msg("请选择数据后再操作");
return;
}
// 上移时，取第一个元素在父元素的位置，如果在第一位就不再移动
if(checkOneIndex==(option.direction=='down'?rightDataLength-1:0)){
layer.msg("移不动啦");
return;
}
if(option.direction=='down'){
for(var i=checkItem.length;i>=0;i--){
checkItem.eq(i).next().after(checkItem.eq(i));
}
}else{
for(var i=0;i<checkItem.length;i++){
checkItem.eq(i).prev().before(checkItem.eq(i));
}
}
}
})
})
</script>
</body>
</html>
二十一、Layui中如何在table中筛选列增加 [全选，反选] 功
table.on('toolbar()', function (obj) {
var config = obj.config;
var btnElem = $(this);
var tableId = config.id;
var tableView = config.elem.next();
switch (obj.event) {
case 'LAYTABLE_COLS':
// 给筛选列添加全选还有反选的功能
var panelElem = btnElem.find('.layui-table-tool-panel');
var checkboxElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]');
var checkboxCheckedElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]:checked');
$('<li class="layui-form" lay-filter="LAY_TABLE_TOOL_COLS_FORM">' +
'<input type="checkbox" lay-skin="primary" lay-filter="LAY_TABLE_TOOL_COLS_ALL" '
+ ((checkboxElem.length === checkboxCheckedElem.length) ? 'checked' : '') + ' title="全选">' +
'<span class="LAY_TABLE_TOOL_COLS_Invert_Selection">反选</span></li>')
.insertBefore(panelElem.find('li').first())
.on('click', '.LAY_TABLE_TOOL_COLS_Invert_Selection', function (event) {
layui.stope(event);
// 反选逻辑
panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]+').click();
});
form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
break;
}
});
// 监听筛选列panel中的全选
form.on('checkbox(LAY_TABLE_TOOL_COLS_ALL)', function (obj) {
$(obj.elem).closest('ul')
.find('[lay-filter="LAY_TABLE_TOOL_COLS"]' + (obj.elem.checked ? ':not(:checked)' : ':checked') + '+').click();
});
// 监听筛选列panel中的单个记录的change
$(document).on('change', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]', function (event) {
var elemCurr = $(this);
// 筛选列单个点击的时候同步全选的状态
$('input[lay-filter="LAY_TABLE_TOOL_COLS_ALL"]')
.prop('checked',
elemCurr.prop('checked') ? (!$('input[lay-filter="LAY_TABLE_TOOL_COLS"]').not(':checked').length) : false);
form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
});
![为什么 Go 不支持 []T 转换为 []interface](https://img-blog.csdnimg.cn/img_convert/53fc9d125f199fe3ddd1cf862fce5cd0.png)
