ASP.NET嵌套Repeater实现点击整行展开/收起替代仅点击加减图标

改造方案 #

只需要修改前端HTML和JS代码即可，后端C#逻辑完全不用改动：

1. 新增体验优化样式（可选但推荐）

在页面头部加入以下CSS，让用户可感知整行可点击：

<style>
.trtest {
    cursor: pointer;
}
.trtest:hover {
    background-color: #f5f5f5;
}
</style>

2. 替换原有JS逻辑

把原来绑定到加减图标点击的JS代码替换为以下内容，统一绑定到父行的点击事件：

<script type="text/javascript">
// 绑定父行点击事件，实现整行触发展开/收起
$("body").on("click", ".trtest", function () {
    const $toggleImg = $(this).find(".testp");
    // 判断当前是展开还是收起状态
    if ($toggleImg.attr("src").includes("plus.png")) {
        // 展开：插入子内容行
        $(this).after(`<tr><td></td><td colspan="999">${$toggleImg.next().html()}</td></tr>`);
        $toggleImg.attr("src", "../images/N_Images/minus.png");
    } else {
        // 收起：移除子内容行
        $toggleImg.attr("src", "../images/N_Images/plus.png");
        $(this).next().remove();
    }
});

// 兼容原有图标点击逻辑，避免点击图标时重复触发事件
$("body").on("click", ".testp", function (e) {
    e.stopPropagation();
    $(this).closest(".trtest").trigger("click");
});
</script>

注：如果不需要保留单独点击图标触发的功能，可以删掉上面第二段兼容逻辑。

3. 前端HTML无需修改

原有的Repeater结构完全可以复用，不需要调整嵌套结构和服务端控件属性。

内容的提问来源于stack exchange，提问作者Geet