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;
        }

在这张图片中，结果显示..所以我想要一个链接按钮，用于查看deatils。

enter image description here

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 =＆＃34; CharacterEllipsis＆＃34; 使文字消失，如果文字所在的字段更长（参见图片）

我希望这有帮助

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项目模板列宽固定，并使用链接Button查看详细信息

2 个答案: