# 数据表格: 非托管分页列表 (Unmanaged PagingListPage)

`data-table/PagingTablePage.svelte` 组件是分页数据表格的"非托管"版本。它通过包装 `@ticatec/uniface-element/DataTable` 提供了 UI 和基本结构，但将数据获取和状态管理的控制权通过 `PagedDataManager` 完全交给了您。

## 设计目的

当您需要完全控制数据的获取方式和时机时，应使用此组件。该组件提供了页面结构和分页控件，但您需要负责创建、管理一个 `PagedDataManager` 实例，并将其状态以 props 的形式传给组件。

## 关键依赖

-   **`@ticatec/uniface-element/DataTable`**: 用于渲染核心的表格结构 (`<thead>`, `<tbody>`)。
-   **`@ticatec/app-data-manager/PagedDataManager`**: 这个类是该组件的"大脑"。它持有分页状态（`pageNo`, `pageCount`, `count`）、当前页的数据（`list`）以及查询/刷新方法。您将直接与这个管理器交互。

## 如何使用

您需要手动创建一个 `PagedDataManager` 实例（基于一个 `PagingDataService`），并将其状态属性逐一传递给组件的 props。`PagingTablePage` 组件本身不接受管理器实例，只接受原始数据和回调。

1.  **准备您的数据服务、管理器和列定义**

    ```ts
    import type { DataColumn } from "@ticatec/uniface-element";
    import { PagingDataService } from '@ticatec/app-data-service';
    import { PagedDataManager } from '@ticatec/app-data-manager';

    const columns: Array<DataColumn> = [
        {
            title: '租户名称',
            field: 'name',
            width: 200,
            resizable: true
        },
        {
            title: '联系邮箱',
            field: 'email',
            width: 250,
            resizable: true
        }
    ];

    // 1. 创建数据服务实例。
    class TenantService extends PagingDataService {
        constructor() {
            super('/api/tenants');
        }
    }
    const service = new TenantService();

    // 2. 创建管理器实例，传入服务和主键比较字段。
    const manager = new PagedDataManager(service, 'id');

    // 3. 加载初始数据。
    await manager.refresh();
    ```

2.  **在您的页面中使用该组件**

    ```svelte
    <script lang="ts">
        // ... (上面的脚本)
        import PagingTablePage from '@ticatec/uniface-pro-components/data-table/PagingTablePage';

        let page$attrs = {
            title: "非托管租户列表"
        };

        const indicatorColumn = { width: 50, selectable: false };

        // 分页控件所需的回调，直接委托给管理器
        const onPageChange = (pageNo: number) => {
            manager.setPageNo(pageNo);
        };

        const onRowCountChanged = (pageSize: number) => {
            manager.setRowsPage(pageSize);
        };
    </script>

    <PagingTablePage
        {page$attrs}
        {indicatorColumn}
        list={manager.list}
        {columns}
        total={manager.count}
        pageCount={manager.pageCount}
        pageNo={manager.pageNo}
        {onPageChange}
        {onRowCountChanged}
        rowHeight={48}
        canBeClosed={false}
    />
    ```

    该组件本身不提供新建/刷新按钮或搜索框；如需这些功能，可通过 `searchPanel` snippet 自行传入，或改用托管版本 `data-table/managed/PagingTablePage`。

## 组件属性 (Props)

-   `page$attrs: PageAttrs`: 包含标题和其他页面级设置的页面属性。**(必需)**
-   `indicatorColumn: IndicatorColumn`: 选择指示器的配置。**(必需)**
-   `list: Array<any>`: 要在表格中显示的数据项数组。**(必需)**
-   `columns: Array<DataColumn>`: 来自 @ticatec/uniface-element 的列定义对象数组。**(必需)**
-   `total: number`: 数据总条数。**(必需)**
-   `pageCount: number`: 总页数。**(必需)**
-   `pageNo: number`: 当前页码。**(必需)**
-   `onPageChange: OnPageChange`: 页码变化时的回调。**(必需)**
-   `onRowCountChanged: OnPageSizeChange`: 每页条数变化时的回调。**(必需)**
-   `actionsColumn?: ActionsColumn`: 行操作按钮的配置。
-   `selectedRows?: Array<any>`: 要绑定选定行的数组。
-   `rowHeight?: number`: 每行的像素高度。
-   `canBeClosed?: boolean`: 页面是否可以关闭。默认为 `false`。
-   `roundTable?: boolean`: 是否使用圆角表格边角。默认为 `false`。
-   `round?: boolean`: 页面是否使用圆角容器。默认为 `true`。
-   `shadow?: boolean`: 页面容器是否显示阴影。默认为 `true`。
-   `emptyText?: string`: 空状态的自定义文本。
-   `getRowFontStyle?: GetRowFontStyle`: 自定义行样式的函数。

## 插槽 (Snippets)

-   `sidebar?: Snippet`: 可选的侧边栏内容。
-   `searchPanel?: Snippet`: 可选的搜索面板内容，渲染在表格头部区域。

## 功能特性

-   使用 @ticatec/uniface-element/DataTable 进行数据显示
-   基于 PagedDataManager 的分页状态与数据获取
-   支持行选择和操作
-   具有分页控件的响应式设计
-   可选的侧边栏和搜索面板支持