Frappe DataTable 配置

Frappe DataTable 有很多可定制的特性，本节专门讨论启用/禁用相关的功能。

Container

DataTable 构造函数所需的第一个参数是Container。可以传入 CSS 选择器或 DOM 对象。

const datatable = new DataTable('#datatable', options);
// or
const container = document.querySelector('#datatable');
const datatable = new DataTable(container, options);

Options

DataTable 构造函数所需的第二个参数是 options 对象。所需的最小配置是传递 column 和 data 值。

const options = {
    columns: ['Name', 'Position', 'Salary'],
    data: [
        ['John Doe', 'DevOps Engineer', '$12300'],
        ['Mary Jane', 'UX Design', '$14000'],
    ]
}

const datatable = new DataTable(container, options);

下列选项是可配置的:

columns

Type: Array 类型: Array
Default: []
Required 需要

所需的最小化是传递列标头名称列表

const options = {
    columns: ['Name', 'Position', 'Country']
}

同时也可以针对每列传递对象数组：

const options = {
    columns: [
        {
            name: 'Name',
            id: 'name',
            editable: false,
            resizable: false,
            sortable: false,
            focusable: false,
            dropdown: false,
            width: 32,
            format: (value) => {
                return value.bold();
            }
        },
        ...
    ]
}

column / name

Type: String 类型: String
Required 需要

column / id

Type: String
Default: Slugified version of name

column / editable

Type: Boolean
Default: true

如果设置为 false，则整个列将是只读的

column / resizable

Type: Boolean
Default: true

If this is set to false, the column width will be fixed and is not resizable using mouse drag 如果设置为 false，则列宽将是固定的，不能使用鼠标拖动来调整大小

column / sortable

Type: Boolean
Default: true

If this is set to false, the column is not sortable using column actions 如果设置为 false，则不能使用列操作对列进行排序

column / focusable

Type: Boolean
Default: true

If this is set to false, the cells in the column is not focusable on click 如果设置为 false，则单击时列中的单元格不可聚焦

Type: Boolean
Default: true

Show / Hide the dropdown action button on column header 显示/隐藏列标题上的下拉操作按钮

column / width

Type: Number 类型: Number

If the layout option is set to - fluid, then this value doesn't have any effect - fixed, then this value is set in pixels - ratio, then this value works similar to flex property in CSS. So, if column A has width: 1 and column B has width: 2, then column B will occupy twice as much width as column A 如果 layout 选项设置为- fluid ，则此值没有任何效果- fixed ，则此值以像素 - ratio 设置，则此值的工作方式类似于 CSS 中的 flex 属性。因此，如果列 A 有 width: 1 而列 B 有 width: 2 ，那么列 B 将占用两倍于列 A 的宽度

column / format

Type: Function
Default: null

Custom Formatter function that is passed the value of the cell. You can process the value and return any valid HTML to customize how the cell is rendered. 传递单元格值的自定义 Formatter 函数。您可以处理该值并返回任何有效的 HTML 来自定义单元格的呈现方式。

data 资料

Type: Array 类型: Array
Default: []
Required 需要

The minimum required value is to pass an array of array of cell values. The order of cell values should match with the order of columns passed 所需的最小值是传递单元格值数组。单元格值的顺序应与传递的列的顺序相匹配

const options = {
    columns: ['Name', 'Position', 'Country'],
    data: [
        ['Faris', 'Software Developer', 'India'],
        ['Kenneth', 'Marketing Engineer', 'India']
    ]
}

You can also pass an Object Descriptor for each cell value 还可以为每个单元格值传递对象描述符

const options = {
    columns: ['Name', 'Position', 'Country'],
    data: [
        [
            {
                content: 'Faris',
                // disable editing just for this cell
                editable: false,
                // format function takes precedence over
                // the format function defined in column header
                format: (value) => {
                    return value.fontcolor('blue');
                }
            },
            ...
        ],
        ...
    ]
}

getEditor GetEditor

Type: Function 类型: Function
Default: null

By default, all cells in DataTable are editable. If you want to customize the editor behaviour you can use this option. 默认情况下，DataTable 中的所有单元格都是可编辑的。如果要自定义编辑器行为，可以使用此选项。

Here is an example to hook a custom date input while editing: 下面是一个在编辑时钩住自定义日期输入的示例:

const d = new DataTable({
    ...
    getEditor(colIndex, rowIndex, value, parent, column, row, data) {
        // colIndex, rowIndex of the cell being edited
        // value: value of cell before edit
        // parent: edit container (use this to append your own custom control)
        // column: the column object of editing cell
        // row: the row of editing cell
        // data: array of all rows

        const $input = document.createElement('input');
        $input.type = 'date';
        parent.appendChild($input);

        return {
            // called when cell is being edited
            initValue(value) {
                $input.focus();
                $input.value = parse(value);
            },
            // called when cell value is set
            setValue(value) {
                $input.value = parse(value);
            },
            // value to show in cell
            getValue() {
                return format($input.value);
            }
        }
    }
    ...
})

serialNoColumn

Type: Boolean
Default: true

Whether to show serial number as the first column in datatable. 是否将序列号显示为数据表中的第一列。

checkboxColumn

Type: Boolean
Default: false

Whether to show checkbox column in the datatable. 是否在数据表中显示复选框列。

clusterize 聚集

Type: Boolean 类型: Boolean
Default: true

Whether to use clusterize to render the data. 是否使用群集来呈现数据。

If you don't want to show large number of rows. Then you can turn this off. In that case you don't need to load the clusterize.js lib 如果不想显示大量行。然后你就可以把这个关掉了。在这种情况下，您不需要加载 clusterize.js 库

layout 布局

Type: String 类型: String
Default: fixed
Options: fixed | fluid | ratio

This option controls how width of each column is calculated in the DataTable. 此选项控制如何在 DataTable 中计算每个 column 的宽度。

fixed 修好了

The column width is calculated based on the content of the first row of the table. This layout can result in horizontal scroll. 根据表的第一行的内容计算列宽。这种布局可以导致水平滚动。

fluid 液体

The column width is adjusted based on the width of container. So the columns will be resized if the window is resized. This layout won't result in horizontal scroll. You will always see all the columns. 根据容器的宽度调整列的宽度。因此，如果窗口调整了大小，列的大小就会调整。这种布局不会导致水平滚动。你总能看到所有的柱子。

ratio 比率

This layout works similar to the flex property in CSS. When column A has width set as 1 and column B as 2, then column B's width will be twice as much as column A. 此布局的工作方式类似于 CSS 中的 flex 属性。如果列 A 将 width 设置为 1 ，而列 B 设置为 2 ，则列 B 的宽度将是列 A 的两倍。

noDataMessage

Type: String
Default: No Data

The message shown when there are no rows to show in the DataTable. 在 DataTable 中没有要显示的行时显示的消息。

dynamicRowHeight

Type: Boolean
Default: false

The height of the row will be set according to the content of the cell with the maximum height in that row. 行的高度将根据该行的最大高度的单元格内容设置。

cellHeight 牢房高度

Type: Number 类型: Number
Default: null

Set the height of each cell explicitly. 显式设置每个单元格的高度。

If this value is set, dynamicRowHeight won't have any effect. 如果设置了此值， dynamicRowHeight 将不会产生任何效果。

inlineFilters

Type: Boolean
Default: false

Whether to enable the inline filter feature. If the value is true, then you can activate the filter row by pressing Ctrl/Cmd + F after clicking on any cell in the DataTable. 是否启用内联筛选器特性。如果该值为 true ，则可以在单击 DataTable 中的任何单元格后按 Ctrl/Cmd + F 激活筛选器行。

treeView TreeView

Type: Boolean 类型: Boolean
Default: false

Whether to render rows in a tree structure. For this to work, you must pass the indent value for each row. 是否呈现树结构中的行。为此，必须为每行传递 indent 值。

Example 例子

const data = [
    {
        'Department': 'IT Department',
        'No of People': '10',
        'indent': 0,
    },
    {
        'Department': 'Javascript Team',
        'No of People': '5',
        'indent': 1,
    },
    {
        'Department': 'Vue.js Team',
        'No of People': '3',
        'indent': 2,
    },
    {
        'Department': 'React Team',
        'No of People': '2',
        'indent': 2,
    },
    {
        'Department': 'Design Team',
        'No of People': '5',
        'indent': 1,
    },
]

const datatable = new DataTable('#datatable', {
    columns: ['Department', 'No of People'],
    data: data
});

checkedRowStatus 检查 RowStatus

Type: Boolean 类型: Boolean
Default: true

Whether to show the number of rows checked in a toast message. 是否在祝酒词消息中显示已检查的行数。

pasteFromClipboard 剪贴板

Experimental
Type: Boolean
Default: false

Whether to allow the user to paste copied content into selected cell(s). 是否允许用户将复制的内容粘贴到选定的单元格中。

dropdownButton

Type: String
Default: ▼

String to render as the dropdown button. You can pass a span with an icon class. 字符串作为下拉按钮呈现。您可以使用图标类传递 span。

Example 例子

{
    dropdownButton: '<span class="fa fa-chevron-down"></span>'
}

headerDropdown

Type: Array 类型: Array

When you hover over any column, you see the dropdown button which is used to perform certain actions for that column. This option allows you to pass an array of custom buttons custom actions defined by you. 当你将鼠标悬停在任何一列上时，你会看到一个下拉按钮，用于为该列执行某些操作。此选项允许您传递由您定义的自定义按钮自定义操作的数组。

options = {
    headerDropdown: [
        {
            label: 'Copy column contents',
            action: function (column) {
                // code to copy the column contents
            }
        },
}

events 事件

Type: Object 类型: Object
The events options is described in detailed in the next section. 下一节将详细描述事件选项。

Frappe DataTable 配置

Container ​

Options ​

columns ​

column / name ​

column / id ​

column / editable ​

column / resizable ​

column / sortable ​

column / focusable ​

column / dropdown ​

column / width ​

column / format ​

data 资料 ​

getEditor GetEditor ​

serialNoColumn ​

checkboxColumn ​

clusterize 聚集 ​

layout 布局 ​

fixed 修好了 ​

fluid 液体 ​

ratio 比率 ​

noDataMessage ​

dynamicRowHeight ​

cellHeight 牢房高度 ​

inlineFilters ​

treeView TreeView ​

checkedRowStatus 检查 RowStatus ​

pasteFromClipboard 剪贴板 ​

dropdownButton ​

headerDropdown ​

events 事件 ​