自定义表头-查询
js/css静态文件引用
<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
html
<script type="text/html" id="sex">
{{# if(d.sex == 10){ }}
男
{{# }else if(d.sex == 20) { }}
女
{{# }else{ }}
未知
{{# } }}
</script>
<table class="layui-hide" id="tableDemo"></table>
javascript
<script>
layui.use(function () {
var filters = {}; // 保存每个输入框的值
var form = layui.form;
var table = layui.table;
var laydate = layui.laydate;
var dropdown = layui.dropdown;
table.render({
elem: '#tableDemo',
method: "post",
//url: '', //如果要访问后台,改成你的api地址即可
//where: { p1: p1, p2: p2, p3: p3},//切换成你的请求实体对象
cols: [[
{ field: 'id', title: 'ID', width: 80, sort: true, fixed: true },
{ field: 'username', title: '用户', width: 120, fixed: true },
{ field: 'sign', title: '签名', width: 160 },
{ field: 'sex', title: '性别', width: 80, templet: '#sex' },
{ field: 'city', title: '城市', width: 100 },
{ field: 'experience', title: '积分', width: 80, sort: true }
]],
data: [{ // 赋值已知数据
"id": "10001",
"username": "张三1",
"sex": "10",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "116"
}, {
"id": "10002",
"username": "张三2",
"sex": "",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "12",
}, {
"id": "10003",
"username": "张三3",
"sex": "10",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "65"
}, {
"id": "10004",
"username": "张三4",
"sex": "20",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "777"
}, {
"id": "10005",
"username": "张三5",
"sex": "20",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "86"
}, {
"id": "10006",
"username": "张三6",
"sex": "10",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "12"
}, {
"id": "10007",
"username": "张三7",
"sex": "20",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "16"
}, {
"id": "10008",
"username": "张三8",
"sex": "10",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "106"
}],
scrollX: true, // 启用横向滚动
fixed: true,
page: false,
done: function (res, curr, count) {
loadCustomSearch(res);
}
});
///初始化查询条件
function loadCustomSearch(response) {
//这个务必保留 由于使用了flexd layui原理是两个相同的,所以如果不加这个,flexd的列会出现错行
var fixedHeader = document.querySelectorAll('.layui-table-fixed thead th');
fixedHeader.forEach(function (item, index) {
var width = item.offsetWidth - 2 + 'px';
if (item.querySelector('input') === null) {
//用户
if (index == 1) {
generateSearchByText("", width, "username", item);
}
//签名
if (index == 2) {
generateSearchByText("", width, "sign", item);
}
}
});
var th = document.querySelectorAll('thead th');
th.forEach(function (item, index) {
var width = item.offsetWidth - 2 + 'px';
if (item.querySelector('input') === null) {
//用户
if (index == 1) {
generateSearchByText("", width, "username", item);
}
//签名
if (index == 2) {
generateSearchByText("", width, "sign", item);
}
// if (index == 4) {
// generateSearchByDateRange("", "98px", "Create_Date", "Create_DateStart", "Create_DateEnd", item, "date");
// }
}
if (item.querySelector('select') === null) {
//性别
if (index == 3) {
generateSearchBySelect("", width, "sex", item, 0);
}
}
});
// 重新计算布局
table.resize('tableDemo');
}
///生成文本框的查询条件
function generateSearchByText(placeHolder, width, name, item) {
var input = document.createElement('input');
input.name = name;
input.type = 'text';
input.placeholder = placeHolder;
input.style.width = width;
input.style.fontWeight = "normal";
// 如果之前保存了该列的输入内容，填充到输入框中
if (filters[name]) {
input.value = filters[name];
}
item.appendChild(input);
// 绑定事件
input.addEventListener('change', function (e) {
var searchValue = e.target.value;
// 保存当前输入框的值
filters[name] = searchValue;
searchChange();
});
}
///生成时间区间查询条件
function generateSearchByDateRange(placeHolder, width, dvName, startName, endName, item, type) {
let newWidth = width - 6;
// 创建时间区间控件的容器
var container = document.createElement('div');
container.id = dvName;
container.style.display = 'flex';
container.style.alignItems = 'center';
// 创建开始日期输入框
var startInput = document.createElement('input');
startInput.id = startName;
startInput.placeholder = '开始日期';
startInput.style.width = width;
startInput.style.fontWeight = "normal";
// 创建结束日期输入框
var endInput = document.createElement('input');
endInput.id = endName;
endInput.placeholder = '结束日期';
endInput.style.width = width;
endInput.style.fontWeight = "normal";
if (filters[startName]) {
startInput.value = filters[startName];
}
if (filters[endName]) {
endInput.value = filters[endName];
}
container.appendChild(startInput);
container.appendChild(document.createTextNode(' - ')); // 添加一个分隔符
container.appendChild(endInput);
item.appendChild(container);
// 使用 laydate.render 绑定时间区间控件
laydate.render({
elem: '#' + dvName,
type: type,
fullPanel: true, // 2.8+
range: ['#' + startName, '#' + endName],
rangeLinked: true,
min: minDate,
max: maxDate,
done: function (value, date, endDate) {
// 确保值不为空且包含 " - "
if (value && value.includes(' - ')) {
var dates = value.split(' - '); // 分割成开始日期和结束日期
var startDate = dates[0]; // 获取开始日期
var endDate = dates[1]; // 获取结束日期
filters[startName] = startDate;
filters[endName] = endDate;
document.getElementById(startName).value = startDate;
document.getElementById(endName).value = endDate;
}
searchChange();
}
});
}
///生成下拉框的查询条件
function generateSearchBySelect(placeHolder, width, name, item, type) {
// 创建 select 下拉菜单
var select = document.createElement('select');
select.id = name;
select.name = name;
select.style.width = width;
select.style.display = "block";
select.style.fontWeight = "normal";
//禁用layui的select组件样式渲染
//不适用此属性的时候,页面会出现先展示layui的select,后展示原生的select组件
//此属性开启,则默认不适用layui的select样式
select.setAttribute('lay-ignore', true);
select.add(new Option("", ""));
select.add(new Option("男", "10"));
select.add(new Option("女", "20"));
if (filters[name]) {
select.value = filters[name];
}
item.appendChild(select);
$(select).on('change', function () {
var selectedValue = $(this).val();
// 保存当前输入框的值
filters[name] = selectedValue;
searchChange();
});
}
//列头查询事件
function searchChange() {
table.reload('tableDemo', {
where: { // 添加查询条件
dto: sureEntity
},
page: false,
done: function (res, curr, count) {
loadCustomSearch(res);
}
});
}
});
</script>
表头弹tip信息
javascript
table.render({
elem: '#tableDemo',
method: "post",
//url: '', //如果要访问后台,改成你的api地址即可
//where: { p1: p1, p2: p2, p3: p3},//切换成你的请求实体对象
cols: [[
{ field: 'id', title: 'ID', width: 80, sort: true, fixed: true },
{ field: 'username', title: '用户', width: 120, fixed: true },
{ field: 'sign', title: '签名', width: 160 },
{ field: 'sex', title: '性别', width: 80, templet: '#sex' },
{ field: 'city', title: '城市', width: 100 },
{ field: 'experience', title: '积分', width: 80, sort: true }
]],
data: [{ // 赋值已知数据
"id": "10001",
"username": "张三1",
"sex": "10",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "116"
}, {
"id": "10002",
"username": "张三2",
"sex": "",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "12",
}, {
"id": "10003",
"username": "张三3",
"sex": "10",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "65"
}, {
"id": "10004",
"username": "张三4",
"sex": "20",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "777"
}, {
"id": "10005",
"username": "张三5",
"sex": "20",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "86"
}, {
"id": "10006",
"username": "张三6",
"sex": "10",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "12"
}, {
"id": "10007",
"username": "张三7",
"sex": "20",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "16"
}, {
"id": "10008",
"username": "张三8",
"sex": "10",
"city": "浙江杭州",
"sign": "人生恰似一场修行",
"experience": "106"
}],
scrollX: true, // 启用横向滚动
fixed: true,
page: false,
done: function (res, curr, count) {
var tipContent = "我是自定义Tip信息";
$('.layui-table tr').each(function (index, item) {
var nameCell = $(item).find('th').eq(1);
let nIndex;
nameCell.on('mouseenter', function () {
nIndex = layer.tips(tipContent, this, {
tips: [1, "#3A3D49"],
});
});
nameCell.on('mouseleave', function () {
layer.close(nIndex);
});
});
}
});
源码
yylcha.layui.7z
评论区