Question

我正在尝试在ASP.NET中开发一个连接到GridView的{{1}}，但是显示所有具有“掩码”的单元格，最终用户需要单击该单元以显示真实值。
掩码可以是DataBase或hyperlink或button，也可以点击显示。

因此3乘3 imagebutton将有9个带有此掩码的单元格，只有当单击一个单元格时，才会显示真正的基础值。

下图是我必须使用asp.net GridView或其他更好的方式生成的想法。我希望从连接的GridView获取数据，填充DataBase，但是，每个单元格都应该使用按钮或链接进行屏蔽，这样最终用户只能查看数据他们想看。单击单元格后，将向最终用户显示真实值。最初所有单元格都会被“点击查看”隐藏，用户只需要显示他想要的信息。

我使用asp.net VB.NET或C＃为这个网格开发一个Web应用程序。

Answer 1

我试过这样：

制作GridView：

<asp:GridView runat="server" ID="GV_Cells" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderText="ID">
            <ItemTemplate>
                <asp:Button runat="server" ID="BTN_Id" CssClass="value-toggle" Text="Show value" /> 
                <asp:Label ID="LBL_Id" Runat="Server" Text='<%# Eval("ID") %>' Style="display:none" CssClass="value"  />
            </ItemTemplate>
        </asp:TemplateField>

        <asp:BoundField DataField="SecretValue1" HeaderText="SecretValue1" ReadOnly="True" />  
        <asp:BoundField DataField="SecretValue2" HeaderText="SecretValue2" ReadOnly="True" /> 
    </Columns>
</asp:GridView>

在页面加载时运行javascript：

<script type="text/javascript">
    $(function () {
        $('.value-toggle').click(function (event) {
            $('#' + event.target.id).toggle();
            $('#' + event.target.id).next('.value').toggle();
            return false;
        });
    });
</script>

javascript将为具有类'value-toggle'的每个按钮分配一个onclick事件处理程序，它将切换单击的元素的可见性，以及DOM树中具有'value'css类的下一个元素（其中是带有你价值的标签。）

您可以对其他列执行相同操作 - 只需使用具有“value”css类的元素包装值容器。

这仅在客户端上完成 - 没有回发。如果回发是您想要的（您希望跟踪显示的值），那将是一种稍微不同的方法。

在单击单元格之前隐藏GridView中的单元格值

1 个答案: