表格编辑器 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中,< table>
元素将在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';