<s:select>标签里面值保存在js当中注意点

本文详细介绍了在Struts2框架中如何正确使用select标签来展示下拉列表,并解释了如何确保action中的值与下拉选项的value属性相匹配的方法。

在struts2的select标签里面如下:

<s:select list="timeList" label="开始时间:" id="resForm1_bookTimeStart"
    listKey="tid" listValue="detial" name="bookTimeStartId" value="tid" />

这实际上在浏览器中显示时为:

<select name="bookTimeEndId" id="resForm1_bookTimeEnd">
    <option value="1">00:00</option>
    <option value="2">00:30</option>
    <option value="3">01:00</option>
    <option value="4">01:30</option>
</select>
比如说这样的值,在用js获取时,写成
document.getElementById('resForm1_bookTimeStart').value = "${bookTimeStartId}";

要注意的地方是在action里面的bookTimeStartId和option里面的value值要对应,也就是说bookTimeStartId里的值要是1、2、3、4,而不是00:00这样子的。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>员工借调记录管理</title> <link rel="stylesheet" href="../../css/pageshow.css" /> <style> /* 全局样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } body { background-color: #f9fafb; color: #374151; line-height: 1.5; } /* 容器样式 */ .container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 16px; padding-top: 24px; padding-bottom: 24px; } /* 标签页样式 */ .tab-container { border-bottom: 1px solid #e5e7eb; margin-bottom: 16px; } .tab-group { width: 100%; max-width: 1400px; display: flex; } .tab-btn { padding: 12px 8px; border-bottom: 2px solid transparent; font-size: 14px; cursor: pointer; background: none; border: none; outline: none; transition: all 0.2s ease; } .tab-active { border-bottom-color: #1677ff; color: #1677ff; font-weight: 500; } .tab-inactive { color: #6b7280; } .tab-inactive:hover { color: #4b5563; } /* 卡片容器样式 */ .card { background-color: #ffffff; padding: 0px; border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); margin-bottom: 16px; } /* 搜索区域样式 */ .search-group { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* 表单控件样式 */ .form-control { border: 1px solid #d1d5db; border-radius: 6px; padding: 10px 16px; font-size: 14px; transition: all 0.2s ease; } .form-control:focus { outline: none; border-color: #1677ff; box-shadow: 0 0 0 1px #1677ff; } /* 必填项样式 */ .required-field { position: relative; } .required-field::after { content: "*"; color: #ff4d4f; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); } /* 验证失败样式 */ .input-error { border-color: #ff4d4f !important; } .select-wrapper { position: relative; } .input-wrapper { position: relative; } .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 14px; pointer-events: none; } .text-input { padding-left: 32px; width: 192px; } .date-input { padding: 8px 12px; } /* 借调原因输入框样式 */ .reason-input { width: 200px; } /* 按钮样式 */ .btn { padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; } .btn-primary { background-color: #1677ff; color: #ffffff; } .btn-primary:hover { background-color: #0966e2; } .btn-secondary { background-color: #ffffff; border-color: #d1d5db; color: #4b5563; } .btn-secondary:hover { background-color: #f3f4f6; } .btn-green { background-color: #0FC6C2; color: #ffffff; } .btn-green:hover { background-color: #0da8a5; } .btn-export { background-color: #2F80ED; color: #ffffff; width: 84px; } .btn-export:hover { background-color: #2569d1; } .btn-text-warning { color: #faad14; background: none; border: none; padding: 0; font-size: 14px; cursor: pointer; } .btn-text-warning:hover { color: #d48806; } .btn-text-danger { color: #ff4d4f; background: none; border: none; padding: 0; font-size: 14px; cursor: pointer; } .btn-text-danger:hover { color: #d9363e; } .btn-text-green { color: #0FC6C2; background: none; border: none; padding: 0; font-size: 14px; cursor: pointer; } .btn-text-green:hover { color: #0da8a5; } /* 表格样式 */ .gridview { width: 100%; border-collapse: collapse; } .gridview th { padding: 6px 8px; text-align: left; font-size: 12px; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; background-color: #f9fafb; } .gridview td { padding: 6px 8px; font-size: 12px; color: #6b7280; white-space: nowrap; } .gridview tr:nth-child(even) { background-color: #f9fafb; } .gridview input[type="datetime-local"], .gridview select, .gridview input[type="text"] { border: 1px solid #d1d5db; border-radius: 6px; padding: 4px 6px; font-size: 12px; } .gridview input[type="datetime-local"]:focus, .gridview select:focus, .gridview input[type="text"]:focus { outline: none; border-color: #1677ff; box-shadow: 0 0 0 1px #1677ff; } /* 自定义样式 */ .small-circle { width: 12px; height: 12px; border-radius: 50%; background-color: #22c55e; display: inline-block; } .absolute-btn { position: absolute; right: 200px; top: 101px; } /* 响应式调整 */ @media (max-width: 1000px) { .search-group { flex-direction: column; align-items: stretch; } .text-input { width: auto; } .reason-input { width: auto; } .absolute-btn { position: static; margin-top: 12px; } .gridview { display: block; overflow-x: auto; } } </style> <script> // 移除借调原因输入框的 required 属性自动验证 // 仅在击 Submit 按钮时验证 function validateReason(btn) { // 找到当前行的借调原因输入框 const row = btn.closest('tr'); const reasonInput = row.querySelector('.reason-input'); // 清除之前的错误样式 reasonInput.classList.remove('input-error'); // 验证是否为空 if (!reasonInput.value.trim()) { reasonInput.classList.add('input-error'); alert('借调原因不能为空,请填写!'); reasonInput.focus(); return false; } return true; } window.onload = function() { // 绑定表格内所有 Submit 按钮的击事件 const submitBtns = document.querySelectorAll('#gvLendRecords .btn-text-green'); submitBtns.forEach(btn => { btn.onclick = function() { return validateReason(this); }; }); }; </script> </head> <body> <form id="form1" runat="server"> <div class="container"> <!-- 标签页切换 --> <div class="tab-container"> <div class="tab-group"> <asp:Button ID="btnLendTab" runat="server" Text="Lend Settings" CssClass="tab-btn tab-active" OnClick="btnLendTab_Click" /> <asp:Button ID="btnBorrowTab" runat="server" Text="Borrowing and lending records" CssClass="tab-btn tab-inactive" OnClick="btnBorrowTab_Click" /> </div> </div> <!-- 借出记录面板 --> <asp:Panel ID="pnlLendRecords" runat="server"> <!-- 搜索区域 --> <div class="card"> <div class="search-group"> <div class="select-wrapper"> <asp:DropDownList ID="ddlFactory" runat="server" CssClass="form-control"> <asp:ListItem Text="Dept" Value=""></asp:ListItem> <asp:ListItem Text="AG1" Value="AG1"></asp:ListItem> <asp:ListItem Text="AG2" Value="AG2"></asp:ListItem> <asp:ListItem Text="AG6" Value="AG6"></asp:ListItem> <asp:ListItem Text="AG7" Value="AG7"></asp:ListItem> <asp:ListItem Text="AG8" Value="AG8"></asp:ListItem> <asp:ListItem Text="AG9" Value="AG9"></asp:ListItem> <asp:ListItem Text="AL2" Value="AL2"></asp:ListItem> <asp:ListItem Text="AL5" Value="AL5"></asp:ListItem> <asp:ListItem Text="AL6" Value="AL6"></asp:ListItem> <asp:ListItem Text="AL7" Value="AL7"></asp:ListItem> <asp:ListItem Text="AL8" Value="AL8"></asp:ListItem> <asp:ListItem Text="AL9" Value="AL9"></asp:ListItem> <asp:ListItem Text="L03" Value="L03"></asp:ListItem> <asp:ListItem Text="L08" Value="L08"></asp:ListItem> <asp:ListItem Text="L12" Value="L12"></asp:ListItem> <asp:ListItem Text="L23" Value="L23"></asp:ListItem> <asp:ListItem Text="L33" Value="L33"></asp:ListItem> <asp:ListItem Text="LMC" Value="LMC"></asp:ListItem> </asp:DropDownList> </div> <div class="input-wrapper"> <asp:TextBox ID="txtEmpIdLend" runat="server" Placeholder="Enter the badge" CssClass="form-control text-input"></asp:TextBox> <div class="input-icon"> <i class="fa fa-search"></i> </div> </div> <asp:Button ID="btnSearchLend" runat="server" Text="Search" CssClass="btn btn-primary" OnClick="btnSearchLend_Click" /> <asp:Button ID="btnRefreshLend" runat="server" Text="刷新" Visible="false" CssClass="btn btn-secondary" OnClick="btnRefreshLend_Click" /> <asp:Button ID="btnAddLend" runat="server" Text="+ Batch Addition" CssClass="btn btn-green" OnClick="btnAddLend_Click" /> <asp:Button ID="btnDownload" runat="server" Text="Download Template" Visible="false" CssClass="btn btn-secondary" OnClick="btnDownload_Click" /> <asp:FileUpload ID="FileUp" runat="server" Text="Select file" CssClass="btn btn-secondary" Visible="false"/> <asp:Button ID="btn_ExInto_pass" runat="server" Text="Check" OnClick="btn_ExInto_pass_Click" CssClass="btn btn-secondary" Visible="false"/> <asp:Button ID="btnUpdate" runat="server" Text="Submit" Visible="false" CssClass="btn btn-green absolute-btn" OnClick="btnUpdate_Click" /> </div> </div> <!-- 表格区域 --> <div class="card"> <asp:GridView ID="gvLendRecords" runat="server" AutoGenerateColumns="false" CssClass="gridview" OnRowCommand="gvLendRecords_RowCommand"> <Columns> <asp:BoundField DataField="Id" HeaderText="ID" /> <asp:BoundField DataField="EmployeeName" HeaderText="Name" /> <asp:BoundField DataField="EmployeeId" HeaderText="Badge" /> <asp:BoundField DataField="Workday_ID" HeaderText="Workday_ID" /> <asp:BoundField DataField="dept_code" HeaderText="Dept" /> <asp:TemplateField HeaderText="Borrow Plant"> <ItemTemplate> <asp:TextBox ID="ddlTargetFactory" runat="server"></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Borrow Dept"> <ItemTemplate> <asp:DropDownList ID="ddlTargetDept" runat="server" CssClass="form-control"> <asp:ListItem Text="Dept" Value=""></asp:ListItem> <asp:ListItem Text="AG1" Value="AG1"></asp:ListItem> <asp:ListItem Text="AG2" Value="AG2"></asp:ListItem> <asp:ListItem Text="AG6" Value="AG6"></asp:ListItem> <asp:ListItem Text="AG7" Value="AG7"></asp:ListItem> <asp:ListItem Text="AG8" Value="AG8"></asp:ListItem> <asp:ListItem Text="AG9" Value="AG9"></asp:ListItem> <asp:ListItem Text="AL2" Value="AL2"></asp:ListItem> <asp:ListItem Text="AL5" Value="AL5"></asp:ListItem> <asp:ListItem Text="AL6" Value="AL6"></asp:ListItem> <asp:ListItem Text="AL7" Value="AL7"></asp:ListItem> <asp:ListItem Text="AL8" Value="AL8"></asp:ListItem> <asp:ListItem Text="AL9" Value="AL9"></asp:ListItem> <asp:ListItem Text="L03" Value="L03"></asp:ListItem> <asp:ListItem Text="L08" Value="L08"></asp:ListItem> <asp:ListItem Text="L12" Value="L12"></asp:ListItem> <asp:ListItem Text="L23" Value="L23"></asp:ListItem> <asp:ListItem Text="L33" Value="L33"></asp:ListItem> <asp:ListItem Text="LMC" Value="LMC"></asp:ListItem> </asp:DropDownList> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Start Date"> <ItemTemplate> <asp:TextBox ID="txtStartDate" runat="server" type="datetime-local" CssClass="form-control"> </asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="End Date"> <ItemTemplate> <asp:TextBox ID="txtEndDate" runat="server" type="datetime-local" CssClass="form-control"> </asp:TextBox> </ItemTemplate> </asp:TemplateField> <%-- 新增借调原因列(仅击Submit验证) --%> <asp:TemplateField HeaderText="借调原因<span style='color: #ff4d4f;'>*</span>"> <ItemTemplate> <div class="required-field"> <asp:TextBox ID="txtLendReason" runat="server" CssClass="form-control reason-input" placeholder="请填写借调原因" maxlength="200"></asp:TextBox> </div> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Operation"> <ItemTemplate> <asp:Button ID="btnModify" runat="server" Text="Submit" CssClass="btn-text-green" CommandName="Modify" CommandArgument='<%# Eval("Id") %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> <div> <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" CssClass="gridview" DataKeyNames="Dept,Plant" AutoGenerateEditButton="False" AllowPaging="True" PageSize="20" Visible="false" OnPageIndexChanging="GridView2_PageIndexChanging"> <Columns> <asp:BoundField DataField="Plant" HeaderText="Plant" ReadOnly="True" /> <asp:BoundField DataField="Name" HeaderText="Name" ReadOnly="True"/> <asp:BoundField DataField="Badge" HeaderText="Badge" ReadOnly="True"/> <asp:BoundField DataField="Dept" HeaderText="Dept" ReadOnly="True"/> <asp:BoundField DataField="Borrow Plant" HeaderText="Borrow Plant" ReadOnly="True"/> <asp:BoundField DataField="Borrow Dept" HeaderText="Borrow Dept" ReadOnly="True"/> <asp:BoundField DataField="Start Date" HeaderText="Start Date" ReadOnly="True" DataFormatString="{0:yyyy-MM-dd HH:mm}" HtmlEncode="False"/> <asp:BoundField DataField="End Date" HeaderText="End Date" ReadOnly="True" DataFormatString="{0:yyyy-MM-dd HH:mm}" HtmlEncode="False"/> <%-- 展示借调原因 --%> <asp:BoundField DataField="借调原因" HeaderText="借调原因" ReadOnly="True"/> </Columns> <HeaderStyle Wrap="False" /> </asp:GridView> </div> </asp:Panel> <!-- 借入记录面板 --> <asp:Panel ID="pnlBorrowRecords" runat="server" Visible="false"> <!-- 搜索区域 --> <div class="card"> <div class="search-group"> <div class="select-wrapper"> <asp:DropDownList ID="deptRecord" runat="server" CssClass="form-control"> <asp:ListItem Text="Dept" Value=""></asp:ListItem> <asp:ListItem Text="AG1" Value="AG1"></asp:ListItem> <asp:ListItem Text="AG2" Value="AG2"></asp:ListItem> <asp:ListItem Text="AG6" Value="AG6"></asp:ListItem> <asp:ListItem Text="AG7" Value="AG7"></asp:ListItem> <asp:ListItem Text="AG8" Value="AG8"></asp:ListItem> <asp:ListItem Text="AG9" Value="AG9"></asp:ListItem> <asp:ListItem Text="AL2" Value="AL2"></asp:ListItem> <asp:ListItem Text="AL5" Value="AL5"></asp:ListItem> <asp:ListItem Text="AL6" Value="AL6"></asp:ListItem> <asp:ListItem Text="AL7" Value="AL7"></asp:ListItem> <asp:ListItem Text="AL8" Value="AL8"></asp:ListItem> <asp:ListItem Text="AL9" Value="AL9"></asp:ListItem> <asp:ListItem Text="L03" Value="L03"></asp:ListItem> <asp:ListItem Text="L08" Value="L08"></asp:ListItem> <asp:ListItem Text="L12" Value="L12"></asp:ListItem> <asp:ListItem Text="L23" Value="L23"></asp:ListItem> <asp:ListItem Text="L33" Value="L33"></asp:ListItem> <asp:ListItem Text="LMC" Value="LMC"></asp:ListItem> </asp:DropDownList> </div> <div class="input-wrapper"> <asp:TextBox ID="txtEmpIdBorrow" runat="server" Placeholder="Enter the badge" CssClass="form-control text-input"></asp:TextBox> <div class="input-icon"> <i class="fa fa-search"></i> </div> </div> <asp:TextBox ID="txtStartDe" runat="server" CssClass="form-control date-input" type="date"> </asp:TextBox> <asp:TextBox ID="txtEndtDe" runat="server" CssClass="form-control date-input" type="date"> </asp:TextBox> <asp:Button ID="btnSearchBorrow" runat="server" Text="Search" CssClass="btn btn-primary" OnClick="btnSearchBorrow_Click" /> <asp:Button ID="btnExport" runat="server" Text="Download" CssClass="btn btn-export" OnClick="btnExport_Click" /> </div> </div> <!-- 表格区域 --> <div class="card"> <asp:GridView ID="gvBorrowRecords" runat="server" AutoGenerateColumns="false" DataKeyNames="ID" CssClass="gridview" OnRowEditing="gvBorrowRecords_RowEditing" OnRowCancelingEdit="gvBorrowRecords_RowCancelingEdit" OnRowUpdating="gvBorrowRecords_RowUpdating" OnRowCommand="gvBorrowRecords_RowCommand"> <Columns> <asp:BoundField DataField="Id" HeaderText="ID" ReadOnly="True"/> <asp:BoundField DataField="Name" HeaderText="Name" ReadOnly="True" /> <asp:BoundField DataField="Badge" HeaderText="Badge" ReadOnly="True"/> <asp:BoundField DataField="Plant" HeaderText="Lending Plant" ReadOnly="True"/> <asp:BoundField DataField="Dept" HeaderText="Lending Dept" ReadOnly="True"/> <asp:TemplateField HeaderText="Borrowing Dept"> <ItemTemplate> <asp:Label ID="lblDept_Temp" runat="server" Text='<%# Bind("Dept_Temp") %>'></asp:Label> </ItemTemplate> <EditItemTemplate> <asp:TextBox ID="Dept_Temp" runat="server" Text='<%# Bind("Dept_Temp") %>' CssClass="form-control"></asp:TextBox> </EditItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Start Date"> <ItemTemplate> <asp:Label ID="lblStart_Date" runat="server" Text='<%# Eval("Start_Date") != DBNull.Value ? string.Format("{0:yyyy-MM-dd HH:mm}", Eval("Start_Date")) : "" %>'></asp:Label> </ItemTemplate> <EditItemTemplate> <asp:TextBox ID="Start_Date" runat="server" type="datetime-local" CssClass="form-control" Text='<%# Eval("Start_Date") != DBNull.Value ? string.Format("{0:yyyy-MM-ddTHH:mm}", Eval("Start_Date")) : "" %>'></asp:TextBox> </EditItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="End Date"> <ItemTemplate> <asp:Label ID="lblFinish_Date" runat="server" Text='<%# Eval("Finish_Date") != DBNull.Value ? string.Format("{0:yyyy-MM-dd HH:mm}", Eval("Finish_Date")) : "" %>'></asp:Label> </ItemTemplate> <EditItemTemplate> <asp:TextBox ID="Finish_Date" runat="server" type="datetime-local" CssClass="form-control" Text='<%# Eval("Finish_Date") != DBNull.Value ? string.Format("{0:yyyy-MM-ddTHH:mm}", Eval("Finish_Date")) : "" %>'></asp:TextBox> </EditItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Support Date"> <ItemTemplate> <asp:Label ID="lblSupport_Date" runat="server" Text='<%# Bind("Support_Date") %>'></asp:Label> </ItemTemplate> <EditItemTemplate> <asp:TextBox ID="Support_Date" runat="server" Text='<%# Bind("Support_Date") %>' CssClass="form-control"></asp:TextBox> </EditItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Operation"> <ItemTemplate> <asp:LinkButton ID="lnkEdit" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" CssClass="btn-text-warning mr-3"></asp:LinkButton> <asp:Button ID="btnReturn" runat="server" Text="Delete" CssClass="btn-text-danger" CommandName="Return" CommandArgument='<%# Eval("Id") %>' /> </ItemTemplate> <EditItemTemplate> <asp:LinkButton ID="lnkUpdate" runat="server" CommandName="Update" Text="Update" CssClass="btn-text-warning mr-2"></asp:LinkButton> <asp:LinkButton ID="lnkCancel" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" CssClass="btn-text-warning mr-1"></asp:LinkButton> </EditItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </asp:Panel> </div> </form> </body> </html>优化界面
最新发布
12-16
{% extends 'layout.html' %} {% block title %}Profile{% endblock %} {% block content %} <title>设备管理界面</title> <style> /* ===== 基础样式 ===== */ body { font-family: "Microsoft YaHei", sans-serif; font-size: 14px; font-weight: bold; background-color: #f5f7fa; margin: 0; padding: 0; color: #333; line-height: 1.5; } /* ===== 容器布局 ===== */ .container { display: flex; min-height: 100vh; } .main-panel { flex: 1; display: flex; flex-direction: column; border: 1px solid #dcdfe6; border-radius: 4px; background-color: #fff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin: 10px; } /* ===== 标签页样式 ===== */ .tabs { display: flex; background-color: #f5f7fa; border-bottom: 1px solid #dcdfe6; } .tab { padding: 12px 20px; cursor: pointer; border: none; background-color: transparent; color: #606266; font-size: 14px; font-weight: bold; transition: all 0.3s; position: relative; } .tab:hover { color: #409eff; } .tab.active { color: #409eff; background-color: #fff; border-bottom: 2px solid #409eff; } .tab a { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 5px; } /* ===== 分割面板 ===== */ .split-panel { display: flex; flex: 1; } .split-left { width: 100%; padding: 15px; } /* ===== 内容区域 ===== */ .tab-content { flex: 1; overflow-y: auto; } /* ===== 部分样式 ===== */ .section { margin-bottom: 20px; padding: 15px; border: 1px solid #ebeef5; border-radius: 4px; background-color: #fafafa; } .section-title { font-weight: bold; margin-bottom: 10px; color: #303133; font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid #ebeef5; } /* ===== 表单行样式 ===== */ .form-row { display: flex; align-items: center; font-weight: 900; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; } .form-row label { min-width: 120px; color: #606266; font-size: 14px; } /* ===== 输入控件样式 ===== */ input, select { padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; font-weight: bold; color: #606266; transition: border-color 0.3s; background-color: #fff; } input:focus, select:focus { outline: none; border-color: #409eff; box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); } input:disabled { background-color: #f5f7fa; color: #c0c4cc; cursor: not-allowed; } /* ===== 按钮样式 ===== */ button { padding: 8px 15px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.3s; background-color: #fff; color: #606266; } button:hover { color: #409eff; border-color: #c6e2ff; background-color: #ecf5ff; } button:active { transform: scale(0.98); } /* ===== 按钮组样式 ===== */ .button-group { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; } .button-group1 { display: flex; justify-content: flex-start; gap: 10px; margin-top: 10px; } /* ===== 控制面板样式 ===== */ .control-panel { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px; } .control-item { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #ebeef5; border-radius: 4px; background-color: #fff; } .control-item label { display: flex; align-items: center; gap: 5px; margin: 0; white-space: nowrap; } /* ===== 底部信息样式 ===== */ .bottom-info { font-size: 12px; font-weight: bold; color: #909399; margin-top: 10px; padding: 10px 15px; background-color: #f5f7fa; border-top: 1px solid #ebeef5; } /* ===== 响应式设计 ===== */ @media (max-width: 1200px) { .form-row { flex-direction: column; align-items: flex-start; } .form-row label { min-width: auto; margin-bottom: 5px; } .control-panel { flex-direction: column; } } @media (max-width: 768px) { .container { flex-direction: column; } .tabs { flex-wrap: wrap; } .tab { flex: 1; min-width: 120px; text-align: center; } .split-panel { flex-direction: column; } .split-left { width: 100%; } } /* ===== 特定布局调整 ===== */ .form-row > div { display: flex; flex-direction: column; margin-right: 20px; margin-bottom: 10px; } .form-row > div .section-title { margin-bottom: 8px; } .form-row > div .form-row { margin-bottom: 8px; } </style> <body> <div class="container"> <div class="main-panel"> <div class="tabs"> <div class="tab active"><a href="{{ url_for('home') }}"><i class="fas fa-sign-out-alt"></i>基本参数</a></div> <div class="tab"><a href="{{ url_for('act') }}"><i class="fas fa-sign-out-alt"></i>无线参数</a></div> <div class="tab"><a href="{{ url_for('scan') }}"><i class="fas fa-sign-out-alt"></i>扫频结果/参数</a></div> </div> <div class="split-panel"> <div class="split-left"> <div class="tab-content"> <div class="section"> <div class="section-title">状态</div> <div class="button-group"> <button>查询</button> <button>查询全部</button> </div> </div> <div class="section"> <div class="form-row"> <label>版本号:</label> <input type="text" style="width: 245px;"> <button>查询</button> <label>RX衰减:</label> <input type="text"> <button>查询</button> <button>设置</button> </div> <div class="form-row"> <label>4G干扰扫描10MHz时间:</label> <input type="text"> <label>4G干扰不扫描10MHz时间:</label> <input type="text"> <button>查询</button> <button>设置</button> </div> </div> <div class="section"> <div class="section-title">相位差查询设置</div> <div class="form-row"> <label>主频段:</label> <input type="text" style="background-color:#eaeaea;width: 750px;"> </div> <div class="form-row"> <label>band34与主同步频段的相位差:</label> <input type="text"> <label>band39与主同步频段的相位差:</label> <input type="text"> </div> <div class="form-row"> <label>band34与主同步频段的相位差:</label> <input type="text"> <label>band39与主同步频段的相位差:</label> <input type="text"> </div> <div class="form-row"> <label>band34与主同步频段的相位差:</label> <input type="text"> <label>band39与主同步频段的相位差:</label> <input type="text"> </div> <div class="form-row"> <label>band34与主同步频段的相位差:</label> <input type="text"> <label>band39与主同步频段的相位差:</label> <input type="text"> </div> <div class="form-row"> <label>band34与主同步频段的相位差:</label> <input type="text"> <label>band39与主同步频段的相位差:</label> <input type="text"> </div> <div class="form-row"> <label>band41与主同步频段的相位差:</label> <input type="text"> <label>band78与主同步频段的相位差:</label> <input type="text"> <button>查询</button> </div> <div class="form-row"> <label>band40与主同步频段的相位差:</label> <input type="text"> <label>band79与主同步频段的相位差:</label> <input type="text"> <button>设置</button> </div> </div> <div class="section"> <div class="section-title">设置同步偏移频</div> <div class="form-row"> <label>Band:</label> <select> <option></option> <option>34</option> <option>39</option> <option>40</option> <option>41</option> <option>78</option> <option>79</option> </select> <label>FRE:</label> <input type="text"> <label>PCI:</label> <input type="text"> <label>TYPE:</label> <select> <option></option> <option>5Gtdd</option> <option>4Gtdd</option> </select> <button>查询</button> <button>设置</button> </div> <div class="form-row"> <label>同步:</label> <select> <option></option> <option>同步成功</option> <option>同步失败</option> </select> <button>查询</button> <label style="justify-content: flex-end;">偷帧失败:</label> <input type="text"> <button>查询</button> </div> </div> <div class="section"> <div class="section-title">其他设置</div> <div class="button-group1"> <button>恢复出厂设置并且复位</button> <button>数据恢复出厂设置并且复位</button> <button>复位</button> <button>中心频扫频结果自动设置</button> </div> </div> <div class="section"> <div class="form-row"> <div> <div class="section-title">设置单板工作模式</div> <div class="form-row"> <label>当前工作模式:</label> <select> <option></option> <option>全频段屏蔽主板模式</option> <option>全频段屏蔽从板模式</option> <option>纯5g屏蔽模式</option> <option>用户自定义模式</option> <option></option> <option></option> </select> </div> <div class="form-row"> <button>查</button> <button>设置</button> </div> </div> <div> <div class="section-title">设置单板扫频模式</div> <div class="form-row"> <label>当前扫频模式:</label> <select> <option></option> <option>双通道全频段扫频</option> <option>双通道默认频扫频</option> </select> </div> <div class="form-row"> <button>查</button> <button>设置</button> </div> </div> <div> <div class="section-title">设置单板频配置模式</div> <div class="form-row"> <label>当前频配置模式:</label> <select> <option></option> <option>根据扫频结果自动配置</option> <option>用户手动配置</option> <option></option> <option></option> </select> </div> <div class="form-row"> <button>查</button> <button>设置</button> </div> </div> </div> </div> <div class="section"> <div class="form-row"> <div> <div class="section-title">设置单板同步模式</div> <div class="form-row"> <label>当前单板同步模式:</label> <select> <option></option> <option>公网同步</option> <option>gps同步</option> </select> </div> <div class="form-row"> <button>查询</button> <button>设置</button> </div> </div> <div> <div class="section-title">查询配置IP</div> <div class="form-row"> <label>IP:</label> <input type="text"> <button>查询</button> </div> <div class="form-row"> <label>网关:</label> <input type="text"> <button>查询</button> </div> <div class="form-row"> <label>掩码:</label> <input type="text"> <button>设置</button> </div> </div> </div> </div> <div class="section"> <div class="section-title">控制面板</div> <div class="control-panel"> <div class="control-item"> <label>功放电平 <select> <option></option> <option>高开低关</option> <option>低开高关</option> </select> </label> <button>查询</button> <button>设置</button> </div> <div class="control-item"> <label>射频状态 <select> <option></option> <option>断电前状态</option> <option>强制开射频</option> <option>强制关射频</option> </select> </label> <button>查询</button> <button>设置</button> </div> <div class="control-item"> <label>设备互联 <select> <option></option> <option>dantai</option> <option></option> </select> </label> <button>查询</button> <button>设置</button> </div> <div class="control-item" style="display: flex;flex-wrap: wrap;"> <label >WIFI及功放控制 <select> <option></option> <option>输出高</option> <option>输出低</option> </select> </label> <button>查询</button> <button>设置</button> </div> <div class="control-item"> <label>所有射频开关状态 <select> <option></option> <option>所有射频通道关闭</option> <option>所有通道射频开启S</option> </select> </label> <button>查询</button> <button>设置</button> </div> </div> </div> </div> </div> </div> <div class="bottom-info"> 查询同步偷帧失败次数 </div> </div> </div> </body> {% endblock %}在源代码不变的情况,击查询全部,判断有没有连接单片机,如果没有就弹出未选择设备,如果有连接单片机,就放回成功连接设备
11-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>患者评价页面</title> <script src="jquery-1.10.1.min.js"></script> </head> <body> <div id= "div1" style="font-size: 40px"> 被评人: <text id="name"></text> <br> 评价人:<input id="pingjiaren" style="width: 70%;height: 65px"/><br> 联系方式:<input id="phone" style="width: 70%;height: 65px"/><br> 服务态度:<select id="select1" style="width: 70%;height: 65px"> </select><br> 耐心程度:<select id="select2" style="width: 70%;height: 65px"> </select><br> 专业水平:<select id="select3" style="width: 70%;height: 65px"> </select><br><br> 意见:<textarea id="advice" style="width: 70%;height: 220px"></textarea><br><br> <button ondblclick="savePingJia()" style="font-size: 40px;width: 30%;height: 65px;">双击保存</button> </div> <div id= "div2" style="font-size: 40px;text-align: center;display: none">感谢评价!</div> </body> </html> <script> var id = 0; //全局变量,被评人id,初值给0 //页面初始化函数,页面加载的时候就会执行 $(function () { //获取浏览器地址栏面的地址 var url = window.location.search; //url是:?name=张三&id=1 var url1 = url.substring(1, url.length); //把url面的第一个字符?去掉 var arr = url1.split("&"); //将 name=张三&id=1 以"&"分割成数组 //arr[0] 是 name //arr[1] 是 张三 var name_arr = arr[0].split("="); //将 name=张三 以“=”分割成数组 //name-arr[0] 是 name //name-arr[1] 是 张三 $('#name').html(decodeURIComponent(name_arr[1])); //处理中文乱码 var id_arr = arr[1].split("="); //id-arr[0] 是 id //id-arr[1] 是 1 console.log(name_arr); id = id_arr[1]; ///将局部变量赋值给全局变量 for (var i = 1; i <= 100; i++) { var option = '<option value="' + i + '">' + i + '分</option>'; $('#select1').append(option); $('#select2').append(option); $('#select3').append(option); } }) function savePingJia() { //1、取值 var pingjiaren = document.getElementById('pingjiaren').value; var phone = document.getElementById('phone').value; var select1 = document.getElementById('select1').value; var select2 = document.getElementById('select2').value; var select3 = document.getElementById('select3').value; var advice = document.getElementById('advice').value; if (pingjiaren == '') { alert('请输入评价人'); return; } if (phone == '') { alert('请输入联系方式'); return; } //网络请求,去后端的工具(寄快递的过程) $.ajax({ url: 'http://192.168.147.90/wujing62/savePingJia.php', data: { mypingjiaren: pingjiaren, myphone: phone, myselect1: select1, myselecy2: select2, myselect3: select3, myadvice: advice, myid: id }, type: 'get', dataType: 'text', success: function (res) { //寄成功,要接收后端回复前端的信息 //还要判断收到的信息对不对 console.log(res); if (res == '保存成功'){ alert(res); $('#div1').hide(); //隐藏盒子1 $('#div2').show(); //显示盒子2 }else { alert(res) } }, error: function (res) { //寄失败,要接收失败的原因 console.log('地址找不到', res); } }) } </script> 调整格式,它是一个用手机扫码的评价页面,不要改我的代码,就改格式
11-26
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值