Question

我想从JQuery设置PageSize，共鸣的是gridView在不同的屏幕上有不同的高度。

这是我在页面上运行的Jquery和GridView

<script>
     //Initial load of page
     $(document).ready(sizePage);

     //Every resize of window
     $(window).resize(sizePage);

     //Dynamically assign height
     function sizePage() {
         var newHeight = $("#page").height() / 1.5;
         $("#mid").css("height", newHeight + "px");
         $("#box1").css("height", newHeight + "px");
         $("#box2").css("height", newHeight + "px");
         $("#field2").css("height", newHeight - 80 + "px");
         $('#<%= GridView.ClientID %>').attr("PageSize", "5");
     }
</script>


<asp:GridView ID="GridView" CssClass="tekst" Width="100%" runat="server" AllowPaging="true" AutoGenerateColumns="false" BorderWidth="0px" GridLines="None" OnPageIndexChanging="GridView_PageIndexChanging" OnRowCommand="GridView_RowCommand" OnRowDataBound="GridView_RowDataBound">
<Columns>
    <asp:BoundField DataField="nyhed_overskrift" HeaderText="Title" HeaderStyle-HorizontalAlign="Left" HeaderStyle-CssClass="headcontent2" />
    <asp:BoundField DataField="nyhed_dato" HeaderText="Oprettet" HeaderStyle-Width="80" ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="headcontent2" />
    <asp:BoundField DataField="nyhed_id" HeaderText="ID" HeaderStyle-CssClass="invis" HeaderStyle-Width="0" ItemStyle-CssClass="invis" ItemStyle-Width="0" />
    <asp:ButtonField ButtonType="Image" ImageUrl="Image/Diverse/Arrow.png" CommandName="LaesNyhed" HeaderStyle-Width="50px" />
</Columns>
<PagerStyle VerticalAlign="Bottom" HorizontalAlign="Center" CssClass="tekst" />
</asp:GridView>

Answer 1

您可以将UpdatePanel与HiddenField一起使用来解决此问题

<script type="text/javascript">
    //Initial load of page
    $(document).ready(sizePage);

    //Every resize of window
    $(window).resize(sizePage);

    //Dynamically assign height
    function sizePage() {
        var newHeight = $("#page").height() / 1.5;
        $("#mid").css("height", newHeight + "px");
        $("#box1").css("height", newHeight + "px");
        $("#box2").css("height", newHeight + "px");
        $("#field2").css("height", newHeight - 80 + "px");
        //$('#<%= GridView.ClientID %>').attr("PageSize", "5");
        $('#<%= PageSizeHiddenField.ClientID %>').val('5'); //this is page size
        $('#<%= SetPageSizeButton.ClientID %>').click(); //async postback
    }
</script>
<script runat="server">
    protected void SetPageSize_Click(object sender, EventArgs e)
    {
        GridView.PageSize = int.Parse(PageSizeHiddenField.Value);
        GridView.PageIndex = 0;
        GridView.DataBind();
        MyUpdatePanel.Update();
    }
</script>
<asp:HiddenField runat="server" ID="PageSizeHiddenField" />
<asp:Button ID="SetPageSizeButton" runat="server" Style="display: none" OnClick="SetPageSize_Click" />
<asp:UpdatePanel runat="server" ID="MyUpdatePanel" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:GridView ID="GridView" CssClass="tekst" Width="100%" runat="server" AllowPaging="true"
            AutoGenerateColumns="false" BorderWidth="0px" GridLines="None" OnPageIndexChanging="GridView_PageIndexChanging"
            OnRowCommand="GridView_RowCommand" OnRowDataBound="GridView_RowDataBound">
            <Columns>
                <asp:BoundField DataField="nyhed_overskrift" HeaderText="Title" HeaderStyle-HorizontalAlign="Left"
                    HeaderStyle-CssClass="headcontent2" />
                <asp:BoundField DataField="nyhed_dato" HeaderText="Oprettet" HeaderStyle-Width="80"
                    ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="headcontent2" />
                <asp:BoundField DataField="nyhed_id" HeaderText="ID" HeaderStyle-CssClass="invis"
                    HeaderStyle-Width="0" ItemStyle-CssClass="invis" ItemStyle-Width="0" />
                <asp:ButtonField ButtonType="Image" ImageUrl="Image/Diverse/Arrow.png" CommandName="LaesNyhed"
                    HeaderStyle-Width="50px" />
            </Columns>
            <PagerStyle VerticalAlign="Bottom" HorizontalAlign="Center" CssClass="tekst" />
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="SetPageSizeButton" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

从Jquery设置GridView PageSize

1 个答案: