表格编辑器 MDB Pro component

表格编辑器-Bootstrap 5和Material Design 2.0插件

表编辑器是用于显示和管理数据的有用工具。该组件的工作原理类似 到数据表（ docs ） 带有用于操作按钮的附加列。

注意：阅读 API 标签以找到所有可用选项，然后 高级定制

基本例子

您可以通过添加 table 元素来初始化组件 table-editor 类的包装器。在此版本中，您不需要任何其他操作 JavaScript-将所有选项设置为data-mdb-attributes（表设置-包装器元素，列 设置- th 元素）。

启用编辑模式后，用户将无法与您的其他部分进行互动 网站，因为它可能会导致未保存的更改丢失。您可以使用切换禁用状态 edit.mdb.tableEditor 和 exit.mdb.tableEditor 事件。

注意：搜索字段和“添加”按钮不是表格编辑器的内置部分， 但是您可以通过添加最简单的形式轻松地初始化这些功能 data-mdb-归因于它们（data-mdb-select，data-mdb-add-entry和data-mdb-target）。

表格编辑器从HTML标记中收集信息以创建数据结构- 在DOM中，＆lt; table＆gt; 元素将在DOM中替换为其他节点 组件初始化。

Company Address Employees
Smith & Johnson Park Lane 2, London 30
P.J. Company Oak Street 7, Aberdeen 80
Food & Wine Netherhall Gardens 3, Hampstead 12
IT Service Warwick Road 14, London 17
A. Jonson Gallery Oaklands Avenue 2, London 4
F.A. Architects Frognal Way 7, Hampstead 4

模态

要将默认编辑模式（内联）更改为模式版本，请设置选项 mode 更改为“ modal” 。

输入示例

表格编辑器支持多种输入类型-例如，如果您想强制用户输入 只有一列中的布尔值，您可以设置其 inputType 到复选框。

Supported input types:

  • Text (default)
  • Number
  • Checkbox - displays a checkbox in edit mode and true/false value otherwise
  • Select - additionally requires an array of options

禁用编辑

您可以通过将列的 editable 选项设置为来禁用对列的编辑 false 。用户将无法在编辑模式下更改其值。

确认删除

如果要防止意外删除数据，可以设置一个 true 的 confirm 选项。在这种情况下，表格编辑器将显示一个 删除条目之前使用Popconfirm元素。

异步数据

在等待来自API的数据时，可以通过以下方式阻止用户与表编辑器进行交互： 将 loading 选项设置为 true 。

自定义行

add（）方法采用可选参数-一行值将为 预加载到新条目中。

注意：为此特殊用途，必须将一行作为对象。

注意：由于添加按钮是手动初始化的，因此不会自动 在编辑模式下禁用。

M.B.

(5 Avenue 26, New York)

Berkley & Clark

(43th Street 12, New York)

D&D Inc.

(14 Street 67, New York)

Thomas & Co.

(2 Avenue 54, New York)

通知事项

在此示例中，自定义事件的处理程序会在之后触发通知 添加/删除/更新条目。

黑暗

深色模式可以同时应用于模式版本和内联版本-首先，添加一个CSS类， 更改页面的背景色。其次，将相同的类名传递给 表格编辑器的 color 选项（例如'bg-dark'）。现在将字体更改为浅色 通过将 dark 属性设置为 true 。

提示：将 form-white 类添加到搜索输入的包装中。

Company Address Employees
Smith & Johnson Park Lane 2, London 30
P.J. Company Oak Street 7, Aberdeen 80
Food & Wine Netherhall Gardens 3, Hampstead 12
IT Service Warwick Road 14, London 17
A. Jonson Gallery Oaklands Avenue 2, London 4
F.A. Architects Frognal Way 7, Hampstead 4

表格编辑器 - API

用法

通过数据属性

使用表格编辑器组件不需要任何其他JavaScript代码-只需添加一个 带有表“表编辑器”类的div包装器，并使用数据属性设置所有 选项。


        <div class="d-flex justify-content-end mb-4">
          <div class="form-outline">
            <input
              data-mdb-search
              data-mdb-target="#table_1"
              type="text"
              id="search_table_1"
              class="form-control"
            />
            <label class="form-label" for="search_table_1">Search</label>
          </div>
          <button class="btn btn-primary btn-sm ms-3" data-mdb-add-entry data-mdb-target="#table_1">
            <i class="fa fa-plus"></i>
          </button>
        </div>
        <hr />
        <div
          class="table-editor"
          id="table_1"
          data-mdb-mode="modal"
          data-mdb-entries="5"
          data-mdb-entries-options="[5, 10, 15]"
        >
          <table></table>
        </div>

通过JavaScript

如果您希望使用JavaScript渲染表，请使用TableEditor初始化实例 构造函数。


        const table = document.getElementById('my-table');
        const tableEditor = new TableEditor(table, { rows: [], columns: [], {
          mode: 'modal',
          entries: 5,
          entriesOptions: [5, 10, 15]
        }})

通过jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own. 


        $('#my-tableEditor').tableEditor({
          columns: [
            { label: 'Column 1', width: 100, fixed: true, sort: false },
            { label: 'Column 2'}
          ],
          rows: [
            ['Value 1', 'Value 2']
          ]
        }, {
           bordered: true
        })

        // Calling .update() with the jQuery interface:

        $('#my-tableEditor').tableEditor('update', { rows: [...], columns: [...]}, { bordered: true, loading: false })

选件

Name Type Default Description
actionHeader String 'Actions' Header for action buttons
actionPosition String 'end' Decides where to render an action column (start/end)
bordered Boolean false Adds borders to a datatable
borderless Boolean false Removes all borders from a datatable
borderColor String Changes a border color to one of main colors
cancelText String 'Cancel' Text displayed in cancel buttons
confirm Boolean false Displays a Popconfirm element before removing an entry
confirmText String 'Delete' Text displayed in confirm buttons (Popconfirm)
confirmMessage String 'Are you sure you want to delete this entry?' Text displayed in a Popconfirm element
color String Adds a color class to a datatable (f.e 'bg-dark')
dark Boolean false Changes a font color to white
defaultValue String '-' This string will be used as a placeholder if a row doesn't have a defined value for a column
entries Number 10 Number of visible entries (pagination)
entriesOptions Array [10, 25, 50, 200] Options available to choose from in a pagination select (rows per page)
fixedHeader Boolean false When it's set to true, the table's header will remain visible while scrolling
fullPagination Boolean false Displays additional buttons for the first and last pages
hover Boolean false Changes the background color of a hovered row
loading Boolean false Sets the loading mode - disables interactions and displays a loader
loaderClass String 'bg-primary' The class name for a loader (loading mode)
loadingMessage String 'Loading results...' A message displayed while loading data
maxWidth Number|String Sets a maximum width of a datatable - can be either a string ('10%') or a number of pixels.
maxHeight Number|String Sets a maximum height of a datatable - can be either a string ('10%') or a number of pixels.
mode String 'inline' Changes edit mode - available options: 'inline', 'modal'
newItemHeader String 'New item' A header of modal
noFoundMessage String 'No matching results found' A message displayed when a table is empty
pagination Boolean true Shows/hides the pagination panel
saveText String 'Save' Text displayed in the save button (modal)
sm Boolean false Decreases a row's paddings
striped Boolean false Slightly changes the background's color in every other row
rowsText String 'Rows per page': A text indicating a number of rows per page

选项（列）

Name Type Default Description
defaultValue String Default value only for one column
editable Boolean true Enables/disabled editing fields in this column
field String '' A field's name - will be used as a key for values in rows
fixed Boolean|String false When set to true, makes a column stick on the left while scrolling. Changing its value to right will do the same on the other side. For this option to work, you need to define width as well.
inputType String 'text' Input type for a column. Available options: 'text', 'number', 'checkbox', 'select'
label String '' A displayed header of a column
options Array Array of options (for column with a "select" input type)
sort Boolean true Enables/disables sorting for this column
width Number A column's width in pixels

方法

Name Description Example
add Adds a new row (default values are optional) instance.add(row: Object)
update Updates and rerenders datatable instance.update(data: Object, options: Object)
search Filters rows so there are only those containing the searched phrase instance.search(phrase: String, column: String|Array (optional))
dispose Removes the component's instance instance.dispose()

    大事记

    Name Description
    add.mdb.tableEditor This event fires after adding a new row
    delete.mdb.tableEditor This event fires after deleting a row
    edit.mdb.tableEditor This event fires when user enters edit mode
    exit.mdb.tableEditor This event fires when user exits edit mode
    update.mdb.tableEditor This event fires in an editable mode when a user updates values. You can access the upsdated data inside a listener's handler with event.rows and event.columns fields.
    updateEntry.mdb.tableEditor This event fires after saving changes in an existing row.
    render.mdb.tableEditor Event emitted after the component renders/updates rows.

      进口

      MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件：

      
        import { TableEditor } from 'mdb-table-editor';