网站搭建中跳转链接＋高亮的构建

最新推荐文章于 2026-06-22 22:05:57 发布

原创最新推荐文章于 2026-06-22 22:05:57 发布 · 354 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #网站设计 #html

最近帮公司搭建网站，其中一个功能就是要求在模态框中的表格中某一列内容生成一个链接，点击链接可以跳转到另一个网页中的表格的某一行（这里还有一个处理就是将原始页面的表格的列中的内容自动分成多个部分，根据涉及到的内容来，然后分别产生链接），并产生高亮的效果，下面对其中涉及的一些技术进行整理。

首先，代码主要分为两个区域：原始页面（发出链接）；目标页面（高亮的页面）。下面按照区域来分析代码。

原始页面

该页面的作用就是生成一个链接，并且链接中带有关键字。

核心代码如下：

@{
        // 获取两个字段值
        var tzValue = dataRow["tz"] as string;
        var pihaoValue = dataRow["pihao"] as string; // 新增获取批号
        
        // 创建分割后的值列表
        List<string> values = new List<string>();
        
        // 检查是否为空
        if (!string.IsNullOrWhiteSpace(taizhanValue))
        {
            // 分割字符串并修剪空格
            values = tzValue.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries)
                        .Select(v => v.Trim())
                        .ToList();
        }
    
       if (values.Count > 0)
                {
                    foreach (var id in values)
                    {
                        // 使用 HttpUtility 确保正确编码特殊字符
                        <a href="/details.html?highlight=@HttpUtility.UrlEncode(id)&pihao=@HttpUtility.UrlEncode(pihaoValue ?? "")" 
                           class="highlight-link" 
                           data-id="@id"
                           data-pihao="@pihaoValue">
                            @id
                        </a>
                        
                        if (values.IndexOf(id) < values.Count - 1)
                        {
                            <text>, </text>
                        }
                    }
                }
                else
                {
                    <span>无相关数据</span>
                }

}

主要作用包括两个方面：

（1）获取pihao和tz;

（2）将tz的多个值分割，然后分别构建链接。

最终的效果就是发送的链接包含pihao和tz两个参数，tz几个参数分别构建链接。

目标页面

该页面的作用就是接收原始页面发过来的链接，并读取其中的关键字，然后实现高亮。

首先把核心代码贴出来

<!--高亮部分1  获取参数 -->
    @using System.Web
    @{
        // 获取两个参数
        string tzParam = Request.QueryString["tz"];
        string pihaoParam = Request.QueryString["pihao"];
    
        // 解码特殊字符
        tzParam = !string.IsNullOrEmpty(tzParam) ? HttpUtility.UrlDecode(tzParam) : null;
        pihaoParam = !string.IsNullOrEmpty(pihaoParam) ? HttpUtility.UrlDecode(pihaoParam) : null;
    }


 <!--高亮部分2  参数显示区域 -->

    <div class="params-info">
        @if (!string.IsNullOrEmpty(tzParam))
        {
            <p>当前高亮参数 - 挑战: <strong>@tzParam</strong></p>
        }
        @if (!string.IsNullOrEmpty(pihaoParam))
        {
            <p>当前高亮参数 - 批号: <strong>@pihaoParam</strong></p>
        }
    </div>

 <table class="table table-striped">
        <thead>
            <tr>
                <th>id</th>
                <th>区域</th>
                <th>挑战</th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>批号</th>
                <th>日期</th>
            </tr>
        </thead>
        <tbody>

<!--高亮部分3  参数匹配 -->
            @foreach (System.Data.DataRow dataRow in ((System.Data.DataTable)ViewData["one"]).Rows)
            {
                // 判断当前行是否匹配
                bool isMatch = false;
                // 获取当前行的挑战和批号值（假设字段名为"tz"和"pihao"）
                string rowtz = dataRow["tz"] as string;
                string rowPihao = dataRow["pihao"] as string;

                // 检查批号和挑战匹配
                if (rowPihao == pihaoParam && rowtz == tzParam)
                {
                    isMatch = true;
                }
                
                // 根据匹配结果设置类名
                string rowClass = isMatch ? "highlighted" : "";
                               
                <tr class="@rowClass" data-tz="@rowtz" data-pihao="@rowPihao">
                    <td>@dataRow["id"]</td>
                    <td>@dataRow["quyu"]</td>
                    <td>@dataRow["tz"]</td>
                    <td>@dataRow["1"]</td>
                    <td>@dataRow["2"]</td>
                    <td>@dataRow["3"]</td>
                    <td>@dataRow["4"]</td>
                    <td>@dataRow["5"]</td>
                    <td>@dataRow["6"]</td>
                    <td>@dataRow["pihao"]</td>
                    <td>@dataRow["date"]</td>
                    <td><a href="/one/ManagerDelete?id=@dataRow["id"]" class="btn btn-link">删除</a>
                </tr>
            }
          
        </tbody>
    </table>

  
    <!--高亮部分4  多页功能-->
<div class="center">
<ul class="pagination justify-content-center">
     @{
       
        int totalPages = ViewData["totalPages"] != null 
            ? Convert.ToInt32(ViewData["totalPages"]) 
            : 0;
      
       int currentPage = ViewData["currentPage"] != null 
           ? Convert.ToInt32(ViewData["currentPage"]) 
            : 1;        

        if (totalPages == 0)
        {
            <li class="page-item disabled"><a href="#" class="page-link">没有数据</a></li>
        }
       else
        {

      <!-- 上一页 -->
        <li class="page-item @(currentPage == 1 ? "disabled" : "")">
            <a href="?page=@(currentPage - 1)&tz=@tzParam&pihaot=&@pihaoParam" class="page-link">上一页</a>
        </li>

       <!-- 首页 -->
        <li class="page-item @(currentPage == 1 ? "disabled" : "")">
            <a href="?page=1&tz=@tzParam&pihaot=&@pihaoParam" class="page-link">首页</a>
        </li>

        

        for (int page = 2; page <= (totalPages-1); page++)
        {
            <li class="page-item">
                <a href="?page=@page&tz=@tzParam&pihaot=&@pihaoParam" class="page-link">@page</a>
            </li>
        }
      
       <!-- 尾页 -->
        <li class="page-item @(currentPage == totalPages ? "disabled" : "")">
            <a href="?page=@totalPages&tz=@tzParam&pihaot=&@pihaoParam" class="page-link">尾页</a>
        </li>

       <!-- 下一页 -->
        <li class="page-item @(currentPage == totalPages ? "disabled" : "")">
            <a href="?page=@(currentPage + 1)&tz=@tzParam&pihaot=&@pihaoParam" class="page-link">下一页</a>
        </li>
       }
     }
</ul>

</div>

核心代码可以分为四个部分,总体的思路是先获取url中的参数，然后利用该参数一方面用来构建参数显示部分，另一方面用来判断高亮（这部分的逻辑是将参数与数据集每一行进行对比，如果两个参数都吻合，就将该行的class设置为高亮模式，这里需要在style那里设置），最后还需要在分页处设置参数，导致点击分页按钮时也会带上需要的参数。

第一部分

获取url中的参数。

第二部分

利用刚才获取的参数，在页面中展示参数。

第三部分

利用获取的参数，与数据集中每一行进行对比，如果结果完全对比上，就说明这一行是高亮部分，rowClass部分就设置为highlight，表示高亮。

第四部分

由于在页面中设置了多页，因此多页链接中包含的参数也需要修改为相应的参数。改为如下：

<a href="?page=@(currentPage + 1)&tz=@tzParam&pihaot=&@pihaoParam"

最后，在style部分设置一个highlight的css

.highlighted {
            position: relative;
            animation: highlightEffect 2s ease;
            background-color: #fffde7 !important;
            border-left: 4px solid #ff9800;
        }

以上便是整体的思路和代码实现。

除此之外，还要配合后端完成的数据库数据融合，并且将查询完的数据利用ViewData展示到前端。