layui table 自定义表头

自定义表头-查询

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);});});}});