CSS- table 序列号自动排序

本文介绍了一个简单的HTML表格结构,并展示了如何使用CSS计数器来自动填充表格中的序号。通过设置`counter-reset`和`counter-increment`属性,可以轻松实现序号的自动生成。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML:

<table>
<thead>
    <tr>
    <th>序号</th>
    </tr>
</thead>
<tbody>
    <tr>
       <td class="SortCLASS"></td>
    </tr>
</tbody>
</table>

CSS:

tbody {
   counter-reset:sectioncounter;
}                      

.SortCLASS:before {
   content:counter(sectioncounter); 
   counter-increment:sectioncounter;

}
<template> <div class="app-container"> <el-row :gutter="20"> <!-- 项目树菜单 --> <el-col :span="6" :xs="24"> <div class="head-container"> <el-input v-model="projectName" placeholder="请输入项目名称" clearable size="mini" prefix-icon="el-icon-search" style="margin-bottom: 20px" @input="filterProjectTree" /> </div> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll" >{{ isExpandAll ? '折叠' : '展开' }}</el-button> </el-col> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-folder-add" size="mini" @click="handleAddProject" v-hasPermi="['cms:project:add']" >新增项目</el-button> </el-col> </el-row> <el-tree v-if="refreshTable" style="margin-top: 0.8rem;" :data="filteredProjectTreeData" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" :highlight-current="true" :default-expand-all="isExpandAll" ref="projectTree" empty-text="加载中,请稍候" node-key="id" @node-click="handleProjectClick" > <span class="custom-tree-node" slot-scope="{ node, data }"> <div class="tree-node-content"> <el-icon class="tree-icon" :size="16"> <svg-icon v-if="node.expanded" icon-class="folder-open" /> <svg-icon v-else icon-class="folder" /> </el-icon> <div v-if="node.label && node.label.length > 25" class="node-label"> <el-tooltip :show-after="300" :content="node.label" placement="top-start"> <span>{{ ellipsis(node.label, 25) }}</span> </el-tooltip> </div> <div v-else class="node-label"> <span>{{ node.label }}</span> </div> </div> <span class="node-actions"> <el-button type="text" size="mini" icon="el-icon-edit" v-hasPermi="['cms:project:update']" @click.stop="() => handleEditProject(data)" ></el-button> <el-button type="text" size="mini" icon="el-icon-plus" v-hasPermi="['cms:project:add']" @click.stop="() => handleAddSubProject(data)" ></el-button> <el-button type="text" size="mini" icon="el-icon-delete" v-hasPermi="['cms:project:delete']" @click.stop="() => handleDeleteProject(data)" ></el-button> </span> </span> </el-tree> </el-col> <!-- 文档区域 --> <el-col :span="18" :xs="24"> <!-- 文档列表视图 --> <div v-if="activeView === 'list'" class="doc-list-container"> <el-form :model="docQueryParams" ref="docQueryForm" :inline="true" label-width="68px"> <el-form-item label="文档标题" prop="title"> <el-input v-model="docQueryParams.title" placeholder="请输入文档标题" clearable size="mini" @keyup.enter.native="getDocumentList" prefix-icon="el-icon-search" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="docQueryParams.status" placeholder="状态" size="mini" clearable> <el-option label="编制中✍" value="0" /> <el-option label="待评审✊" value="1" /> <el-option label="已评审👍" value="2" /> <el-option label="修改中🔧" value="3" /> <el-option label="开发中💪" value="4" /> <el-option label="已完成开发🆗" value="5" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="getDocumentList">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetDocQuery">重置</el-button> </el-form-item> </el-form> <div class="batch-actions"> <el-button type="success" icon="el-icon-download" size="mini" :disabled="selectedDocs.length === 0" @click="handleBatchExport" > 批量导出 ({{ selectedDocs.length }}) </el-button> </div> <el-table v-loading="docLoading" :data="documentList" highlight-current-row @row-click="handleRowClick" @selection-change="handleSelectionChange" ref="docTable" > <el-table-column type="selection" width="55" align="center" /> <el-table-column label="序号" type="index" width="50" align="center" /> <el-table-column label="编号" align="center" prop="serialNum" /> <el-table-column label="文档标题" prop="title" align="center"/> <el-table-column label="进度" prop="status" width="100"> <template slot-scope="scope"> <el-tag v-if="scope.row.status === '0'" type="info" size="small">编制中✍</el-tag> <el-tag v-if="scope.row.status === '1'" type="warning" size="small">待评审✊</el-tag> <el-tag v-if="scope.row.status === '2'" type="success" size="small">已评审👍</el-tag> <el-tag v-if="scope.row.status === '3'" type="success" size="small">修改中🔧</el-tag> <el-tag v-if="scope.row.status === '4'" type="success" size="small">开发中💪</el-tag> <el-tag v-if="scope.row.status === '5'" type="success" size="small">已完成开发🆗</el-tag> </template> </el-table-column> <el-table-column label="创建人" prop="createBy" width="100" /> <el-table-column label="负责人" prop="director" width="100"/> <el-table-column label="创建时间" prop="createTime" width="140" /> <el-table-column label="操作" width="180" align="center"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEditDocument(scope.row)"></el-button> <el-button size="mini" type="text" icon="el-icon-download" @click.stop="handleExportHttp(scope.row, true)" title="导出详细" ></el-button> <el-button size="mini" type="text" icon="el-icon-download" @click.stop="handleExportHttp(scope.row, false)" title="导出简版" ></el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDeleteDocument(scope.row)" v-hasPermi="['cms:project:deleteArticleFromProject']"></el-button> </template> </el-table-column> </el-table> <pagination v-show="docTotal>0" :total="docTotal" :page.sync="docQueryParams.pageNum" :limit.sync="docQueryParams.pageSize" @pagination="getDocumentList" /> </div> <!-- 文档详情视图 --> <div v-else-if="activeView === 'detail'" class="doc-detail-container"> <div class="doc-header"> <el-button type="text" icon="el-icon-back" @click="backToList">返回文档列表</el-button> <h2 class="doc-title"> <el-icon class="title-icon"><svg-icon icon-class="document" /></el-icon> {{ currentDocument.title }} </h2> </div> <!-- 富文本编辑器 --> <el-form :model="currentDocument" ref="docForm" label-width="80px"> <el-form-item label="文档内容"> <Tinymce :height='600' v-model='currentDocument.content'></Tinymce> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-check" @click="saveDocument">保存</el-button> <el-button icon="el-icon-close" @click="backToList">取消</el-button> </el-form-item> </el-form> </div> </el-col> </el-row> <!-- 项目编辑对话框 --> <el-dialog :title="projectDialogTitle" :visible.sync="projectDialogVisible" width="50%"> <el-form :model="projectForm" ref="projectForm" label-width="100px"> <el-form-item label="项目名称" prop="name" required> <el-input v-model="projectForm.name" placeholder="请输入项目名称" prefix-icon="el-icon-folder" /> </el-form-item> <el-form-item label="上级项目" prop="parentId"> <treeselect v-model="projectForm.parentId" :options="projectTreeData" :normalizer="normalizer" placeholder="选择上级项目" /> </el-form-item> <el-form-item label="项目描述" prop="description"> <el-input type="textarea" v-model="projectForm.description" :rows="3" /> </el-form-item> </el-form> <div slot="footer"> <el-button @click="projectDialogVisible = false">取消</el-button> <el-button type="primary" icon="el-icon-check" @click="saveProject">保存</el-button> </div> </el-dialog> </div> </template> <script> import { listData, getData, addData, updateData } from "@/api/cms/data"; import { getProjectTree, saveProject, updateProject, deleteProject, removeMenusFromProject } from "@/api/cms/articleProject"; import Tinymce from '@/components/Tinymce'; import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import axios from 'axios'; export default { name: "ProjectManagement", components: { Treeselect, Tinymce }, data() { return { // 项目树相关数据 projectName: '', projectTreeData: [], filteredProjectTreeData: [], refreshTable: true, isExpandAll: true, defaultProps: { children: "children", label: "label" }, // 项目对话框相关 projectDialogVisible: false, projectDialogTitle: '', projectForm: { id: null, name: '', parentId: null, description: '' }, // 文档列表相关 activeView: 'list', // 'list' 或 'detail' docQueryParams: { menuIds: null, title: '', status: '', pageNum: 1, pageSize: 10 }, documentList: [], docTotal: 0, docLoading: false, selectedDocs: [], // 选中的文档 ids: [], // 选中文档ID集合 // 文档详情相关 currentDocument: { id: null, menuId: null, title: '', content: '', status: '0' }, // 当前选中的项目ID(用于删除操作) currentProjectId: null, // 导出相关数据 form: { ids: [], // 导出的文档ID集合 notesExportFlag: 1 // 默认导出详细 } }; }, created() { this.getProjectTree(); }, methods: { // ================= 项目树方法 ================= ellipsis(text, maxLength) { return text.length > maxLength ? text.substring(0, maxLength) + '...' : text; }, toggleExpandAll() { this.refreshTable = false; this.isExpandAll = !this.isExpandAll; this.$nextTick(() => { this.refreshTable = true; }); }, filterNode(value, data) { if (!value) return true; return data.label.toLowerCase().includes(value.toLowerCase()); }, filterProjectTree() { this.$refs.projectTree.filter(this.projectName); }, handleProjectClick(data) { // 保存当前选中的项目ID this.currentProjectId = data.id; // 将menuIds字符串转换为数组 const menuIdsArray = data.menuIds ? data.menuIds.split(',').map(id => id.trim()) : []; // 将数组转换回逗号分隔的字符串用于查询 this.docQueryParams.menuIds = menuIdsArray.join(','); this.getDocumentList(); }, // ================= 项目管理方法 ================= handleAddProject() { this.projectForm = { id: null, name: '', parentId: null, description: '' }; this.projectDialogTitle = '新增项目'; this.projectDialogVisible = true; }, handleAddSubProject(data) { this.projectForm = { id: null, name: '', parentId: data.id, description: '' }; this.projectDialogTitle = '新增子项目'; this.projectDialogVisible = true; }, handleEditProject(data) { this.projectForm = { id: data.id, name: data.name, parentId: data.parentId, description: data.description || '' }; this.projectDialogTitle = '编辑项目'; this.projectDialogVisible = true; }, handleDeleteProject(data) { this.$confirm(`确定删除项目 "${data.name}" 及其所有子项目吗?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { // 使用deleteProject API删除项目 deleteProject(data.id).then(response => { if (response.code === 200) { this.$message.success('删除成功'); this.getProjectTree(); } else { this.$message.error(response.msg || '删除失败'); } }).catch(error => { this.$message.error('删除失败: ' + error.message); }); }); }, saveProject() { this.$refs.projectForm.validate(valid => { if (valid) { const saveMethod = this.projectForm.id ? updateProject : saveProject; saveMethod(this.projectForm).then(response => { if (response.code === 200) { this.$message.success('保存成功'); this.projectDialogVisible = false; this.getProjectTree(); } else { this.$message.error(response.msg || '保存失败'); } }).catch(error => { this.$message.error('保存失败: ' + error.message); }); } }); }, normalizer(node) { return { id: node.id, label: node.name, children: node.children && node.children.length > 0 ? node.children : undefined }; }, // 获取项目树数据 getProjectTree() { getProjectTree().then(response => { if (response.code === 200 && response.data) { // 处理根节点 const rootNode = response.data; // 转换数据结构 this.projectTreeData = this.transformTreeData([rootNode]); this.filteredProjectTreeData = [...this.projectTreeData]; // 默认展开根节点 this.$nextTick(() => { if (this.projectTreeData.length > 0) { this.$refs.projectTree.setCurrentKey(rootNode.id); this.handleProjectClick(rootNode); } }); } else { this.$message.error('获取项目树失败: ' + (response.msg || '未知错误')); } }).catch(error => { console.error("获取项目树失败:", error); this.$message.error('获取项目树失败: ' + error.message); }); }, // 转换数据结构为el-tree需要的格式 transformTreeData(nodes) { if (!nodes || !Array.isArray(nodes)) return []; return nodes.map(node => ({ id: node.id, label: node.name, name: node.name, parentId: node.parentId, menuIds: node.menuIds, description: node.description, createBy: node.createBy, createTime: node.createTime, updateBy: node.updateBy, updateTime: node.updateTime, children: this.transformTreeData(node.children || []), rawData: node })); }, // ================= 文档管理方法 ================= getDocumentList() { if (!this.docQueryParams.menuIds) { return; } this.docLoading = true; listData(this.docQueryParams).then(response => { if (response.code === 200) { this.documentList = response.rows; this.docTotal = response.total; this.selectedDocs = []; // 清空选择 this.ids = []; // 清空ID集合 } else { this.$message.error(response.msg || '获取文档列表失败'); } this.docLoading = false; }).catch(error => { this.$message.error('获取文档列表失败: ' + error.message); this.docLoading = false; }); }, resetDocQuery() { this.docQueryParams.title = ''; this.docQueryParams.status = ''; this.getDocumentList(); }, handleEditDocument(row) { getData(row.id).then(response => { if (response.code === 200) { this.currentDocument = { id: response.data.id, menuId: response.data.menuId, title: response.data.title, content: response.data.content, status: response.data.status }; this.activeView = 'detail'; } else { this.$message.error(response.msg || '获取文档详情失败'); } }).catch(error => { this.$message.error('获取文档详情失败: ' + error.message); }); }, handleDeleteDocument(row) { this.$confirm(`确定从项目中移除文档 "${row.title}" 吗?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { // 使用removeMenusFromProject API从项目中移除文档 // 参数: { projectId: 当前项目ID, menusIds: [文档ID] } const params = { projectId: this.currentProjectId, menusIds: [row.id] // 使用文档ID数组 }; removeMenusFromProject(params).then(response => { if (response.code === 200) { this.$message.success('文档已从项目中移除'); this.getDocumentList(); } else { this.$message.error(response.msg || '移除文档失败'); } }).catch(error => { this.$message.error('移除文档失败: ' + error.message); }); }); }, handleRowClick(row) { this.handleEditDocument(row); }, backToList() { this.activeView = 'list'; }, saveDocument() { const saveMethod = this.currentDocument.id ? updateData : addData; saveMethod(this.currentDocument).then(response => { if (response.code === 200) { this.$message.success('保存成功'); this.getDocumentList(); this.backToList(); } else { this.$message.error(response.msg || '保存失败'); } }).catch(error => { this.$message.error('保存失败: ' + error.message); }); }, // ================= 导出功能方法 ================= // 多选处理 handleSelectionChange(selection) { this.selectedDocs = selection; this.ids = selection.map(item => item.id); }, // 导出文档(单篇) handleExportHttp(row, isDetail) { const params = { ids: row.id, notesExportFlag: isDetail ? 1 : 0 }; this.download( 'cms/data/createArticleOutputHttp', params, `word文档_${row.title}_${new Date().getTime()}.docx`, { timeout: 60000 } ); }, // 批量导出文档 handleBatchExport() { if (this.selectedDocs.length === 0) { this.$message.warning('请选择要导出的文档'); return; } // 弹出选择导出类型的对话框 this.$confirm('请选择导出方式', '提示', { distinguishCancelAndClose: true, confirmButtonText: '导出详细', cancelButtonText: '导出简版', type: 'info' }).then(() => { // 导出详细 this.batchExportHttp(true); }).catch(action => { if (action === 'cancel') { // 导出简版 this.batchExportHttp(false); } }); }, // 批量导出文档实现 batchExportHttp(isDetail) { const params = { ids: this.ids, notesExportFlag: isDetail ? 1 : 0 }; this.download( 'cms/data/createArticleOutputHttp', params, `批量文档_${new Date().getTime()}.zip`, { timeout: 120000 } // 批量导出可能需要更长时间 ); }, // 下载方法实现 download(url, params, fileName, config = {}) { // 显示加载提示 const loading = this.$loading({ lock: true, text: '正在生成文档,请稍候...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); // 发送请求 axios.get(url, { params: params, responseType: 'blob', timeout: config.timeout || 30000, headers: { 'Authorization': `Bearer ${this.$store.getters.token}` } }) .then(response => { // 创建下载链接 const blob = new Blob([response.data], { type: response.headers['content-type'] }); const downloadUrl = window.URL.createObjectURL(blob); // 创建下载链接 const link = document.createElement('a'); link.href = downloadUrl; link.download = fileName; document.body.appendChild(link); // 触发下载 link.click(); // 清理资源 window.URL.revokeObjectURL(downloadUrl); document.body.removeChild(link); this.$message.success('文档导出成功'); }) .catch(error => { console.error('导出失败:', error); // 处理错误响应 if (error.response) { if (error.response.status === 500) { this.$message.error('导出失败:服务器内部错误'); } else if (error.response.status === 401) { this.$message.error('导出失败:未授权访问'); } else if (error.response.status === 404) { this.$message.error('导出失败:API接口不存在'); } else { this.$message.error(`导出失败:服务器错误 (${error.response.status})`); } } else if (error.message.includes('timeout')) { this.$message.error('导出超时,请稍后再试'); } else { this.$message.error('导出失败:' + (error.message || '未知错误')); } }) .finally(() => { loading.close(); }); }, // 排序格式化方法 sortableFormatter(row, column) { if (this.ids.includes(row.id)) { return 1; } else { return 2; } } } }; </script> <style scoped> .app-container { padding: 20px; background-color: #f5f7fa; } .head-container { padding: 10px; background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; } .tree-node-content { display: flex; align-items: center; } .tree-icon { margin-right: 8px; color: #409EFF; } .node-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .node-actions { display: flex; align-items: center; } .doc-list-container { background-color: #ffffff; padding: 20px; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .batch-actions { margin-bottom: 15px; } .doc-detail-container { background-color: #ffffff; padding: 20px; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .doc-header { display: flex; align-items: center; margin-bottom: 20px; } .doc-title { display: flex; align-items: center; margin-left: 15px; margin-bottom: 0; font-size: 18px; color: #303133; } .title-icon { margin-right: 10px; color: #409EFF; } .doc-title .doc-icon { margin-right: 8px; color: #909399; } .el-tree { border: 1px solid #ebeef5; border-radius: 4px; padding: 10px; max-height: 70vh; overflow-y: auto; background-color: #ffffff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .custom-tree-node .el-button { padding: 4px; margin-left: 5px; } .el-table { margin-top: 10px; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .el-form-item { margin-bottom: 18px; } .el-tag { margin: 2px; } /* 响应式调整 */ @media (max-width: 768px) { .el-col-xs-24 { width: 100%; margin-bottom: 20px; } .doc-list-container, .doc-detail-container { padding: 10px; } .doc-header h2 { font-size: 16px; } } </style> 原本代码是这样的,如何改
最新发布
08-02
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>布局</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 微软雅黑; } body { display: grid; grid-template-rows: auto 1fr auto; /* 主体部分的行布局 */ grid-template-columns: 1fr 4fr 1fr; /* 主体部分的列布局 */ height: 100vh; overflow: hidden; gap: 20px; /* 添加间隙 */ } .header { grid-column: 1 / 4; padding: 13px; height: 13.9vh; font-size: 1.5vw; color: white; display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ text-align: center; background-color: #04485F; line-height: 5vh; } .header span { font-size: 2vw; font-weight: normal; line-height: 1vh; } .left { grid-column: 1; background-color: white; padding: 0; margin: 0 1vh; margin-top: -0.2vh; text-align: center; display: flex; justify-content: center; /* 垂直居中内容 */ height: 83vh; /* 让左侧区域的高度占满父级 */ width: 50vh; border: 3px solid #04485F; } .left img { width: 100%; /* 确保图片占满父容器 */ height: 100%; /* 确保图片占满父容器 */ object-fit: cover; /* 图片覆盖父容器 */ } .right { grid-column: 3; background-color: white; padding: 0; height: 62vh; width: 40vh; margin: 0px 1vh; display: flex; align-items: center; justify-content: center; overflow: hidden; /* 确保不会超出容器 */ object-fit: contain; text-align: center; margin-top: -0.2vh; border: 3px solid #04485F; } .right img { width: 100%; /* 确保图片占满父容器 */ height: 100%; /* 确保图片占满父容器 */ object-fit: cover; /* 图片覆盖父容器 */ } .main { grid-column: 2; display: flex; flex-direction: column; justify-content: space-between; /* 确保内容分布均匀 */ align-items: center; text-align: center; font-family: 微软雅黑; font-size: 2.8vw; font-weight: bold; margin-top: 1vh; padding: 0; height: 100%; /* 保持高度填充 */ } .main span { font-weight: normal; font-size: 1.6vw; } .table { width: 75vh; margin-top: -2vh; border-collapse: separate; /* 避免单元格之间合并 */ border-spacing: 0 1vh; /* 只在垂直方向添加间隙 */ } .table td:nth-child(1) { background-color: #04485F; /* 设置左侧单元格的背景颜色 */ color: white; width: 40%; } .table-d { width: 40vh; border-collapse: separate; /* 避免单元格之间合并 */ margin-top: -24.8vh; border-spacing: 0 1vh; /* 只在垂直方向添加间隙 */ } .table td { padding: 0; /* 为每个单元格添加内边距 */ text-align: center; vertical-align: middle; border: 3px solid #04485F; background-color: white; height: 20vh; } .table-d td { padding: 0; /* 为每个单元格添加内边距 */ text-align: center; vertical-align: middle; border: 3px solid #04485F; background-color: white; height: 20vh; } .table-d td:nth-child(1) { background-color: #04485F; /* 设置左侧单元格的背景颜色 */ color: white; width: 56%; } .location-box, .location-box-d td { padding: 0; text-align: center; vertical-align: middle; border: 3px solid #04485F; background-color: white; } /* 保持 location-box-d 独立,防止干扰 */ .location-box-d { grid-column: 3; grid-row: 3; padding: 1vh; width: 100%; margin-top: -1.4vh; text-align: center; font-family: 微软雅黑; font-size: 2.4vw; font-weight: bold; display: flex; /* 使用flex布局 */ align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ position: relative; /* 使其独立定位 */ } .location-box-d span { font-weight: normal; font-size: 1.3vw; } </style> </head> <body> <div class="header"> <h1>RF 发射线圈工位<br><span>VTC Station</span></h1> </div> <div class="left"> <img src="your-image-url.jpg" alt="图一"> </div> <div class="main"> <table class="table"> <tr> <td>工单号<br><span>Work Order</span><br></td> <td>{{ work_order }}</td> <!-- 使用占位符 --> </tr> <tr> <td>序列号<br><span>Serial Number</span><br></td> <td>{{ serial_number }}</td> <!-- 使用占位符 --> </tr> <tr> <td>生产状态<br><span>Production Status</span><br></td> <td><img src="zhengchang.png" alt="生产状态" width="150" height="150"></td> <!-- 使用占位符 --> </tr> <tr> <td>生产进度<br><span>Progress</span><br></td> <td><img src="{{ progress_image }}" alt="生产进度"></td> <!-- 使用占位符 --> </tr> </table> </div> <div class="right"> <img src="20250528-173733.jpg" alt="图二"> </div> <div class="location-box-d"> <table class="table-d"> <tr> <td>制作人员<br><span>Production Staff</span><br></td> <td>{{ staff_name }}</td> <!-- 使用占位符 --> </tr> </table> </div> </body> </html> 给上述HTML编码中加入媒体查询适配不同分辨率的内容
05-31
// 控制器完整代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using WebApplication1.Models; using Newtonsoft.Json; using WebApplication1.Scripts; namespace WebApplication1.Controllers { public class JobManagemController : Controller { AoutEntities db = new AoutEntities(); ReturnListJsonData jsonData = new ReturnListJsonData(); public ActionResult Index() { return View(); } #region 模糊查询 public ActionResult GetList(int page, int limit, string name, string code) { var list = db.Job.Where(a => a.IsDel == false).ToList(); if (!string.IsNullOrEmpty(name)) { list = list.Where(a => a.JobName.Contains(name)).ToList(); } if (!string.IsNullOrEmpty(code)) { list = list.Where(a => a.JobCode.Contains(code)).ToList(); } var offset = (page - 1) * limit; var data = list.OrderByDescending(a => a.ModifyDate).Skip(offset).Take(limit); jsonData.code = 0; jsonData.count = list.Count; jsonData.data = data; jsonData.msg = "success"; return Json(jsonData, JsonRequestBehavior.AllowGet); } #endregion #region 添加职位 [HttpPost] public ActionResult AddJob(Job job) { try { job.IsDel = false; job.ModifyDate = DateTime.Now; db.Job.Add(job); db.SaveChanges(); jsonData.code = 0; jsonData.msg = "添加成功"; } catch (Exception ex) { jsonData.code = 1; jsonData.msg = ex.Message; } return Json(jsonData); } #endregion #region 更新职位 [HttpPost] public ActionResult UpdateJob(Job job) { try { var model = db.Job.FirstOrDefault(a => a.ID == job.ID); if (model != null) { model.JobName = job.JobName; model.JobCode = job.JobCode; model.ModifyDate = DateTime.Now; db.SaveChanges(); jsonData.code = 0; jsonData.msg = "更新成功"; } else { jsonData.code = 1; jsonData.msg = "未找到该职位"; } } catch (Exception ex) { jsonData.code = 1; jsonData.msg = ex.Message; } return Json(jsonData); } #endregion #region 删除职位 [HttpPost] public ActionResult DeleteJob(Guid ID) { try { var model = db.Job.FirstOrDefault(a => a.ID == ID); if (model != null) { model.IsDel = true; // 软删除 db.SaveChanges(); jsonData.code = 0; jsonData.msg = "删除成功"; } else { jsonData.code = 1; jsonData.msg = "未找到该职位"; } } catch (Exception ex) { jsonData.code = 1; jsonData.msg = ex.Message; } return Json(jsonData); } #endregion } } <!-- 前端页面完整代码 --> @{ Layout = null; } <!DOCTYPE html> <html> <head> <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="~/Scripts/layui/layui.js"></script> <script src="~/Scripts/jquery-3.4.1.js"></script> <style> body { padding: 10px 20px 20px 20px; width: 90% } .but { margin-top: -5px } </style> </head> <body> <fieldset class="layui-elem-field"> <legend> <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">职位管理</a> </span> </legend> <div class="layui-field-box"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" name="name" id="name" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">职位代码</label> <div class="layui-input-inline"> <input type="text" name="code" id="code" autocomplete="off" class="layui-input"> </div> </div> <button type="button" class="layui-btn layui-btn-radius but" id="searchButton" onclick="Search()"><i class="layui-icon layui-icon-search"></i>查询</button> <button type="button" class="layui-btn layui-bg-blue but" onclick="AddJob()"><i class="layui-icon layui-icon-addition"></i>添加</button> </div> </div> </fieldset> <fieldset class="layui-elem-field"> <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolDemo"> <div class="layui-clear-space"> <a class="layui-btn layui-btn-xs" lay-event="edit" id="Edit"><i class="layui-icon layui-icon-edit"></i>编辑</a> <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="del" id="del"><i class="layui-icon layui-icon-clear"></i>删除</a> </div> </script> </fieldset> <script> var tableIns; layui.use(['table', 'layer', 'form'], function () { var table = layui.table; var layer = layui.layer; // 创建渲染实例 tableIns = table.render({ elem: '#test', url: '/JobManagem/GetList', page: true, cols: [[ { type: 'numbers', width: '15%', title: '序列号' }, { field: 'JobName', width: '20%', title: '职位名称' }, { field: 'JobCode', width: '20%', title: '职位代码' }, { field: 'ModifyDate', width: '20%', title: '修改时间', templet: function (d) { return formatDate(d.ModifyDate); } }, { title: '操作', width: '25%', templet: '#toolDemo' } ]], }); // 编辑删除事件 table.on('tool(test)', function (obj) { var data = obj.data; if (obj.event === 'edit') { EditJob(data); } else if (obj.event === 'del') { DeleteJob(data, obj); } }); }); function formatDate(dateStr) { if (!dateStr) return ''; // 提取时间戳(兼容 "/Date(123456789)/" 格式) var timestamp = parseInt(dateStr.replace(/\/Date$(\d+)$\//, '$ 1')); var date = new Date(timestamp); return date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + // 月份从0开始,需+1 ('0' + date.getDate()).slice(-2); } // 添加职位弹窗 function AddJob() { layer.open({ type: 1, title: ‘添加职位’, content: <div style="padding:20px"> <div class="layui-form-item"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" id="add_name" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">职位代码</label> <div class="layui-input-block"> <input type="text" id="add_code" class="layui-input"> </div> </div> </div> , btn: [‘保存’, ‘取消’], yes: function (index) { ParseError: KaTeX parse error: Expected '}', got 'EOF' at end of input: … JobName: (‘#add_name’).val(), JobCode: $(‘#add_code’).val() }, function (res) { if (res.code == 0) { layer.close(index); Search(); // 刷新列表 } else { layer.msg(‘操作失败:’ + res.msg); } }); } }); } // 编辑职位弹窗 function EditJob(data) { layer.open({ type: 1, title: '编辑职位', content: ` <div style="padding:20px"> <div class="layui-form-item"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" id="edit_name" value="${data.JobName}" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">职位代码</label> <div class="layui-input-block"> <input type="text" id="edit_code" value="${data.JobCode}" class="layui-input"> </div> </div> </div> `, btn: ['更新', '取消'], yes: function (index) { $.post('/JobManagem/UpdateJob', { ID: data.ID, JobName: $('#edit_name').val(), JobCode: $('#edit_code').val() }, function (res) { if (res.code == 0) { layer.close(index); Search(); } else { layer.msg('更新失败:' + res.msg); } }); } }); } // 删除职位 function DeleteJob(data, obj) { layer.confirm('真的删除行 [' + data.JobName + '] 么', function (index) { $.post('/JobManagem/DeleteJob', { ID: data.ID }, function (res) { if (res.code == 0) { obj.del(); layer.close(index); } else { layer.msg('删除失败:' + res.msg); } }); }); } // 查询重载 function Search() { var nameVal = $('input[name="name"]').val().trim(); var codeVal = $('input[name="code"]').val().trim(); tableIns.reload({ where: { name: nameVal, code: codeVal }, page: { curr: 1 } // 重置分页 }); } </script> </body> </html> 表名:组织机构表(OrganizationStructure) 字段描述 字段名 数据类型 长度 是否主键 是否外键 是否必填 组织机构表主键 ID uniqueidentifier 16 1 FALSE TRUE 组织机构名称 OrgName varchar 200 0 FALSE TRUE 组织机构代码 OrgCode varchar 200 0 FALSE FALSE 级别 Leve int 4 0 FALSE FALSE 父节点 ParentId uniqueidentifier 16 0 FALSE FALSE 创建时间 CreateDate datetime 8 0 FALSE FALSE 修改时间 ModifyDate datetime 8 0 FALSE FALSE 根据我给的数据写出组织机构模块的前端后端
07-11
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值