<!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 reason
Input = row.querySelector('.reason-
input');
// 清除之前的错误样式
reason
Input.classList.remove('
input-error');
// 验证是否为空
if (!reason
Input.value.trim()) {
reason
Input.classList.add('
input-error');
alert('借调原因不能为空，请填写！');
reason
Input.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>优化界面
本文介绍了解决移动端Web页面中a标签点击高亮、onclick事件黑色背景及input标签圆角和阴影等问题的方法。通过CSS属性-webkit-tap-highlight-color设置为transparent来消除点击高亮效果，并使用-moz-appearance:textfield移除input文本框的默认样式。
扫一扫
2198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
