Bootstrap Dual Listbox 初始化及数据选中方法

Bootstrap Dual Listbox 初始化及数据选中方法

本文介绍如何使用 Bootstrap Dual Listbox 插件初始化双列表框，并设置选项标签、选择操作、过滤功能等，并提供如何设置初始选中数据的方法。

1. 初始化双列表框

$('.dual_select').bootstrapDualListbox({
    nonSelectedListLabel: '可选密钥模板',
    selectedListLabel: '已选密钥模板',
    preserveSelectionOnMove: 'moved',
    moveOnSelect: false,           // 出现一个剪头，表示可以一次选择一个
    filterTextClear: '展示所有',
    moveSelectedLabel: '添加',
    moveAllLabel: '添加所有',
    removeSelectedLabel: '移除',
    removeAllLabel: '移除所有',
    infoText: '共{0}个',
    showFilterInputs: false,       // 是否带搜索
    selectorMinimalHeight: 160
});

2. 初始化已选择的数据内容

$('.dual_select').bootstrapDualListbox('select', ['item1', 'item2', 'item3']);

代码解释：

• $('.dual_select')：选择要初始化的双列表框元素。
• bootstrapDualListbox()：调用 Bootstrap Dual Listbox 插件的初始化方法。
• nonSelectedListLabel：未选中列表的标题。
• selectedListLabel：已选中列表的标题。
• preserveSelectionOnMove：移动选项时是否保留选中状态。
• moveOnSelect：是否在选中选项时立即移动到另一列表。
• filterTextClear：过滤框清除按钮的文本。
• moveSelectedLabel：移动选中选项按钮的文本。
• moveAllLabel：移动所有选项按钮的文本。
• removeSelectedLabel：移除选中选项按钮的文本。
• removeAllLabel：移除所有选项按钮的文本。
• infoText：列表信息提示文本。
• showFilterInputs：是否显示过滤框。
• selectorMinimalHeight：双列表框最小高度。
• 'select'：调用 bootstrapDualListbox 方法的 select 方法，用于设置初始选中数据。
• ['item1', 'item2', 'item3']：要初始选中的数据列表。

注意：

• 确保在使用 Bootstrap Dual Listbox 插件之前，已经引入了该插件的 CSS 和 JavaScript 文件。
• item1, item2, item3 应替换为实际要选中的数据。

希望本文能够帮助你理解如何使用 Bootstrap Dual Listbox 插件初始化双列表框并设置初始选中数据。