ホームページ >ウェブフロントエンド >ライユイのチュートリアル >レイウイテーブルのヘッダーを修正する方法
layui フロー ロードを使用して、CSS はテーブル ヘッダーを修正する方法を解決し、テーブル ヘッダーとテーブル コンテンツ間の不整合の問題を解決します。
HTML コード:
<table class="layui-table"> <thead class="top-head"> <tr> @for(var item in zkColumnDescs){ @if(item.field != 'equipId'){ <th class="thead-tr-width">${item.title}</th> <input type="hidden" value="${item.field}"/> @} @} </tr> </thead> <tbody id="LAY_demo1"> </tbody> </table>
js コード:
layui.use('flow', function () { var flow = layui.flow; flow.load({ elem: '#LAY_demo1' //流加载容器 , scrollElem: '#LAY_demo1' //滚动条所在元素,一般不用填,此处只是演示需要。 , done: function (page, next) { //执行下一页的回调 var fields = []; $.each($("input[type='hidden']"), function (i, o) { fields.push($(o).val()); }); var lis = []; $.ajax({ type: 'POST', url: '${ctxPath}/zkEquipment/zkEquipmentReadingMode/' + page, success: function (res) { $.each(res.data, function (index, item) { var lisTr = []; for (var i = 0; i < fields.length; i++) { lisTr.push('<td>' + item[fields[i]] + '</td>'); } var lisTd = lisTr.join(''); if (index + 1 == res.data.length) { lis.push('<tr style="background-color: #1E9FFF">' + lisTd + '</tr>'); } else { lis.push('<tr>' + lisTd + '</tr>'); } }); next(lis.join(''), page < res.pages); //解决th与td宽度不一致问题 var thArr = $("th"); var tdArr = $("tr").eq(1).find("td"); for (var i = 0; i < thArr.length; i++) { $(thArr[i]).attr("width", $(tdArr[i]).outerWidth()); } //设置高度 $("tbody").height($("body").height()); } }); } }); });
css コード:
//控制表格滑动 table tbody { display: block; overflow-y: scroll; } //固定表头 table thead, tbody tr { display: table; width: 100%; table-layout: fixed; } //调节表头宽度 table thead { width: calc(100% - 1em) }
以上がレイウイテーブルのヘッダーを修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。