SearchPanes 布局

您可以为 SearchPanes 定义自己的布局。在您的页面上加入 SearchPanes 时,这允许进行更加定制的体验。

设置窗格的位置

通过利用 dom 特性,可以选择窗格相对于主数据表的显示位置。与 dom 特性搭配使用时,SearchPanes 会以 dom 特性中的 P 字符作为别名。建议的布局和 dom 初始化如下

{
    dom: 'Pfrtip'
}

这将确保窗格置于数据表上方。如果您想让窗格显示在表格、分页和信息部分的下方,则需要初始化如下

{
    dom: 'frtipP'
}

设置一行中窗格的数量

默认情况下,SearchPanes 将在完整的桌面显示器上以每行三个窗格的宽度显示窗格,内置一个响应式元素,以根据屏幕宽度来调整此宽度。如果您想覆盖此默认设置,可以定义 SearchPanes 容器中每行显示的窗格数量,如下所示

{
    searchPanes: {
        layout: `columns-2'
    },
    dom: 'Pfrtip'
}

上述初始化将允许窗格以每列 2 个窗格的宽度显示。共有 6 个受支持的选项 - 分别从 1 到 6。

垂直显示窗格

还可以通过如下操控 dom 特性,在数据表旁边垂直显示窗格

{
    searchPanes:{
        layout: 'columns-1'
    },
    dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"frtip>>'
}

这将在数据表的左侧显示窗格。