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