FineUI Grid控件高度自适应

最新推荐文章于 2024-11-21 14:13:50 发布

weixin_33881041

最新推荐文章于 2024-11-21 14:13:50 发布

阅读量435

点赞数

本文介绍了如何在网页中使用FineUI控件的f:Grid和f:PageManager来实现分页功能，并通过设置AutoSizePanelID使整个页面得到填充。通过配置示例，展示了如何创建分页按钮、工具栏和数据网格，以及如何进行数据操作如添加、编辑、删除等。此教程对于网页开发者实现高效、美观的数据展示和交互功能非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

页面里使用f:Grid控件，添加分页功能，然后高度填充整个页面。

如何使用

使用FineUI 控件的每个页面都有一个f:PageManager控件，它包含属性：AutoSizePanelID，设置需要填充的控件ID，从它的demo可以看出，正常情况下需要再放置一个容器Panel，就可以使整个页面填充。

<f:PageManager ID="PageManager1" runat="server" AutoSizePanelID="ResultSetGrid" />
<f:Grid ID="ResultSetGrid" runat="server" EnableCheckBoxSelect="true" Title="" DataKeyNames="ID"
            ShowBorder="false"
            PageSize="3"
            AllowPaging="true"
            IsDatabasePaging="true"
            OnPageIndexChange="ResultSetGrid_PageIndexChange"
            OnSort="ResultSetGrid_Sort"
            AllowSorting="true"
            SortField="ID">
            <Toolbars>
                <f:Toolbar ID="ResultSetGrid_Toolbar" runat="server">
                    <Items>
                        <f:Button ID="btnAdd" runat="server" Text="添加" OnClientClick="Add();" EnablePostBack="false" Icon="ApplicationAdd"></f:Button>
                        <f:Button ID="btnEdit" runat="server" Text="编辑" EnableAjax="true" OnClick="btnEdit_Click" Icon="ApplicationEdit"></f:Button>
                        <f:Button ID="btnDelete" runat="server" Text="删除" OnClick="btnDelete_Click" Icon="ApplicationDelete"></f:Button>

                        <f:Button ID="btnImport" runat="server" OnClientClick="Import();" Text="数据采集" Icon="ApplicationLink"></f:Button>
                        <f:Button ID="btnSelf" runat="server" OnClientClick="Filter();" Text="自定义筛选" Icon="ApplicationKey"></f:Button>
                    </Items>
                </f:Toolbar>
            </Toolbars>
            <Columns>
                <f:RowNumberField EnablePagingNumber="true" />
            </Columns>

        </f:Grid>