转让 MDB Pro component

转移-Bootstrap 5和Material Design 2.0插件

传输组件使您可以在两列之间传输数据。

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


基本例子

要创建基本示例,只需添加主div容器并通过JavaScript对其进行初始化。


残疾人用品

要使某些元素无法选择,只需添加 'disabled:true'属性设置为正确的项目。


检查项目

通过在初始化期间向项目添加属性'checked:true',您可以 元素标记。


单程

通过添加'oneWay:true'属性,您可以设置组件以传输数据 仅到目标表。


分页

通过添加'pagination:true',您可以在传输组件上设置分页。


分页与自定义数量

此外,如果要设置每页的自定义元素数量,则只需使用 'elementsPerPage'属性。


转让 - API


用法

通过JavaScript


        const transfer = new Transfer(document.getElementById('mdb-transfer'), options)
      

通过jQuery

注意:默认情况下,MDB 包含jQuery,并且您拥有 自行添加到项目中。


        $('.example-class').transfer(options);
      

选件

Name Type Default Description
dataTarget Array '[]' Add data to target table
dataSource Array '[]' Add data to source table
elementsPerPage Number '5' Work only with 'pagination:true'. Set number of items per page
oneWay Boolean 'false' Allows you to set a way of sending data between tables
pagination Boolean 'false' Add pagination to your transfer component
search Boolean 'false' Add search box to trnsfer component
selectAll Boolean 'true' Add select all checkbox to component
titleTarget String 'Target' Changes title of target table
titleSource String 'Source' Changes title of source table
toTargetArrow String '' Changes text of right arrow
toSourceArrow String '' Changes test of left arrow

方法

Name Description Example
dispose Manually removes transfer transfer.dispose()

        const transferEl = document.getElementById('mdb-transfer'); 
        const transfer = new Transfer(transferEl);
        transfer.toggle();
      

大事记

Name Description
change.mdb.transfer This event fires immediately when the data changes.
search.mdb.transfer This event fires immediately when you search some items in search box.
select.mdb.transfer This event fires immediately when you select some item.

        const transferEl = document.getElementById('mdb-transfer')
        transferEl.addEventListener('change.mdb.transfer', (e) => {
          // do something...
        })
      

进口

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


        import { Transfer } from 'mdb-ui-kit';