DataTables
高级交互
功能，用于您的表格。
Editor
综合编辑
DataTables 库。
手册
下载
{hero}
≡ 显示站点导航

stateRestoreConfig

StateRestore 按钮的配置选项。
请注意 - 此属性需要 DataTables 的 StateRestore 扩展。

描述

许多 StateRestore 按钮共享可用于配置其行为和与表格交互的选项。例如，可以将按钮配置为通过 Ajax 加载数据。此处定义了按钮可用的选项。

选项

  • ajax - 通过 ajax 设置状态的加载和保存
  • create - 启用/禁用创建新状态
  • creationModal - 在创建时显示一个模态框，允许自定义状态
  • preDefined - 在 DataTables 初始化中设置预定义状态
  • remove - 启用/禁用删除状态
  • rename - 启用/禁用重命名状态
  • save - 启用/禁用更新状态
  • saveState - 启用/禁用保存各种 DataTables 元素
  • splitSecondaries - 设置将在 StateRestore 分割下拉菜单中显示的分隔按钮
  • toggle - 保存新状态时，启用/禁用保存各种 DataTables 元素。

ajax

此选项允许 StateRestore 通过 ajax 加载和保存状态。如果为此选项提供的值为字符串，则 StateRestore 将将其用作通过 ajax 请求的目标 URL。

将值设置为函数允许用户在将状态加载到 StateRestore、重命名、删除或保存状态时自定义行为。对函数的行为没有限制 - 您可以在调用此函数时执行任何操作。

默认情况下，值为 false，这意味着状态将保存在本地会话存储中。将此选项的值设置为 true 没有任何效果。

此示例显示了 ajax 选项的实际应用。

默认情况下，此选项处于禁用状态 (false)。

值 (字符串)

当 StateRestore 尝试使用 ajax 加载和保存状态时，应将此选项设置为字符串。此字符串应为一个 URL，告诉 StateRestore 它应该在哪里发出请求。

值 (函数)

每当以下情况发生时，都会调用此函数

  • 状态加载到 StateRestore 中
  • 重命名状态
  • 删除状态
  • 保存状态

它接受两个参数

第一个是 data，其中包含处理操作所需的所有数据。第二个是回调函数，在通过 ajax 函数加载状态时应调用。能够将此选项设置为函数允许用户更灵活地存储其状态。

1) 将通过 ajax 传递的相关数据。该对象包含 2 个属性。

  • action string 正在发生导致 ajax 调用的操作类型。其中之一为 load、rename、remove 或 save。
  • stateRestore object 此对象包含每个受调用影响的状态的属性。执行保存或删除操作时的值是应存储的状态对象。重命名时略有不同，值是要覆盖相应键的值的新名称。加载状态时此属性不存在。

2) 一个回调函数，可以根据正在执行的操作执行两个不同的目的。

首先，当预定义状态通过 ajax 函数加载到 StateRestore 中时。在这种情况下，data.action 属性将设置为 load。它接受一个参数，该参数应与 preDefined 具有相同的结构。

对于所有其他可能的动作，每当成功执行该动作时，必须运行此回调函数。在这种情况下，它不接受任何额外的参数。

不期望返回值。

示例

此示例将 StateRestore 的 Ajax URL 设置为发送请求的目标

new DataTable('#myTable', {
    ajax: {
        url: '../data/2500States.txt',
        dataSrc: 'data'
    },
    layout: {
        topStart: {
            buttons: [
                'createState',
                {
                    extend: 'savedStates',
                    config: {
                        ajax: '/api/stateControllers/stateRestore'
                    }
                }
            ]
        }
    }
});
````



## create

This option allows for the creation of states to be enabled or disabled.

As default the value is `true`, meaning that states can be created. If this option is set to `false`, then creation will be disabled.

It is also worth noting that if [`save`](#save) is set to `false`, the value set here will be overruled. This is because creation is a form of saving, and is therefore disabled when that option is.

Take a look at [this example](/extensions/staterestore/examples/initialisation/noCreation.html) to see this in action. In this example the configuration takes place in the `-button savedStates` button. This is because we want to block creation via the api, without having to show the `-button createState` button.


### Value (boolean)

This property should be set to a boolean value. `true` if creation is to be enabled (default), `false` if not.


### Example

This example shows the ability to create new states being disabled:

```js
new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                {
                    extend: 'savedStates',
                    config: {
                        create: false
                    }
                }
            ]
        }
    }
});

creationModal

此选项允许向用户显示创建模态框。这允许他们在初始化时设置自定义状态名称，并自定义 DataTables 中哪些元素保存在新状态中。这是通过配置 toggle 选项来完成的。

值 (布尔值)

此属性应设置为布尔值。当此选项设置为 true 时，在创建时会向用户显示一个模态框，允许他们自定义将保存的状态。如果值设置为 false（默认值），则不显示任何创建模态框。在这种情况下，会自动生成名称，并且支持状态保存的所有 DataTables 元素都将保存在新状态中。

示例

此示例启用创建模态框显示

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                'createState',
                {
                    extend: 'savedStates',
                    config: {
                        creationModal: true
                    }
                },
                'colvis'
            ]
        }
    }
});

此示例启用带有切换选项的创建模态框

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                {
                    extend: 'createState',
                    config: {
                        creationModal: true,
                        toggle: {
                            columns: {
                                search: true,
                                visible: true
                            },
                            length: true,
                            order: true,
                            paging: true,
                            scroller: true,
                            search: true,
                            searchBuilder: true,
                            searchPanes: true,
                            select: true
                        }
                    }
                },
                'savedStates',
                'colvis'
            ]
        }
    }
});

preDefined

此选项允许 StateRestore 加载在 DataTables 初始化中设置的预定义状态。此对象包含键值对，其中键是标识符，值是要重新加载的状态。可以使用 state() 方法随时从 DataTable 中检索此状态。

默认情况下，值为一个空对象，这意味着不会将任何预定义状态加载到 StateRestore 中。

查看 此示例以了解其实际应用。

值 (对象)

preDefined 选项的默认值为 {}，这意味着标准情况下没有预定义状态。

定义后，对象的键是状态的标识符，值是要重新加载的状态。可以使用 state() 方法随时从 DataTable 中检索此值。

预定义状态的对应值结构如下。

  • number start - 应显示的第一行。
  • number length - 每页应显示的行数。
  • array order - 应应用于表格的排序。此值与 order 初始化选项中使用的值相同。
  • object search - 这是一个包含搜索详细信息的对象。此值与 search 初始化选项中使用的值相同。
  • array columns - 这是一个对象数组，每个对象对应一列。它有两个属性。
    • columns.visible - 此属性采用与初始化选项 columns.visible 相同的值，true 表示显示，false 表示隐藏。
    • columns.search - 此属性再次采用与 columns.search 初始化选项相同的值。
  • object scroller - 此对象包含四个属性。
    • number baseRowTop - 滚动条以行数为单位滚动的距离。例如，10.5 将显示表格的顶部设置为距顶部 10.5 行。
    • number topRow - 此属性采用与 baseRowTop 相同的值。
    • number baseScrollTop - 滚动条以像素为单位滚动的距离。
    • number scrollTop - 此属性采用与 baseScrollTop 相同的值。
  • object searchBuilder - 此值与 searchBuilder.getDetails() 返回的值相同。
  • object searchPanes - 此对象包含重建 SearchPanes 所需的详细信息，使其与之前相同。并非所有以下数据都要求仅在 SearchPanes 中进行选择。为此，只需要 selectionList 属性。

    • array panes - 此数组包含每个显示的面板的对象。这些对象包含重新加载数据和设置每个 SearchPane 所需的详细信息。
      • array arrayFilter 这是一个数组，包含每个要在 SearchPane 中显示的选项的对象。
        • string display - 这是在 SearchPane 中显示的字符串值。
        • string filter - 这是在使用/对 SearchPane 进行过滤时使用的字符串值。
        • string sort - 这是在 SearchPane 上排序时使用的字符串值。
        • string type - 这是用于确定 SearchPane 上类型的字符串值。
      • object bins - 此对象对于此面板列中的每个不同值都具有键值对。键是不同值，值是该值在列中出现的次数。
      • boolean collapsed - 上次状态保存时此面板是否已折叠。
      • number id - 面板 ID，对应于其附加到的列索引。
    • array selectionList - 此数组包含每个显示的面板的对象。这些对象包含有关每个面板中所做选择的详细信息。
      • number column - 选择附加到的面板索引。
      • array rows - 此数组包含要选择的筛选器值。
  • object select - 此对象包含 3 个属性，这些属性是进行先前存在的选择的必要条件。
    • array rows - 此数组包含与要选择的所有行相对应行的所有行 ID。它与 rows().ids() 返回的值相同。
    • array columns - 此数组包含要选择的列的列索引。
    • array cells - 此数组包含每个具有两个属性的对象。这些属性指示应选择哪个单元格。
      • string row - 要选择的单元格的行 ID。
      • number column - 要选择的单元格的列索引。

示例

此示例为 StateRestore 设置预定义状态，当用户首次加载页面时，此状态将显示给最终用户。

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                'createState',
                {
                    extend: 'savedStates',
                    config: {
                        preDefined: {
                            'Order 3': {
                                start: 0,
                                length: 10,
                                order: [[1, 'asc']],
                                search: {
                                    search: '',
                                    smart: true,
                                    regex: false,
                                    caseInsensitive: true
                                },
                                columns: [
                                    {
                                        visible: true,
                                        search: {
                                            search: '',
                                            smart: true,
                                            regex: false,
                                            caseInsensitive: true
                                        }
                                    },
                                    {
                                        visible: true,
                                        search: {
                                            search: '',
                                            smart: true,
                                            regex: false,
                                            caseInsensitive: true
                                        }
                                    },
                                    {
                                        visible: true,
                                        search: {
                                            search: '',
                                            smart: true,
                                            regex: false,
                                            caseInsensitive: true
                                        }
                                    },
                                    {
                                        visible: true,
                                        search: {
                                            search: '',
                                            smart: true,
                                            regex: false,
                                            caseInsensitive: true
                                        }
                                    },
                                    {
                                        visible: true,
                                        search: {
                                            search: '',
                                            smart: true,
                                            regex: false,
                                            caseInsensitive: true
                                        }
                                    },
                                    {
                                        visible: true,
                                        search: {
                                            search: '',
                                            smart: true,
                                            regex: false,
                                            caseInsensitive: true
                                        }
                                    }
                                ]
                            }
                        }
                    }
                }
            ]
        }
    }
});

remove

此选项允许启用或禁用状态的删除。

查看 此示例 以了解其工作原理。

值 (布尔值)

此选项的默认值为 true，这意味着默认情况下将启用删除状态。设置为 false 以禁用。

示例

禁用新状态的删除

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                'createState',
                {
                    extend: 'savedStates',
                    config: {
                        remove: false
                    }
                }
            ]
        }
    }
});

rename

此选项允许启用或禁用状态的重命名。

还值得注意的是，如果 save 设置为 false，则此处设置的值将被覆盖。这是因为重命名是保存的一种形式，因此在禁用该选项时也会被禁用。

查看 此示例 以了解其工作原理。

值 (布尔值)

此选项的默认值为 true，这意味着默认情况下将启用重命名状态。设置为 false 以禁用。

示例

禁用新状态的重命名

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                'createState',
                {
                    extend: 'savedStates',
                    config: {
                        rename: false
                    }
                }
            ]
        }
    }
});

save

此选项允许启用或禁用状态的保存。

默认情况下，值为 true，表示可以保存状态。如果此选项设置为 false，则更新状态将被禁用，并且创建新状态（这也是保存操作）也将被禁用。

重要的是要注意，这不仅会影响更新状态，还会影响创建和重命名状态。可以使用 create 和 rename 分别控制这些操作，但如果此选项设置为 false，它将覆盖这两个选项。这是因为创建和重命名本身都是保存的一种形式。

查看 此示例 以了解其工作原理。

值 (布尔值)

此选项的默认值为 true，这意味着默认情况下将启用保存状态。设置为 false 以禁用。

示例

禁用新状态的保存

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                {
                    extend: 'savedStates',
                    config: {
                        save: false
                    }
                }
            ]
        }
    }
});

saveState

此选项确定 StateRestore 将保存什么内容。该选项是一个包含布尔值的オブジェクト，每个可以保存的元素都对应一个布尔值。如下所示（请注意，所有默认值为 true）

  • columns - 容器对象
    • columns.search - 此选项允许启用或禁用保存应用于各个列的搜索。
    • columns.visible - 此选项允许启用或禁用保存列的可见性。
  • length - 此选项允许启用或禁用保存页面长度。注意：使用此选项并使用分页保存状态时，StateRestore 将显示在保存状态时显示的第一行作为表的开头。例如，这可能导致一个页面长度为 50 的表，但从第 31 条记录开始。如果不了解页面长度，DataTables 无法计算任何其他起始位置。
  • order - 此选项允许启用或禁用保存表的列排序。
  • paging - 此选项允许启用或禁用保存分页。
  • scroller - 此选项允许启用或禁用保存 scroller 位置。此选项仅在同时使用 StateRestore 和 Scroller 扩展时适用。
  • search - 此选项允许启用或禁用保存搜索。
  • searchBuilder - 此选项允许启用或禁用保存 searchBuilder 状态。此选项仅在同时使用 StateRestore 和 SearchBuilder 扩展时适用。
  • searchPanes - 此选项允许启用或禁用保存 searchPanes 状态。此选项仅在同时使用 StateRestore 和 SearchPanes 扩展时适用。
  • select - 此选项允许启用或禁用保存 select 状态。此选项仅在同时使用 StateRestore 和 Select 扩展时适用。

值 (对象)

此初始化选项是一个对象，其中包含各种布尔值，这些值启用或禁用保存 DataTable 状态的不同元素。

示例

禁用分页保存

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                'createState',
                {
                    extend: 'savedStates',
                    config: {
                        saveState: {
                            paging: false
                        }
                    }
                },
                'colvis'
            ]
        }
    }
});

禁用列可见性保存

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                'createState',
                {
                    extend: 'savedStates',
                    config: {
                        saveState: {
                            columns: {
                                visible: false
                            }
                        }
                    }
                },
                'colvis'
            ]
        }
    }
});

splitSecondaries

此选项允许自定义每个 StateRestore 状态提供的按钮或添加按钮。

默认情况下，值为以下显示的默认按钮数组。这些按钮为 StateRestore 提供所有标准功能。虽然所有默认按钮都存在，但如果 save、rename 或 remove 设置为 false，则相应的按钮仍将被删除。

此选项的配置格式与 buttons.buttons 相同，有关完整详细信息，请参阅那里的文档。

Value (string[])

此选项的默认值为

splitSecondaries: [
    'updateState',
    'renameState',
    'removeState'
]

这些是为 StateRestore 状态提供功能的默认按钮。

示例

自定义 StateRestore 状态拆分下拉菜单中包含的按钮。

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                {
                    extend: 'savedStates',
                    config: {
                        splitSecondaries: [
                            'updateState',
                            'removeState',
                            '<h3>Custom HTML!</h3>',
                            'pdf',
                            {
                                extend: 'renameState',
                                className: 'red-border'
                            }
                        ]
                    }
                },
                'createState'
            ]
        }
    }
});

toggle

此选项允许用户指定创建新状态时应保存哪些元素。该选项是一个包含布尔值的オブジェクト，每个可以保存的元素都对应一个布尔值。设置为 true 时，将在创建模式中显示对应元素的复选框，允许用户决定是否应保存它。

对于支持状态保存的扩展，如果扩展不存在，则无论此处对应的值如何，都不会显示切换选项。

为了显示创建模式，必须将 creationModal 设置为 true。

值 (对象)

此选项的默认值为与 saveState 选项格式相同的对象。这将允许用户配置要为每个支持状态保存的 DataTables 元素保存的内容。默认值为

{
    columns: {
        search: false,
        visible: false
    },
    order: false,
    paging: false,
    scroller: false,
    search: false,
    searchBuilder: false,
    searchPanes: false,
    select: false
}

示例

启用分页保存自定义

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                {
                    extend: 'createState',
                    config: {
                        toggle: {
                            paging: true
                        }
                    }
                },
                'savedStates',
                'colvis'
            ]
        }
    }
});
页面导航

DataTables

DataTables 由 SpryMedia Ltd 设计和创建。
© 2007-2024 MIT 许可证。 隐私政策。 支持者。


SpryMedia有限公司在苏格兰注册，公司编号为SC456502。