<!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.query
Selector
('.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.query
SelectorAll
('#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" Header
Text="ID" />
<asp:BoundField DataField
="EmployeeName" Header
Text="Name" />
<asp:BoundField DataField
="EmployeeId" Header
Text="Badge" />
<asp:BoundField DataField
="Workday_ID" Header
Text="Workday_ID" />
<asp:BoundField DataField
="dept_code" Header
Text="Dept" />
<asp:TemplateField Header
Text="Borrow Plant">
<ItemTemplate>
<asp:
TextBox ID
="ddlTargetFactory"
runat="
server"></asp:
TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Header
Text="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 Header
Text="Start Date">
<ItemTemplate>
<asp:
TextBox ID
="txtStartDate"
runat="
server"
type
="datetime-local"
CssClass
="form-control">
</asp:
TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Header
Text="End Date">
<ItemTemplate>
<asp:
TextBox ID
="txtEndDate"
runat="
server"
type
="datetime-local"
CssClass
="form-control">
</asp:
TextBox>
</ItemTemplate>
</asp:TemplateField>
<%-- 新增借调原因列（仅点击Submit验证） --%>
<asp:TemplateField Header
Text="借调原因<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 Header
Text="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" Header
Text="Plant" ReadOnly
="True" />
<asp:BoundField DataField
="Name" Header
Text="Name" ReadOnly
="True"/>
<asp:BoundField DataField
="Badge" Header
Text="Badge" ReadOnly
="True"/>
<asp:BoundField DataField
="Dept" Header
Text="Dept" ReadOnly
="True"/>
<asp:BoundField DataField
="Borrow Plant" Header
Text="Borrow Plant" ReadOnly
="True"/>
<asp:BoundField DataField
="Borrow Dept" Header
Text="Borrow Dept" ReadOnly
="True"/>
<asp:BoundField DataField
="Start Date" Header
Text="Start Date" ReadOnly
="True"
DataFormatString
="{0:yyyy-MM-dd HH:mm}" HtmlEncode
="False"/>
<asp:BoundField DataField
="End Date" Header
Text="End Date" ReadOnly
="True"
DataFormatString
="{0:yyyy-MM-dd HH:mm}" HtmlEncode
="False"/>
<%-- 展示借调原因 --%>
<asp:BoundField DataField
="借调原因" Header
Text="借调原因" 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" Header
Text="ID" ReadOnly
="True"/>
<asp:BoundField DataField
="Name" Header
Text="Name" ReadOnly
="True" />
<asp:BoundField DataField
="Badge" Header
Text="Badge" ReadOnly
="True"/>
<asp:BoundField DataField
="Plant" Header
Text="Lending Plant" ReadOnly
="True"/>
<asp:BoundField DataField
="Dept" Header
Text="Lending Dept" ReadOnly
="True"/>
<asp:TemplateField Header
Text="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 Header
Text="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 Header
Text="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 Header
Text="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 Header
Text="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>优化界面
本文详细介绍了如何在ASP.NET Web应用程序中使用Select控件，并通过代码清空现有选项、绑定数据库数据及设置DataTextField属性来实现数据的动态显示。解释了在获取绑定数据时如何使用Value属性取值。
扫一扫
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
