<think>我们将在之前的优化基础上进行改进,增加一列(操作员),并且按要求在顶部添加带有文本框和按钮的功能区,中间使用GridView并带有复选框。
优化要点:
1. 顶部功能区:放置添加、删除、修改、查询、打印按钮。其中查询部分使用文本框+按钮实现手动输入查询。
2. 中间数据表格:使用GridView,第一列为复选框(带全选功能),最后一列为操作列(编辑、删除),并按照要求添加“操作员”列。
注意:由于列数增加,我们调整表格列定义。
</think>
以下是针对入库管理页面的优化代码,包含顶部功能区和带复选框的数据表格:
```aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="in-management.aspx.cs" Inherits="admin_in_management" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>入库管理系统</title>
<style>
/* 基础样式重置 */
body {
font-family: 'Microsoft YaHei', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f7fa;
}
.container {
width: 95%;
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
/* 顶部工具栏样式 */
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 15px;
padding: 15px;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 5px;
margin-bottom: 20px;
align-items: center;
}
.toolbar-item {
display: flex;
align-items: center;
height: 40px;
}
.toolbar-label {
margin-right: 8px;
font-weight: bold;
white-space: nowrap;
}
.toolbar-input {
padding: 8px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
height: 100%;
box-sizing: border-box;
}
.toolbar-button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
height: 100%;
white-space: nowrap;
}
.toolbar-button:hover {
background-color: #45a049;
transform: translateY(-2px);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.search-area {
flex-grow: 1;
max-width: 500px;
}
.search-box {
padding: 8px 12px;
border: 1px solid #ced4da;
border-radius: 4px 0 0 4px;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.search-button {
border-radius: 0 4px 4px 0;
height: 100%;
background-color: #2196F3;
}
.search-button:hover {
background-color: #0b7dda;
}
.delete-button {
background-color: #f44336;
}
.delete-button:hover {
background-color: #d32f2f;
}
/* 数据表格样式 */
.data-table {
width: 100%;
border-collapse: collapse;
margin: 0 auto;
font-size: 14px;
}
.data-table th, .data-table td {
border: 1px solid #ddd;
padding: 12px 15px;
text-align: center;
}
.data-table th {
background-color: #3f51b5;
color: white;
position: sticky;
top: 0;
}
.data-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.data-table tr:hover {
background-color: #f1f1f1;
}
.select-cell {
width: 40px;
}
.action-area {
display: flex;
justify-content: center;
gap: 8px;
}
.action-button {
padding: 5px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
}
.edit-button {
background-color: #ff9800;
color: white;
}
.edit-button:hover {
background-color: #e68a00;
}
.delete-row-button {
background-color: #f44336;
color: white;
}
.delete-row-button:hover {
background-color: #d32f2f;
}
/* 操作员列样式 */
.operator-cell {
font-weight: bold;
color: #3f51b5;
}
/* 响应式设计 */
@media (max-width: 768px) {
.toolbar {
flex-direction: column;
align-items: stretch;
}
.toolbar-item {
width: 100%;
margin-bottom: 10px;
}
.search-area {
max-width: 100%;
}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<!-- 顶部功能区 -->
<div class="toolbar">
<!-- 添加功能 -->
<div class="toolbar-item">
<asp:Button ID="btnAdd" runat="server" Text="添加新记录" CssClass="toolbar-button" OnClick="btnAdd_Click" />
</div>
<!-- 删除功能 -->
<div class="toolbar-item">
<asp:Button ID="btnDelete" runat="server" Text="删除选中项" CssClass="toolbar-button delete-button" OnClick="btnDelete_Click" />
</div>
<!-- 打印功能 -->
<div class="toolbar-item">
<asp:Button ID="btnPrint" runat="server" Text="打印报表" CssClass="toolbar-button" OnClick="btnPrint_Click" />
</div>
<!-- 日期筛选 -->
<div class="toolbar-item">
<span class="toolbar-label">日期范围:</span>
<asp:TextBox ID="txtStartDate" runat="server" CssClass="toolbar-input" TextMode="Date"></asp:TextBox>
<span style="margin: 0 5px;">至</span>
<asp:TextBox ID="txtEndDate" runat="server" CssClass="toolbar-input" TextMode="Date"></asp:TextBox>
<asp:Button ID="btnFilterDate" runat="server" Text="筛选" CssClass="toolbar-button"
style="margin-left:10px; padding: 5px 10px;" OnClick="btnFilterDate_Click" />
</div>
<!-- 查询功能:关键词搜索 -->
<div class="toolbar-item search-area">
<asp:DropDownList ID="ddlSearchColumn" runat="server" CssClass="toolbar-input"
style="width:30%; border-right:none; border-radius:4px 0 0 4px;">
<asp:ListItem Value="CabinetNo">柜子编号</asp:ListItem>
<asp:ListItem Value="DevNo">开发编号</asp:ListItem>
<asp:ListItem Value="ProductName">产品名称</asp:ListItem>
<asp:ListItem Value="Color">颜色</asp:ListItem>
<asp:ListItem Value="Operator">操作员</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtSearch" runat="server" CssClass="toolbar-input search-box"
Placeholder="输入查询关键词..." Style="width:70%; border-radius:0;"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="查询" CssClass="toolbar-button search-button" OnClick="btnSearch_Click" />
</div>
</div>
<!-- 数据表格 -->
<asp:GridView ID="gvInventory" runat="server" CssClass="data-table" AutoGenerateColumns="false"
AllowPaging="true" PageSize="10" OnPageIndexChanging="gvInventory_PageIndexChanging">
<Columns>
<!-- 选择列 -->
<asp:TemplateField HeaderStyle-CssClass="select-cell" ItemStyle-CssClass="select-cell">
<HeaderTemplate>
<asp:CheckBox ID="chkSelectAll" runat="server" AutoPostBack="true" Text="全选"
OnCheckedChanged="chkSelectAll_CheckedChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<!-- 数据列 -->
<asp:BoundField DataField="CabinetNo" HeaderText="柜子编号" />
<asp:BoundField DataField="DevNo" HeaderText="开发编号" />
<asp:BoundField DataField="ProductName" HeaderText="产品名称" />
<asp:BoundField DataField="Size" HeaderText="尺寸" />
<asp:BoundField DataField="LogoNo" HeaderText="LOGO NO." />
<asp:BoundField DataField="Color" HeaderText="颜色" />
<asp:BoundField DataField="Quantity" HeaderText="数量" />
<asp:BoundField DataField="SampleDate" HeaderText="样品日期" DataFormatString="{0:yyyy/MM/dd}" />
<asp:BoundField DataField="Remark" HeaderText="备注" />
<asp:BoundField DataField="Operator" HeaderText="操作员" ItemStyle-CssClass="operator-cell" />
<!-- 操作列 -->
<asp:TemplateField HeaderText="操作">
<ItemTemplate>
<div class="action-area">
<asp:Button ID="btnEditRow" runat="server" Text="编辑"
CssClass="action-button edit-button" CommandArgument='<%# Eval("ID") %>'
OnClick="btnEditRow_Click" />
<asp:Button ID="btnDelRow" runat="server" Text="删除"
CssClass="action-button delete-row-button" CommandArgument='<%# Eval("ID") %>'
OnClick="btnDelRow_Click" OnClientClick="return confirm('确定删除这条记录吗?');" />
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerSettings Mode="NumericFirstLast" Position="Bottom" PageButtonCount="5"
FirstPageText="首页" LastPageText="末页" />
<PagerStyle HorizontalAlign="Center" CssClass="grid-pager" />
</asp:GridView>
</div>
</form>
</body>
</html>
```
### 后台代码框架 (in-management.aspx.cs):
```csharp
using System;
using System.Data;
using System.Web.UI.WebControls;
public partial class admin_in_management : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// 设置默认日期范围
txtStartDate.Text = DateTime.Now.AddMonths(-1).ToString("yyyy-MM-dd");
txtEndDate.Text = DateTime.Now.ToString("yyyy-MM-dd");
// 初始加载数据
BindInventoryData();
}
}
// 绑定库存数据
private void BindInventoryData()
{
// 创建示例数据(实际应替换为数据库查询)
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int)); // 添加ID列用于操作
dt.Columns.Add("CabinetNo");
dt.Columns.Add("DevNo");
dt.Columns.Add("ProductName");
dt.Columns.Add("Size");
dt.Columns.Add("LogoNo");
dt.Columns.Add("Color");
dt.Columns.Add("Quantity", typeof(int));
dt.Columns.Add("SampleDate", typeof(DateTime));
dt.Columns.Add("Remark");
dt.Columns.Add("Operator");
// 添加示例行
for (int i = 1; i <= 20; i++)
{
DataRow dr = dt.NewRow();
dr["ID"] = i;
dr["CabinetNo"] = $"01-03-{i:D2}";
dr["DevNo"] = $"SD26{i:000}";
dr["ProductName"] = $"SB05B{i:D3}";
dr["Size"] = $"{15 + i % 5}L";
dr["LogoNo"] = $"G26-{1000 + i}A";
dr["Color"] = $"Z04{i:D2}";
dr["Quantity"] = 10 + i;
dr["SampleDate"] = DateTime.Now.AddDays(-i);
dr["Remark"] = i % 3 == 0 ? "无" : $"备注{i}";
dr["Operator"] = $"操作员{i % 4}";
dt.Rows.Add(dr);
}
// 绑定数据到GridView
gvInventory.DataSource = dt;
gvInventory.DataBind();
}
// ==== 按钮事件 ====
protected void btnAdd_Click(object sender, EventArgs e)
{
// 添加新记录逻辑
// 实际应用中会跳转到添加页面或打开模态窗口
Response.Write("<script>alert('添加功能调用');</script>");
}
protected void btnDelete_Click(object sender, EventArgs e)
{
bool deleted = false;
foreach (GridViewRow row in gvInventory.Rows)
{
CheckBox chk = (CheckBox)row.FindControl("chkSelect");
if (chk != null && chk.Checked)
{
// 执行删除操作(实际应从数据库删除)
int id = int.Parse(gvInventory.DataKeys[row.RowIndex].Value.ToString());
// TODO: 删除数据库记录
deleted = true;
}
}
if (deleted)
{
BindInventoryData(); // 刷新数据
Response.Write("<script>alert('删除成功!');</script>");
}
else
{
Response.Write("<script>alert('请先选择要删除的记录!');</script>");
}
}
protected void btnFilterDate_Click(object sender, EventArgs e)
{
// 日期筛选功能
DateTime startDate, endDate;
if (DateTime.TryParse(txtStartDate.Text, out startDate) &&
DateTime.TryParse(txtEndDate.Text, out endDate))
{
// TODO: 实现日期筛选逻辑
Response.Write($"<script>alert('日期筛选: {startDate:yyyy-MM-dd} 至 {endDate:yyyy-MM-dd}');</script>");
}
else
{
Response.Write("<script>alert('日期格式不正确!');</script>");
}
}
protected void btnSearch_Click(object sender, EventArgs e)
{
string searchColumn = ddlSearchColumn.SelectedValue;
string keyword = txtSearch.Text.Trim();
if (!string.IsNullOrEmpty(keyword))
{
// TODO: 实现带列选择的查询逻辑
Response.Write($"<script>alert('按[{searchColumn}]搜索: {keyword}');</script>");
}
else
{
Response.Write("<script>alert('请输入查询关键词!');</script>");
}
}
protected void btnPrint_Click(object sender, EventArgs e)
{
// 打印功能实现
Response.Write("<script>alert('打印功能调用');</script>");
// 实际可能使用JavaScript打印: Response.Write("<script>window.print();</script>");
}
// ==== 行操作 ====
protected void btnEditRow_Click(object sender, EventArgs e)
{
Button btn = (Button)sender;
int id = int.Parse(btn.CommandArgument);
// TODO: 获取记录数据并进入编辑模式
Response.Write($"<script>alert('编辑记录ID: {id}');</script>");
}
protected void btnDelRow_Click(object sender, EventArgs e)
{
Button btn = (Button)sender;
int id = int.Parse(btn.CommandArgument);
// TODO: 删除指定ID的记录
BindInventoryData(); // 刷新数据
Response.Write($"<script>alert('已删除记录ID: {id}');</script>");
}
// ==== 分页处理 ====
protected void gvInventory_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvInventory.PageIndex = e.NewPageIndex;
BindInventoryData();
}
// ==== 全选功能 ====
protected void chkSelectAll_CheckedChanged(object sender, EventArgs e)
{
CheckBox chkAll = (CheckBox)sender;
foreach (GridViewRow row in gvInventory.Rows)
{
CheckBox chk = (CheckBox)row.FindControl("chkSelect");
if (chk != null)
{
chk.Checked = chkAll.Checked;
}
}
}
}
```
### 关键优化说明:
1. **顶部功能区增强**:
- 添加+文本框综合:包含搜索条件选择、关键词输入、日期范围过滤
- 功能分区:左侧为操作按钮,中部为搜索区,右侧为日期筛选
- 响应式设计:小屏幕自动堆叠布局
2. **数据表格优化**:
- 首列全选/复选框实现批量操作
- 操作员列特殊样式强调
- 分页功能支持(页码导航)
- 操作按钮悬停动画效果
3. **用户体验改进**:
- 表单数据预填充(日期默认为近一个月)
- 删除操作确认提示
- 列标题固定(滚动时仍在可视区)
- 操作行按钮紧凑设计
4. **视觉设计升级**:
- Material Design风格扁平化按钮
- 表格头部深色主题强调
- 响应式排版确保移动端友好
- 卡片式容器添加阴影提升层次感
5. **功能实现