Gridview项目模板的列宽固定，并使用链接按钮查看详细信息

Question

这是我的Gridview模板。在这里，我想固定列宽，但无法正常工作。

<asp:TemplateField HeaderText="Remarks">
     <HeaderStyle Width="20" />
        <ItemStyle HorizontalAlign="Left" Width="20px" />
               <ItemTemplate>
                      <%#Eval("Comments")%>
                      <asp:LinkButton ID="LinkButton1" runat="server"                                    CausesValidation="False" CommandName="Select" CssClass="accordionButton" Text="Select">
  </asp:LinkButton>
 </ItemTemplate>
</asp:TemplateField>

然后，我希望注释部分将包含一个链接按钮，该按钮将在同一列中显示这些列值的详细信息..我正在使用此Java脚本。

 <script type="text/javascript">
        $(document).ready(function () {

            //ACCORDION BUTTON ACTION
            $('.accordionButton').click(function () {
                alert("HERE!");
                $(this).next().slideToggle();
            });
        });
    </script>


    <style>
        .accordionButton {
            width: 100%;
            cursor: pointer;
            line-height: 20px;
        }

        .accordionContent {
            width: 100%;
            display: none;
        }

在此图片中，结果显示为..so，我想要一个链接按钮，该按钮可用于查看详细信息。

在此处输入图片说明

Answer 1

您是否尝试过为列设置MaxWidth？ 为了使文本消失，可以使用TextTrimming：

<asp:TemplateField HeaderText="Remarks">
     <HeaderStyle Width="20" />
        <ItemStyle HorizontalAlign="Left" Width="20px" MaxWidth="150" TextTrimming="CharacterEllipsis"/>
               <ItemTemplate>
                      <%#Eval("Comments")%>
                      <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Select" CssClass="accordionButton" Text="Select">
  </asp:LinkButton>
 </ItemTemplate>
</asp:TemplateField>

MaxWidth为列提供最大宽度。

TextTrimming =“ CharacterEllipsis”如果文本所在的字段更长，则使文本消失（参见图片）

希望这对您有所帮助

Answer 2

这是一个使用jQuery和Twitter Bootstrap的简单示例：

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $('.accordionButton').click(function () {
                $(".modal-body").empty();
                var remark = $(this).data('remark');
                $(".modal-body").html(remark);
                $('#myModal').modal('show');
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Remarks">
                    <HeaderStyle Width="20" />
                    <ItemStyle HorizontalAlign="Left" Width="20px" />
                    <ItemTemplate>
                        <%#  Eval("Comments").ToString().Length >= 10 ? Eval("Comments").ToString().Substring(0,10) + "..." : "" %>
                        <a href="#" class="accordionButton" data-remark='<%# Eval("Comments") %>'>See more</a>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Modal Header</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>

输出：

Gridview项目模板的列宽固定，并使用链接按钮查看详细信息

问题描述

2 个解决方案

解决方案1
0 2016-08-09 09:31:08

解决方案2
0 2016-08-09 10:20:05

Gridview项目模板的列宽固定，并使用链接按钮查看详细信息

问题描述

2 个解决方案

解决方案1 0 2016-08-09 09:31:08

解决方案2 0 2016-08-09 10:20:05

解决方案1
0 2016-08-09 09:31:08

解决方案2
0 2016-08-09 10:20:05