<div class="table-responsive">
时间: 2023-11-08 09:06:24 浏览: 79
This is an HTML code for a responsive table. It allows the table to adjust its size and layout according to the screen size of the device being used to view the page.
相关问题
在这个代码中再加一个类型,颜色和重量。<div class="container"> <div class="row"> <div class="col-md-12"> <div class="table-responsive"> <table class="table cart-table"> <thead> <tr> <th>商品</th> <th>单价</th> <th> 数 量 </th> <th>总价</th>
好的,可以根据您的需求在表格中再添加类型、颜色和重量等列。修改后的代码如下所示:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table cart-table">
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>类型</th>
<th>颜色</th>
<th>重量</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>10</td>
<td>2</td>
<td>类型1</td>
<td>红色</td>
<td>1kg</td>
<td>20</td>
</tr>
<tr>
<td>商品2</td>
<td>20</td>
<td>1</td>
<td>类型2</td>
<td>蓝色</td>
<td>500g</td>
<td>20</td>
</tr>
<tr>
<td>商品3</td>
<td>30</td>
<td>3</td>
<td>类型3</td>
<td>绿色</td>
<td>2kg</td>
<td>90</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
div class="table-responsive"> <table class="table table-hover table-bordered text-center"> 五列每列设置固定长度
<think>我们需要在表格中设置五列固定宽度。在Bootstrap中,我们可以使用列宽类(col-*)或者内联样式来实现。但是注意,直接在table上设置固定宽度可能不够灵活,通常我们会设置表头(th)的宽度,因为td的宽度会跟随th。
由于要求使用固定长度,我们可以使用内联样式(style="width: ...px;")或者定义CSS类。这里我们使用内联样式来精确控制每列的宽度。
假设五列需要设置的固定宽度分别为:100px, 150px, 200px, 100px, 150px(具体宽度可以根据需求调整)
修改后的表格结构如下:</think>以下是设置五列固定宽度的响应式表格代码:
```html
<div class="table-responsive">
<table class="table table-hover table-bordered text-center">
<colgroup>
<col style="width: 120px">
<col style="width: 150px">
<col style="width: 200px">
<col style="width: 180px">
<col style="width: 150px">
</colgroup>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
<th>标题5</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<!-- 更多行... -->
</tbody>
</table>
</div>
```
### 关键实现说明:
1. **列宽设置**:
- 使用`<colgroup>`和`<col>`标签为每列定义固定宽度
- 通过`style="width: ...px"`内联样式精确控制每列像素宽度
2. **响应式处理**:
- `table-responsive`类确保表格在小屏幕设备上可水平滚动
- 固定宽度总和不超过容器宽度(此处总和800px)
3. **替代方案**:
```css
/* CSS类方案(推荐) */
.fixed-col1 { width: 120px; min-width: 120px; }
.fixed-col2 { width: 150px; min-width: 150px; }
/* 应用类名 */
<th class="fixed-col1">标题1</th>
```
4. **注意事项**:
- 添加`table-layout: fixed`到表格样式可提升渲染性能
- 设置`min-width`防止内容溢出时破坏布局
- 总和宽度应小于父容器宽度(考虑边框和内边距)
### 完整CSS增强方案:
```css
.table-fixed {
table-layout: fixed;
}
.table-fixed td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```
阅读全文
相关推荐











<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="check_logstate.jsp"></jsp:include>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!doctype html>
<html lang="zh_CN">
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎使用后台管理系统</title>
<script type="text/javascript" src="asset/page/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="asset/page/js/bootstrap.min.js"></script>
</head>
<body>
学生请假列表
学生用户
宿舍
开始时间
结束时间
原因
状态
操作
<c:forEach items="${outList}" var="out">
${out.realname}
${out.roomsname}
${out.starttime}
${out.endtime}
${out.reason}
${out.stats}
<c:if test="${out.stats eq '待审批' }">
处理 </c:if>删除
</c:forEach>
${html }
</body>
</html>
学生用户不显示姓名






// 全局变量
let currentSort = { column: null, direction: 'asc' };
let currentPage = 1;
const pageSize = 10;
let filteredResults = [];
//监听来自父窗口的消息
window.addEventListener('message', function(event) {
if (event.source === window.parent && event.data === 'DataManagerReady') {
initializeDataManager();
}
});
// 初始化数据管理器
function initializeDataManager() {
const dataManager = window.parent.dataManager;
if (dataManager) {
// 注册数据刷新回调
dataManager.registerCallback('all', function(operation, entity, data) {
updatePageData(dataManager);
});
// 初始页面数据更新
updatePageData(dataManager);
// 设置搜索功能
setupSearch(dataManager);
// 设置排序功能
setupSorting();
// 设置分页事件
setupPagination();
} else {
console.error('DataManager not available');
}
}
// 更新页面数据
function updatePageData(dataManager) {
updateStats(dataManager);
updateTable(dataManager);
$('#lastUpdate').text(new Date().toLocaleTimeString());
}
// 更新统计卡片数据
function updateStats(dataManager) {
const data = dataManager.data;
$('#orderCount').text(data.dingdans?.length || 0);
$('#productCount').text(data.chanpins?.length || 0);
$('#materialCount').text(data.bancais?.length || 0);
const totalStock = data.kucuns?.reduce((sum, kucun) => sum + kucun.shuliang, 0) || 0;
$('#totalStock').text(totalStock);
}
// 更新结果表格
function updateTable(dataManager) {
const data = dataManager.data;
filteredResults = [];
// 处理订单产品数据
if (data.dingdan_chanpins) {
data.dingdan_chanpins.forEach(dc => {
if (!dc.dingdan || !dc.chanpin) return;
if (dc.chanpin.chanpin_zujians) {
dc.chanpin.chanpin_zujians.forEach(cz => {
if (!cz.zujian || !cz.bancai) return;
const bancai = cz.bancai;
const materialInfo = getMaterialInfo(bancai);
// 查找该板材的库存
const kucun = data.kucuns?.find(k => k.bancai?.id === bancai.id);
const stockQuantity = kucun ? kucun.shuliang : 0;
filteredResults.push({
orderNumber: dc.dingdan.number,
productInfo: dc.chanpin.bianhao,
productQuantity: dc.shuliang,
component: cz.zujian.name,
material: materialInfo,
materialPerComponent: cz.one_howmany,
materialOrderQuantity: dc.shuliang / cz.one_howmany,
stockQuantity: stockQuantity,
raw: {
orderNumber: dc.dingdan.number,
productQuantity: dc.shuliang,
materialPerComponent: cz.one_howmany,
materialOrderQuantity: dc.shuliang / cz.one_howmany,
stockQuantity: stockQuantity,
thickness: bancai.houdu || 0
},
bancaiId: bancai.id
});
});
}
});
}
// 处理订单板材数据 (Dingdan_bancai)
if (data.dingdan_bancais) {
data.dingdan_bancais.forEach(db => {
if (!db.dingdan || !db.bancai) return;
const bancai = db.bancai;
const materialInfo = getMaterialInfo(bancai);
// 查找该板材的库存
const kucun = data.kucuns?.find(k => k.bancai?.id === bancai.id);
const stockQuantity = kucun ? kucun.shuliang : 0;
// 确定产品信息
let productInfo = '独立订购';
if (db.chanpin) {
productInfo = db.chanpin.bianhao;
}
// 确定组件信息
let component = '独立板材';
if (db.zujian) {
component = db.zujian.name;
} else if (db.chanpin) {
component = '产品板材';
}
filteredResults.push({
orderNumber: db.dingdan.number,
productInfo: productInfo,
productQuantity: db.shuliang, // 直接订购的板材数量
component: component,
material: materialInfo,
materialPerComponent: 1, // 直接订购时,每件用量为1
materialOrderQuantity: db.shuliang,
stockQuantity: stockQuantity,
raw: {
orderNumber: db.dingdan.number,
productQuantity: db.shuliang,
materialPerComponent: 1,
materialOrderQuantity: db.shuliang,
stockQuantity: stockQuantity,
thickness: bancai.houdu || 0
},
bancaiId: bancai.id
});
});
}
// 应用排序
if (currentSort.column !== null) {
filteredResults = sortResults(filteredResults, currentSort.column, currentSort.direction);
}
// 渲染表格和分页
renderTable();
renderPagination();
}
// 渲染表格数据
function renderTable() {
const $tableBody = $('#resultBody');
$tableBody.empty();
const startIndex = (currentPage - 1) * pageSize;
const pageData = filteredResults.slice(startIndex, startIndex + pageSize);
if (pageData.length === 0) {
$('#noResults').show();
$('#paginationContainer').hide();
} else {
$('#noResults').hide();
$('#paginationContainer').show();
pageData.forEach(row => {
const $tr = $('');
$tr.append(${row.orderNumber} );
$tr.append(${row.productInfo} );
$tr.append(${row.productQuantity} );
$tr.append(${row.component} );
$tr.append(${row.material} );
$tr.append(${row.materialPerComponent} );
$tr.append(${row.materialOrderQuantity} );
$tr.append(${row.stockQuantity} );
$tr.append(<button class="btn btn-sm btn-outline-primary" onclick="showMaterialDetail(${row.bancaiId})">详情</button> );
$tableBody.append($tr);
});
}
$('#resultCount').text(filteredResults.length);
}
//设置排序功能
function setupSorting() {
// 为每个可排序表头添加点击事件
$('#resultsTable th[data-sortable]').each((index, header) => {
$(header).on('click', () => {
// 更新排序状态
if (currentSort.column === index) {
currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
} else {
currentSort.column = index;
currentSort.direction = 'asc';
}
// 更新UI指示器
updateSortIndicators();
// 重新排序和渲染表格
filteredResults = sortResults(filteredResults, currentSort.column, currentSort.direction);
renderTable();
renderPagination();
});
});
}
//排序函数
function sortResults(results, columnIndex, direction) {
return results.sort((a, b) => {
// 根据列索引确定排序字段
let field;
switch(columnIndex) {
case 0: field = 'orderNumber'; break;
case 1: field = 'productInfo'; break;
case 2: field = 'productQuantity'; break;
case 3: field = 'component'; break;
case 4: return sortByThickness(a, b, direction); // 特殊处理:按厚度排序
case 5: field = 'materialPerComponent'; break;
case 6: field = 'materialOrderQuantity'; break;
case 7: field = 'stockQuantity'; break;
default: return 0;
}
// 数值排序
if (['productQuantity', 'materialPerComponent', 'materialOrderQuantity', 'stockQuantity'].includes(field)) {
return sortNumeric(a.raw[field], b.raw[field], direction);
}
// 字符串排序
return sortString(a[field], b[field], direction);
});
}
//按厚度排序(特殊处理)
function sortByThickness(a, b, direction) {
return sortNumeric(a.raw.thickness, b.raw.thickness, direction);
}
//数值排序辅助函数
function sortNumeric(aVal, bVal, direction) {
const aNum = parseFloat(aVal) || 0;
const bNum = parseFloat(bVal) || 0;
return direction === 'asc' ? aNum - bNum : bNum - aNum;
}
//字符串排序辅助函数
function sortString(aVal, bVal, direction) {
const aStr = String(aVal).toLowerCase();
const bStr = String(bVal).toLowerCase();
if (aStr < bStr) return direction === 'asc' ? -1 : 1;
if (aStr > bStr) return direction === 'asc' ? 1 : -1;
return 0;
}
//更新排序指示器UI
function updateSortIndicators() {
// 清除所有指示器
$('#resultsTable th[data-sortable] .sort-indicator').text('');
// 为当前排序列添加指示器
if (currentSort.column !== null) {
const $currentHeader = $(#resultsTable th[data-sortable]:eq(${currentSort.column}));
$currentHeader.find('.sort-indicator').text(currentSort.direction === 'asc' ? '↑' : '↓');
}
}
// 获取板材详细信息函数
function getMaterialInfo(bancai) {
if (!bancai) return '未知板材';
// 获取材质名称
const caizhiName = bancai.caizhi?.name || '未知材质';
// 获取木皮信息
const formatMupi = (mupi) => {
if (!mupi) return null;
return ${mupi.name}${mupi.you ? '(油)' : ''};
};
const mupi1Str = formatMupi(bancai.mupi1) || '无';
const mupi2Str = formatMupi(bancai.mupi2) || '无';
const mupiInfo = mupi1Str + (mupi2Str !== '无' ? /${mupi2Str} : '');
// 厚度转换为字符串
const thickness = bancai.houdu ? ${bancai.houdu.toFixed(1)}mm : '未知厚度';
return ${caizhiName}-${mupiInfo} (${thickness});
}
// 设置搜索功能
function setupSearch(dataManager) {
// 订单搜索
$('#orderSearch').on('input', function() {
filterTable($(this).val().toLowerCase(), 0);
});
// 产品搜索
$('#productSearch').on('input', function() {
filterTable($(this).val().toLowerCase(), 1);
});
// 板材材质搜索
$('#materialSearch').on('input', function() {
filterTable($(this).val().toLowerCase(), 4);
});
// 木皮搜索
$('#woodSearch').on('input', function() {
const searchTerm = $(this).val().toLowerCase();
// 支持中文和数字搜索
const searchKeywords = {
'有油': '有油', '无油': '无油',
'you': '有油', 'wu': '无油',
'1': '有油', '0': '无油',
'(油)': '(油)'
};
const actualTerm = searchKeywords[searchTerm] || searchTerm;
filterTable(actualTerm, 4);
});
// 厚度搜索
$('#thicknessSearch').on('input', function() {
filterTable($(this).val().toLowerCase(), 4);
});
// 库存状态搜索
$('#stockStatusBtn').on('click', function() {
const minStock = parseInt($('#minStock').val()) || 0;
const maxStock = parseInt($('#maxStock').val()) || Number.MAX_SAFE_INTEGER;
filterByStock(minStock, maxStock);
});
// 重置搜索
$('#resetSearch').on('click', function() {
$('.search-input').val('');
currentPage = 1;
updateTable(window.parent.dataManager);
});
}
// 设置分页功能
function setupPagination() {
// 分页按钮事件委托
$('#paginationContainer').on('click', '.page-link', function(e) {
e.preventDefault();
const action = $(this).data('action');
if (action === 'prev' && currentPage > 1) {
currentPage--;
} else if (action === 'next' && currentPage < Math.ceil(filteredResults.length / pageSize)) {
currentPage++;
} else if (action === 'page') {
currentPage = parseInt($(this).data('page'));
}
renderTable();
renderPagination();
});
}
// 渲染分页控件
function renderPagination() {
const $pagination = $('#pagination');
$pagination.empty();
const totalPages = Math.ceil(filteredResults.length / pageSize);
if (totalPages <= 1) return;
// 添加上一页按钮
$pagination.append(
上一页
);
// 添加页码按钮
const startPage = Math.max(1, currentPage - 2);
const endPage = Math.min(totalPages, startPage + 4);
for (let i = startPage; i <= endPage; i++) {
$pagination.append(
${i}
);
}
// 添加下一页按钮
$pagination.append(
下一页
);
// 显示页码信息
$('#pageInfo').text(第 ${currentPage} 页,共 ${totalPages} 页);
}
// 更新排序指示器
function updateSortIndicators() {
// 清除所有指示器
$('#resultsTable th[data-sortable] .sort-indicator').text('');
// 为当前排序列添加指示器
if (currentSort.column !== null) {
const $currentHeader = $(#resultsTable th[data-sortable]:eq(${currentSort.column}));
$currentHeader.find('.sort-indicator').text(currentSort.direction === 'asc' ? '↑' : '↓');
}
}
// 表格过滤函数
function filterTable(searchTerm, columnIndex) {
currentPage = 1; // 重置到第一页
if (!searchTerm) {
updateTable(window.parent.dataManager);
return;
}
const $rows = $('#resultBody tr');
let visibleCount = 0;
$rows.each(function() {
const $cell = $(this).find(td:eq(${columnIndex}));
const cellText = $cell.text().toLowerCase();
let isMatch = false;
// 特殊处理油状态搜索
if (searchTerm === '有油' || searchTerm === '无油' || searchTerm === '(油)') {
isMatch = cellText.includes(searchTerm);
}
// 处理厚度字符串匹配
else if (columnIndex === 4 && !isNaN(parseFloat(searchTerm))) {
// 提取厚度数字部分进行匹配
const thicknessMatch = cellText.match(/(\d+\.?\d*)/);
if (thicknessMatch) {
const thicknessValue = parseFloat(thicknessMatch[1]);
const searchValue = parseFloat(searchTerm);
// 允许小数点误差
isMatch = Math.abs(thicknessValue - searchValue) < 0.5;
}
}
// 常规文本匹配
else {
isMatch = cellText.includes(searchTerm);
}
if (isMatch) {
$(this).show();
visibleCount++;
} else {
$(this).hide();
}
});
$('#resultCount').text(visibleCount);
$('#noResults').toggle(visibleCount === 0);
$('#paginationContainer').toggle(visibleCount > 0);
}
// 按库存量过滤
function filterByStock(minStock, maxStock) {
currentPage = 1; // 重置到第一页
const $rows = $('#resultBody tr');
let visibleCount = 0;
$rows.each(function() {
const $stockCell = $(this).find('td:eq(7)');
const stockText = $stockCell.text();
const stockValue = parseInt(stockText) || 0;
const isMatch = stockValue >= minStock && stockValue <= maxStock;
if (isMatch) {
$(this).show();
visibleCount++;
} else {
$(this).hide();
}
});
$('#resultCount').text(visibleCount);
$('#noResults').toggle(visibleCount === 0);
$('#paginationContainer').toggle(visibleCount > 0);
}
// 显示板材详情模态框
function showMaterialDetail(bancaiId) {
const dataManager = window.parent.dataManager;
if (!dataManager) return;
const bancais = dataManager.data.bancais || [];
const bancai = bancais.find(b => b.id === bancaiId);
const kucun = dataManager.data.kucuns?.find(k => k.bancai?.id === bancaiId);
if (!bancai) {
alert('未找到板材信息');
return;
}
// 格式化木皮信息
const formatMupiDetail = (mupi) => {
if (!mupi) return '无';
return ${mupi.name}${mupi.you ? '(油)' : ''};
};
// 获取相关订单
const relatedOrders = getRelatedOrders(bancai);
// 构建详情HTML
const detailHtml =
基本信息
ID: ${bancai.id}
材质: ${bancai.caizhi?.name || '未知'}
厚度: ${bancai.houdu ? bancai.houdu.toFixed(1) + 'mm' : '未知'}
库存数量: ${kucun ? kucun.shuliang : 0}
表面处理
木皮1: ${formatMupiDetail(bancai.mupi1)}
木皮2: ${formatMupiDetail(bancai.mupi2)}
相关订单 (${relatedOrders.length})
订单号
下单日期
交货日期
${relatedOrders.map(order =>
${order.number}
${order.xiadan ? new Date(order.xiadan).toLocaleDateString() : '-'}
${order.jiaohuo ? new Date(order.jiaohuo).toLocaleDateString() : '-'}
).join('')}
;
// 设置模态框内容
$('#materialDetailContent').html(detailHtml);
// 显示模态框
const materialModal = new bootstrap.Modal('#materialDetailModal');
materialModal.show();
}
// 获取板材相关订单
function getRelatedOrders(bancai) {
const dataManager = window.parent.dataManager;
if (!dataManager) return [];
const orders = [];
const dingdan_bancais = dataManager.data.dingdan_bancais || [];
// 查找直接订单组件关联
dingdan_bancais.forEach(db => {
if (db.bancai?.id === bancai.id && db.dingdan && !orders.some(o => o.id === db.dingdan.id)) {
orders.push(db.dingdan);
}
});
// 查找产品组件关联
const chanpin_zujians = dataManager.data.chanpin_zujians || [];
chanpin_zujians.forEach(cz => {
if (cz.bancai?.id === bancai.id) {
const dingdan_chanpins = dataManager.data.dingdan_chanpins || [];
dingdan_chanpins.forEach(dc => {
if (dc.chanpin?.id === cz.chanpin?.id && dc.dingdan && !orders.some(o => o.id === dc.dingdan.id)) {
orders.push(dc.dingdan);
}
});
}
});
return orders;
}
// 页面加载时尝试初始化
if (window.parent) {
window.parent.postMessage('RequestDataManager', '*');
}
// 添加全局函数供按钮调用
window.showMaterialDetail = showMaterialDetail;
详情中关联订单添加排序并去重,在一个加一个上下滚动
