主要功能
数据展示:通过树形表格展示项目信息,包含项目名称、管理面积、出租率等多列数据,并且对部分数据如创建时间进行格式化显示。
搜索功能:提供项目名称的搜索框,用户输入名称后可进行搜索,表格会根据搜索条件重新加载数据。
详情查看:当用户点击树形表格中特定行(parentId为 0 的行)时,会弹出项目详情页面。
添加与导出功能:提供添加项目和导出项目的功能按钮,点击添加按钮会弹出新增项目的表单弹窗,导出功能则会根据搜索条件导出相应的项目数据为 Excel 文件。
代码结构与技术实现
项目的前端代码主要由 HTML、JavaScript 构成,使用 Layui 的多个模块如layer、form、table等实现各种交互和数据展示功能。利用 AJAX(XMLHttpRequest)实现数据的请求和导出功能,通过监听表格的各种事件来实现不同的业务逻辑。项目整体结构清晰,各模块职责明确,方便后续的维护和扩展。
项目文件
主要文件包括project.html作为项目的主页面,包含表格、工具栏等元素,还有projectDetail.html用于展示项目的详细信息,project_form.html则是新增项目的表单页面。JavaScript 代码主要负责页面的初始化、数据请求、事件监听等功能。