四、个人项目体系搭建

结果图（打码之后）：

一、python写的后端代码

  后端代码利用Flask编写，如下所示：

1. # app.py
2. from flask import Flask, render_template, request, jsonify, g
3. import sqlite3
4. import os
5. from datetime import datetime
7. app = Flask(__name__)
9. # ----------------------------------------------------------------------------
10. #   默认配置与默认函数
11. # ----------------------------------------------------------------------------
12. connection = 'example.db'          # 连接数据库
14. @app.route('/')
15. def index():
16.     return render_template('index.html')
18. def get_db():
19.     if not hasattr(g, 'db'):
20.         g.db = sqlite3.connect(connection)
21.         g.db.row_factory = sqlite3.Row  # 将查询结果以字典形式返回
22.     return g.db
23. @app.teardown_appcontext
24. def close_db(error=None):
25.     """请求结束时关闭数据库连接"""
26.     if hasattr(g, 'db'):
27.         g.db.close()
28. # 返回当前数据库的最大ID，离线函数
29. def maxID():
30.     conn1 = get_db()
31.     cursor = conn1.cursor()
32.     try:
33.         cursor.execute("SELECT * FROM projectTable")
34.         rows = cursor.fetchall()
35.         ID = []
36.         for row in rows:
37.             ID.append(int(row[0]))
38.         if ID == []:
39.             ID = [0]
40.         maxid = max(ID)
41.         return maxid
42.     except Exception as e:
43.         return jsonify({"message": "maxID发生错误"}), 500
44.     finally:
45.         # 确保关闭连接
46.         conn1.close()
48. # ----------------------------------------------------------------------------
49. #   获得当前表中所有的项目名称（去重过的）
50. # ----------------------------------------------------------------------------
51. @app.route('/projectNameOptions', methods=['POST'])
52. def projectNameOptions():
53.     conn = get_db()
54.     cursor = conn.cursor()
55. # 表格如果不存在就创建
56.     print("projectNameOptions正在运行……")
57.     cursor.execute("SELECT DISTINCT(projectName) FROM projectTable")
58.     rows = cursor.fetchall()
59.     results = []
60.     for row in rows:
61.         results.append(row['projectName'])
62.     return jsonify({"projects": results})
64. # ----------------------------------------------------------------------------
65. #   前端页面默认返回的数据
66. # ----------------------------------------------------------------------------
67. @app.route('/default', methods=['POST'])
68. def default():
69.     conn = get_db()
70.     cursor = conn.cursor()
71.     # 表格如果不存在就创建
72.     print("default正在运行……")
73.     if os.path.exists('example.db'):
74.         print("Database file exists!")
75.     else:
76.         print("Database file does not exist.")
77.     cursor.execute('''
78.                 CREATE TABLE IF NOT EXISTS projectTable (
79.                     id INTEGER PRIMARY KEY AUTOINCREMENT,
80.                     projectName TEXT,
81.                     submitPersonName TEXT,
82.                     Process TEXT,
83.                     StartTime TEXT,
84.                     EndTime TEXT,
85.                     neirong TEXT
86.                 )
87.                 ''')
88.     cursor.execute("SELECT * FROM projectTable")
89.     rows = cursor.fetchall()
90.     results = []
91.     for row in rows:
92.         results.append({
93.             'id': row['id'],
94.             'projectName': row['projectName'],
95.             'submitPersonName': row['submitPersonName'],
96.             'Process': row['Process'],
97.             'StartTime': row['StartTime'],
98.             'EndTime': row['EndTime'],
99.             "neirong" : row['neirong']
100.         })
101.     print(results)
102.     return jsonify(results)
104. # ----------------------------------------------------------------------------
105. #   根据所给条件（projectname专案名称, personname提交人, projectquery专案进度）查询数据
106. # ----------------------------------------------------------------------------
107. @app.route('/searchfor', methods=['POST'])
108. def searchfor():
109.     conn = get_db()
110.     cursor = conn.cursor()
111.     # 返回的数据
112.     data = request.get_json()
113.     print("查询条件 = ", data)
114.     if data["projectname"] == "":
115.         projectquery = "projectName LIKE '%'"
116.     else:
117.         projectquery = "projectName LIKE '%{}%'".format(data["projectname"])
118.     if data["personname"] == "":
119.         personNamequery = "submitPersonName LIKE '%'"
120.     else:
121.         personNamequery = "submitPersonName LIKE '%{}%'".format(data["personname"])
122.     Processquery = "Process LIKE '%{}%'".format(data["stateSelectionValue"])
123.     print(Processquery)
124.     query = "SELECT * FROM projectTable WHERE {} AND {} AND {}".format(projectquery, personNamequery, Processquery)
125.     print("searchFor query:", query)
126.     cursor.execute(query)
127.     rows = cursor.fetchall()
128.     results = []
129.     for row in rows:
130.         results.append({
131.             'id': row['id'],
132.             'projectName': row['projectName'],
133.             'submitPersonName': row['submitPersonName'],
134.             'Process': row['Process'],
135.             'StartTime': row['StartTime'],
136.             'EndTime': row['EndTime'],
137.             "neirong" : row['neirong']
138.         })
139.     print("查询结果：", results)
140.     return jsonify(results)
142. # ----------------------------------------------------------------------------
143. #   保存数据
144. # ----------------------------------------------------------------------------
145. @app.route('/saveData', methods=['POST'])
146. def receive_data():
147.     try:
148.         conn = get_db()
149.         cursor = conn.cursor()
150.         data = request.get_json()
151.         # 当前更新的时间
152.         currenttime = datetime.now()
153.         formatted_time = currenttime.strftime("%Y-%m-%d")
154.         if data:
155.             print("收到的表格数据:", data)
156.             # 启动事务
157.             for updated_data in data:
158.                 query = '''
159.                         UPDATE projectTable
160.                         SET
161.                             projectName = ?,
162.                             neirong = ?,
163.                             submitPersonName = ?,
164.                             process = ?,
165.                             startTime = ?,
166.                             endTime = ?
167.                         WHERE id = ?
168.                     '''
169.                 cursor.execute(query, (
170.                     updated_data['projectName'],
171.                     updated_data['projectNeirong'],
172.                     updated_data['submitPersonName'],
173.                     updated_data['process'],
174.                     updated_data['startTime'],
175.                     # formatted_time,
176.                     updated_data['endTime'],
177.                     updated_data['id']
178.                 ))
180.             conn.commit()
181.             cursor.execute("SELECT * FROM projectTable")
182.             rows = cursor.fetchall()
183.             print("查询结果==========================================================")
184.             for row in rows:
185.                 print(
186.                     f"ID: {row[0]}, Project Name: {row[1]}, Submitter: {row[2]}, Process: {row[3]}, Start Time: {row[4]}, End Time: {row[5]}, Neirong: {row[6]}")
188.             print("已更改！")
189.             return jsonify({"message": "数据接收成功", "receivedData": data}), 200
190.     except Exception as e:
191.         # 如果有任何异常，回滚事务
192.         conn.rollback()
193.         print("发生错误:", e)
194.         return jsonify({"message": "处理数据时发生错误"}), 500
195.     finally:
196.         # 确保关闭连接
197.         conn.close()
199. # ----------------------------------------------------------------------------
200. #   删除指定的一行
201. # ----------------------------------------------------------------------------
202. @app.route('/delectable', methods=['POST'])
203. def delete_data():
204.     conn = get_db()
205.     cursor = conn.cursor()
206.     # 返回数据示例：{'id': 1, 'flag': True}
207.     data = request.get_json()
209.     if data:
210.         print("收到的表格数据:", data)
211.         try:
212.             if data["flag"]:
213.                 query = '''
214.                     DELETE FROM projectTable WHERE id = ?
215.                 '''
216.                 # 使用参数化查询
217.                 cursor.execute(query, (data['id'], ))
218.             conn.commit()
219.             cursor.execute("SELECT * FROM projectTable")
220.             rows = cursor.fetchall()
221.             print("查询结果==========================================================")
222.             for row in rows:
223.                 print(
224.                     f"ID: {row[0]}, Project Name: {row[1]}, Submitter: {row[2]}, Process: {row[3]}, Start Time: {row[4]}, End Time: {row[5]}, Neirong: {row[6]}")
225.             print("已删除！")
226.             return jsonify({"message": "数据接收成功", "receivedData": data}), 200
227.         except Exception as e:
228.             # 如果有任何异常，回滚事务
229.             conn.rollback()
230.             print("发生错误:", e)
231.             return jsonify({"message": "处理数据时发生错误"}), 500
232.         finally:
233.             # 确保关闭连接
234.             conn.close()
235.     else:
236.         return jsonify({"message": "无效的数据"}), 400
238. # ----------------------------------------------------------------------------
239. # 插入一行
240. # ----------------------------------------------------------------------------
241. @app.route('/insertTable', methods=['POST'])
242. def insert_data():
243.     print("insertTable正在运行！")
244.     conn = get_db()
245.     cursor = conn.cursor()
246.     data = request.get_json()
247.     print("data = ", data)
248.     # 获得当前时间
249.     currenttime = datetime.now()
250.     formatted_time = currenttime.strftime("%Y-%m-%d")
251.     try:
252.         cursor.execute("SELECT MAX(id) FROM projectTable")
253.         max_id = cursor.fetchone()[0]  # 获取查询结果的第一列
254.         if max_id is None:
255.             max_id = 0  # 如果表中没有记录，则最大ID是0
256.         ids = max_id + 1
257.         insertData = {'id': ids, 'projectName': '在这里填写专案名称', 'submitPersonName': '',
258.                       'process': '', 'startTime': '2023-11-10', 'endTime': '2023-11-10', 'projectNeirong': '在这里填写专案内容'}
259.         insertData["endTime"] = formatted_time
260.         print(insertData)
261.         query = '''
262.                     INSERT INTO projectTable (projectName, neirong, submitPersonName, process, startTime, endTime, id)
263.                     VALUES (?, ?, ?, ?, ?, ?, ?)
264.                 '''
265.         cursor.execute(query, (
266.             insertData['projectName'],
267.             insertData['projectNeirong'],
268.             insertData['submitPersonName'],
269.             insertData['process'],
270.             insertData['startTime'],
271.             insertData['endTime'],
272.             insertData['id']
273.         ))
274.         conn.commit()
275.         cursor.execute("SELECT * FROM projectTable")
276.         rows = cursor.fetchall()
277.         show_data = []
278.         for row in rows:
279.             show_data.append({
280.                 'id': row[0], 'projectName': row[1], 'submitPersonName': row[2],
281.                 'Process': row[3], 'StartTime': row[4], 'EndTime': row[5],
282.                 'neirong': row[6]
283.             })
284.         print("插入操作已执行！")
285.         return jsonify({"message": "数据插入成功", "data": show_data})
286.     except Exception as e:
287.         return jsonify({"message": "处理数据时发生错误"}), 500
288.     finally:
289.         # 确保关闭连接
290.         conn.close()
292. # ----------------------------------------------------------------------------
293. #   主函数
294. # ----------------------------------------------------------------------------
295. if __name__ == '__main__':
296.     app.run(debug=True)

复制代码

二、html代码

1. <!DOCTYPE html>
2. <html lang="zh">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.     <title>专案管理页面</title>
7.     <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
8.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9.     <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
10.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
11.     <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
12. </head>
13. <div class="header">
14.     <h1>专案管理系统</h1>
15.     <span id="clock"></span>
16. </div>
17. <script>
18.     function updateClock() {
19.         const now = new Date();
20.         const hours = String(now.getHours()).padStart(2, '0');
21.         const minutes = String(now.getMinutes()).padStart(2, '0');
22.         const seconds = String(now.getSeconds()).padStart(2, '0');
23.         const currentTime = `${hours}:${minutes}:${seconds}`;
24.         document.getElementById('clock').textContent = currentTime;
25.     }
26.    
27.     setInterval(updateClock, 1000);
28.     updateClock(); // Initialize the clock immediately
29. </script>
31. <div class="container">
32.     <div class="form-container" id="login-form">
33.         <form id="projectForm" action="/" method="POST">
34.             <!-- 把专案名称更换为 -->
35.             <label for="projectname">专案名称:</label>
36.             <select id="projectname" name="projectname">
37.                     <!-- 选项由JS动态添加 -->
38.             </select>
39.             <!-- <label for="projectname">专案名称:</label>
40.             <input type="text" id="projectname" name="projectname"> -->
41.             <label for="personname">提交人:</label>
42.             <input type="text" id="personname" name="personname">
43.             <label for="stateSelection">专案状态:</label>
44.             <select id="stateSelection" name="stateSelection">
45.                     <option value=""></option>
46.                     <option value="Ongoing">正在进行</option>
47.                     <option value="shunyan">顺延（本周无进度）</option>
48.                     <option value="achieved">已经完成</option>
49.             </select>
50.             <button id="addRowBtn" type="button">增加一行</button>          <!-- 添加按钮-->
51.             <button type="submit">查询</button>
52.             <button type="button" onclick="clearFormat()">清除格式</button>         
53.         </form>
54.     </div>
55.     <div class="assiantFre_container">
56.         <table id="projectTable">
57.             <thead id="tableHeader">
58.             <!-- 动态生成的表头将插入这里 -->
59.             </thead>
60.             <tbody id="tableBody">
61.             <!-- 动态生成的表格数据将插入这里 -->
62.             </tbody>
63.         </table>
64.     </div>
65.     <script src="{{ url_for('static', filename='index.js') }}"></script>
66. </div>
67. </html>

复制代码

三、index.css

1. /* styles.css */
3. /* 基本样式重置 */
4. * {
5.     margin: 0;
6.     padding: 0;
7.     box-sizing: border-box;
8. }
10. /* h1 {
11.     text-align: center;
12.     margin-bottom: 20px;
13.     color: #444;
14. } */
16. .header {
17.     display: flex;
18.     justify-content: space-between;
19.     /* 将内容两端对齐 */
20.     align-items: center;
21.     /* 垂直居中对齐 */
22.     padding: 20px;
23.     /* 添加内边距 */
24.     background-color: #f8f8f8;
25.     /* 背景颜色 */
26. }
28. .header h1 {
29.     margin: 0 auto;
30.     /* 使标题居中 */
31. }
33. .header #clock {
34.     font-size: 24px;
35.     margin-left: 120px;
36.     color: white; /* 设置文字颜色 */
37.     background-color: #343a40; /* 设置背景颜色 */
38.     padding: 10px 20px; /* 添加内边距 */
39.     border-radius: 5px; /* 添加圆角 */
40.     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
41.     background: linear-gradient(135deg, #4285f4, #673ab7);
42.     animation: blink 1s infinite alternate; /* 添加闪烁动画 */
43. }
45. @keyframes blink {
46.     from {
47.         opacity: 1;
48.     }
49.     to {
50.         opacity: 0.5;
51.     }
52. }
54. .container {
55.     font-family: Arial, sans-serif;
56.     background-color: #f4f4f4;
57.     color: #333;
58.     line-height: 1.6;
59.     padding: 20px;
60.     border-radius: 8px;
61.     box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
62. }
64. .form-container {
65.     display: flex;
66.     /* 使用 Flexbox 布局 */
67.     align-items: center;
68.     /* 垂直居中对齐 */
69.     justify-content: flex-start;
70.     /* 控制子元素在容器内的水平排列方式 */
71.     gap: 20px;
72.     /* 控制每个控件之间的间距 */
73. }
75. form {
76.     display: flex;
77.     /* 使表单内的控件排列在一行 */
78.     gap: 20px;
79.     /* 控制控件之间的间距 */
80.     align-items: center;
81.     /* 垂直对齐控件 */
82. }
84. #projectname {
85.     padding: 10px;
86.     /* 设置内边距，让内容不与边框紧贴 */
87.     border: 1px solid #ccc;
88.     /* 设置边框颜色和样式 */
89.     border-radius: 4px;
90.     /* 设置圆角效果 */
91.     font-size: 16px;
92.     /* 设置字体大小 */
93.     width: 200px;
94.     /* 设置宽度为 200px */
95.     height: 40px;
96.     /* 设置高度为 40px */
97.     background-color: #fff;
98.     /* 设置背景颜色为白色 */
99. }
101. #projectname option {
102.     padding: 8px;
103.     /* 设置选项的内边距，避免文字与边缘过于紧密 */
104. }
106. /* #projectname {
107.     width: 200px;  /* 设置宽度 */
108. /* height: 40px;  设置高度} */
109. */ label {
110.     font-weight: bold;
111.     color: #555;
112.     margin: 0;
113.     /* 去掉默认的 margin */
114. }
116. input[type="text"] {
117.     padding: 10px;
118.     border: 1px solid #ccc;
119.     border-radius: 4px;
120.     font-size: 16px;
121.     width: 200px;
122.     /* 你可以调整输入框的宽度 */
123. }
125. #stateSelection {
126.     padding: 10px;
127.     /* 设置内边距，让内容不与边框紧贴 */
128.     border: 1px solid #ccc;
129.     /* 设置边框颜色和样式 */
130.     border-radius: 4px;
131.     /* 设置圆角效果 */
132.     font-size: 16px;
133.     /* 设置字体大小 */
134.     width: 200px;
135.     /* 设置宽度为 200px */
136.     height: 40px;
137.     /* 设置高度为 40px */
138.     background-color: #fff;
139.     /* 设置背景颜色为白色 */
140. }
142. #stateSelection option {
143.     padding: 8px;
144.     /* 设置选项的内边距，避免文字与边缘过于紧密 */
145. }
147. button {
148.     width: 100px;
149.     padding: 10px;
150.     background-color: #007bff;
151.     color: #fff;
152.     border: none;
153.     border-radius: 4px;
154.     font-size: 16px;
155.     cursor: pointer;
156.     transition: background-color 0.3s ease;
157. }
159. .assiantFre_container {
160.     color: #333;
161.     padding: 20px;
162.     /* 上下之间的距离 */
163.     border-radius: 8px;
164.     font-size: 20px;
165.     max-width: 100%;
166.     /* 修改最大宽度为100% */
167.     width: 100%;
168. }
170. table {
171.     width: 100%;
172.     /* 设置表格占据100%宽度 */
173.     border-collapse: collapse;
174.     /* 合并表格边框 */
175.     margin-top: 30px;
176.     /* 设置表格与上方元素的间距 */
177. }
179. table th,
180. table td {
181.     padding: 12px 15px;
182.     text-align: left;
183.     border: 1px solid #ddd;
184.     /* 为表头和单元格添加边框 */
185.     word-wrap: break-word;
186.     /* 自动换行，避免内容溢出 */
187.     white-space: normal;
188.     /* 允许正常换行 */
189. }
191. table th {
192.     background-color: #f2f2f2;
193.     font-weight: bold;
194.     color: #444;
195. }
197. table tr:nth-child(even) {
198.     background-color: #f9f9f9;
199. }
201. table tr:hover {
202.     background-color: #e9e9e9;
203. }

复制代码

四、js代码

1. console.log("index.js 文件已加载");
3. document.addEventListener('DOMContentLoaded', function () {
4.     /*********************************************
5.         获取表单和表格元素
6.     *********************************************/
7.     const form = document.getElementById('projectForm');
8.     const tableHeader = document.getElementById('tableHeader');
9.     const tableBody = document.getElementById('tableBody');
10.     const addRowbtn = document.getElementById('addRowBtn');
12.     /*********************************************
13.         创建单元格的函数
14.     *********************************************/
15.     function createTableCell(content) {
16.         const td = document.createElement('td');
17.         td.textContent = content;  // 设置单元格的文本内容
18.         td.setAttribute('contenteditable', 'true');  // 设置单元格可编辑
19.         return td;
20.     }
22.     /*********************************************
23.         控制显示表格的函数
24.     *********************************************/
25.     function populateTable(data) {
26.         tableHeader.innerHTML = `
27.             <tr>
28.                 <th>ID</th>
29.                 <th>专案名称</th>
30.                 <th>专案内容</th>
31.                 <th>提交人</th>
32.                 <th>状态</th>
33.                 <th>项目起始日期</th>
34.                 <th>更改时间</th>
35.                 <th>操作</th> <!-- 用于显示删除按钮 -->
36.             </tr>
37.         `;
39.         data.forEach(function (row) {
40.             const tr = document.createElement('tr');  // 创建一行
41.             // console.log("row_neirong", row.neirong)
42.             const createTableCell = (content) => {
43.                 const td = document.createElement('td');
44.                 td.innerHTML = content;  // 使用 innerHTML 插入带有 HTML 标签的内容
45.                 td.contentEditable = true;  // 确保单元格是可编辑的
46.                 return td;
47.             };
49.             tr.appendChild(createTableCell(row.id));
50.             tr.appendChild(createTableCell(row.projectName));
51.             tr.appendChild(createTableCell(row.neirong));
52.             tr.appendChild(createTableCell(row.submitPersonName));
53.             tr.appendChild(createTableCell(row.Process));
54.             tr.appendChild(createTableCell(row.StartTime));
55.             tr.appendChild(createTableCell(row.EndTime));
57.             // 创建删除按钮的单元格
58.             const deleteCell = document.createElement('td');
59.             const deleteButton = document.createElement('button');
60.             deleteButton.textContent = '删除'; // 设置按钮文本
61.             deleteButton.classList.add('delete-btn'); // 添加样式类，可以自定义按钮样式
63.             // 为删除按钮绑定点击事件，删除当前行
64.             deleteButton.addEventListener('click', function (event) {
65.                 event.preventDefault();
66.                 const confirmDelete = window.confirm('是否确定删除这一行？');
67.                 if (confirmDelete) {
68.                     const tr = deleteButton.closest('tr');  // 获取当前按钮所在的行
69.                     const id = tr.querySelector('td:nth-child(1)').textContent.trim()
70.                     console.log(id)
71.                     const deleteData = { 'flag': true, 'id': id }
72.                     tr.remove();  // 删除该行
73.                     fetch('/delectable', {
74.                         method: 'POST',
75.                         headers: {
76.                             'Content-Type': 'application/json'
77.                         },
78.                         body: JSON.stringify(deleteData)
79.                     })
80.                         .then(response => response.json())
81.                         .then(data => {
82.                             console.log('成功发送数据到delete接口:', data);
83.                         })
84.                         .catch(error => {
85.                             console.error('失败发送数据到delete接口:', error);
86.                         });
88.                 }
89.             });
91.             deleteCell.appendChild(deleteButton);  // 将按钮添加到单元格中
92.             tr.appendChild(deleteCell);  // 将单元格添加到行中
94.             tableBody.appendChild(tr);  // 将完整的行添加到表格主体
95.         });
96.     }
98.     /*********************************************
99.         默认显示当前表中的数据
100.     *********************************************/
101.     fetch('/default', {
102.         method: 'POST',
103.         headers: {
104.             'Content-Type': 'application/json'
105.         },
106.     })
107.         .then(response => response.json())  // 解析返回的 JSON 数据
108.         .then(data => {
109.             const defaultData = data;
110.             // 初始化表格
111.             console.log(defaultData)
112.             populateTable(defaultData);
113.         }).catch(error => {
114.             console.error('Error:', error);
115.         });
117.     /*********************************************
118.         筛选条件接口
119.     *********************************************/
120.     fetch('/projectNameOptions', {
121.         method: 'POST',
122.         headers: {
123.             'Content-Type': 'application/json'
124.         },
125.     })
126.         .then(response => {
127.             if (!response.ok) {
128.                 throw new Error('网络响应不正常');
129.             }
130.             return response.json();
131.         })
132.         .then(data => {
133.             let exeuted = false
134.             console.log("正在查询")
135.             const selectElement = document.querySelector('select[id="projectname"]'); // 使用 id 属性选择器
136.             // 添加默认选项
137.             const defaultOption = document.createElement('option');
138.             defaultOption.value = "";
139.             defaultOption.textContent = "请选择项目";
140.             selectElement.appendChild(defaultOption);
141.             data.projects.forEach(projectName => {
142.                 const option = document.createElement('option');
143.                 option.value = projectName;
144.                 option.textContent = projectName;        //
145.                 selectElement.appendChild(option);       //
146.             });
147.             // 监听 select 元素的 change 事件
148.             selectElement.addEventListener('change', function () {
149.                 const SelectedProjectname = selectElement.value;  // 获取当前选中的值
150.                 console.log('当前选中的项目名称:', SelectedProjectname);
151.                 search(SelectedProjectname);  // 调用 search 函数并传递选中的值
152.                 exeuted = true
153.             });
154.             if (!exeuted){
155.                 search(defaultOption.value)
156.             }
157.         })
158.         .catch(error => {
159.             console.error(error);
160.         });
162.     function search(SelectedProjectname) {
163.         // 查询
164.         if (form) {
165.             form.addEventListener('submit', function (event) {
166.                 event.preventDefault();
167.                 console.log("查询表单已提交", SelectedProjectname);
168.                 const projectName = SelectedProjectname
169.                 const personname = document.getElementById('personname').value;
170.                 const stateSelectionValue = document.getElementById('stateSelection').value;
172.                 const formData = {
173.                     projectname: projectName,  // 获取专案名称
174.                     personname: personname,   // 获取提交人
175.                     stateSelectionValue: stateSelectionValue       // 获取专案进度
176.                 };
178.                 // 将对象转换为 JSON 字符串
179.                 const JsonData = JSON.stringify(formData);
180.                 console.log("JsonData:", JsonData);
182.                 fetch('/searchfor', {
183.                     method: 'POST',
184.                     headers: {
185.                         'Content-Type': 'application/json',  // 设置请求的内容类型为 JSON
186.                     },
187.                     body: JsonData
188.                 })
189.                     .then(response => response.json())  // 解析响应的 JSON 数据
190.                     .then(data => {
191.                         console.log("searchfor被触发！！");  // 处理接收到的数据
192.                         console.log('searchfordata:', data);  // 处理接收到的数据
193.                         // 模拟查询结果
194.                         const queryResult = data
195.                         tableHeader.innerHTML = ''
196.                         tableBody.innerHTML = ''
197.                         // 显示表格
198.                         populateTable(queryResult);
199.                     })
200.                     .catch(error => {
201.                         console.error('发送数据时发生错误:', error);  // 错误处理
202.                     });
203.             })
204.         }
205.         else
206.             console.log("不存在form！")
207.     }
209.     /*********************************************
210.         插入一行
211.     *********************************************/
212.     addRowbtn.addEventListener('click', function () {
213.         event.preventDefault();
214.         console.log("click提交事件被触发了");
216.         fetch('/insertTable', {
217.             method: 'POST',
218.             headers: {
219.                 'Content-Type': 'application/json',  // 设置请求的内容类型为 JSON
220.             },
221.             body: JSON.stringify({
222.                 name: 'John Doe',
223.                 age: 30,
224.             })
225.         })
226.             .then(response => response.json())  // 解析响应的 JSON 数据
227.             .then(data => {
228.                 const newData = data['data'];  // 想要插入的新数据
229.                 console.log('newdata:', newData);  // 处理接收到的数据
230.                 tableHeader.innerHTML = ''
231.                 tableBody.innerHTML = ''
232.                 // 填充表格
233.                 populateTable(newData);
234.             })
235.             .catch(error => {
236.                 console.error('发送数据时发生错误:', error);  // 错误处理
237.             });
238.     });
240.     /*********************************************
241.         保存当前表格到数据库
242.     *********************************************/
243.     window.addEventListener('keydown', function (event) {
244.         // 检查是否按下了 Ctrl + S
245.         if (event.ctrlKey && event.key === 's') {
246.             // 阻止默认行为（防止浏览器弹出保存对话框）
247.             event.preventDefault();
248.             console.log("表格信息已保存！");
249.             const jsonData = getTableDataAsJson(tableBody)              // 从页面上获得当前所有的项目
250.             console.log(jsonData)
251.             if (jsonData === '[]' || jsonData.length === 0) {
252.                 console.log("jsonData 是空的");
253.             } else {
254.                 console.log("jsonData 不是空的");
255.                 fetch('/saveData', {
256.                     method: 'POST',
257.                     headers: {
258.                         'Content-Type': 'application/json'
259.                     },
260.                     body: jsonData
261.                 })
262.                     .then(response => response.json())
263.                     .then(data => {
264.                         console.log('成功发送数据到后端:', data);
265.                     })
266.                     .catch(error => {
267.                         console.error('发送数据失败:', error);
268.                     });
269.             }
271.         }
272.     });
273.     function getTableDataAsJson(tableBody) {
274.         const rows = tableBody.querySelectorAll('tr');  // 获取所有的行
275.         const tableData = [];
277.         rows.forEach(function (row) {
278.             const cells = row.querySelectorAll('td');  // 获取每一行的所有单元格
280.             if (cells.length === 0) return;             // 如果这一行是空的，则跳过
281.             const rowData = {
282.                 id: cells[0].textContent.trim(),
283.                 projectName: cells[1].textContent.trim(),
284.                 projectNeirong: cells[2].innerHTML.trim(),
285.                 submitPersonName: cells[3].textContent.trim(),
286.                 process: cells[4].textContent.trim(),
287.                 startTime: cells[5].textContent.trim(),
288.                 endTime: cells[6].textContent.trim()
289.             };
290.             tableData.push(rowData);  // 将每一行的数据添加到数组中
291.         });
293.         // 将数组转换为 JSON 格式并返回
294.         return JSON.stringify(tableData);
295.     }
297. });
299. function clearFormat() {
300.     var table = document.getElementById('projectTable');
301.     var selection = window.getSelection();
302.     var selectedText = selection.toString();
304.     if (selectedText.length === 0) {
305.         alert("请先选择要清除格式的文本。");
306.         return;
307.     }
309.     // 获取选中的范围
310.     var range = selection.getRangeAt(0);
311.     var startContainer = range.startContainer;
312.     var endContainer = range.endContainer;
314.     // 创建一个新的文本节点，替换选中的内容
315.     var plainText = selectedText.replace(/<[^>]*>/g, '');
316.     var textNode = document.createTextNode(plainText);
318.     // 替换选中的内容
319.     range.deleteContents();
320.     range.insertNode(textNode);
322.     // 重新设置选中的范围
323.     range.setStart(textNode, 0);
324.     range.setEnd(textNode, plainText.length);
325.     selection.removeAllRanges();
326.     selection.addRange(range);
327. }

复制代码