EasyUI jQuery 标签小部件(1)

📌 相关文章

📜 EasyUI jQuery 标签小部件(1)

📅 最后修改于: 2023-12-03 15:30:35.532000 🧑 作者: Mango

EasyUI jQuery 标签小部件

EasyUI jQuery 标签小部件是一款基于 jQuery 和 EasyUI 的标签选择器，可以用于选择多个标签。它提供了简单易用、高度可定制的 API 和 UI。

特征

以下是 EasyUI jQuery 标签小部件的主要特征：

支持多选和单选模式
支持自定义标签样式和主题
支持异步数据加载
支持键盘快捷键
可编程修改和获取值
提供灵活的事件接口

安装和使用

下载并引入 EasyUI 和 jQuery 库文件。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/easyui@1.10.0/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/easyui@1.10.0/themes/icon.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/easyui@1.10.0/jquery.easyui.min.js"></script>

创建 DOM 元素。

<input id="tags" class="easyui-tagbox" style="width:300px;height:32px;"
       data-options="url:'tags.json', valueField:'id', textField:'text', limitToList:true"
       />

初始化标签小部件。
```
$('#tags').tagbox();
```

选项

以下是可用的选项：

url: String, 远程数据源的 URL。
data: Array, 本地数据源。
valueField: String, 数据项值字段的名称。
textField: String, 数据项文本字段的名称。
groupField: String, 分组字段的名称。
groupFormatter: Function, 分组标题的格式化函数。
panelWidth: Number, 下拉面板的宽度。
panelHeight: Number, 下拉面板的高度。
panelMinWidth: Number, 下拉面板的最小宽度。
panelMaxWidth: Number, 下拉面板的最大宽度。
panelMinHeight: Number, 下拉面板的最小高度。
panelMaxHeight: Number, 下拉面板的最大高度。
disabled: Boolean, 是否禁用标签小部件。
readonly: Boolean, 是否将标签小部件设置为只读模式。
multiple: Boolean, 是否启用多选模式。
limitToList: Boolean, 是否限制用户只能选择下拉列表中的值。
hasDownArrow: Boolean, 是否显示下拉箭头。
keyHandler: Object, 自定义键盘处理函数。
formatter: Function, 数据项显示的格式化函数。
loader: Function, 远程数据加载函数。
onLoadSuccess: Function, 数据加载成功后的回调函数。
onLoadError: Function, 数据加载失败后的回调函数。
onChange: Function, 值变更后的回调函数。

方法

以下是可用的方法：

getValue: 获取当前选中值。
setValue: 设置当前选中值。
getData: 获取所有数据源。
setData: 设置所有数据源。
getText: 获取当前选中文本。
setText: 设置当前选中文本。
selectAll: 选中所有可选项。
unselectAll: 取消选中所有选项。
selectAllGroup: 选中所有分组。
unselectAllGroup: 取消选中所有分组。
select: 根据值或索引选中一个选项。
unselect: 取消选中一个选项。
scrollTo: 滚动到指定项。
reload: 重新加载数据源。

事件

以下是可用的事件：

onLoadSuccess: 远程数据加载成功后的回调函数。
onLoadError: 远程数据加载失败后的回调函数。
onBeforeLoad: 远程数据加载前的回调函数。
onChange: 值变更后的回调函数。
onSelect: 选中一个选项时的回调函数。
onUnselect: 取消选中一个选项时的回调函数。
onSelectAll: 选中所有选项时的回调函数。
onUnselectAll: 取消选中所有选项时的回调函数。

示例

以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI TagBox Demo</title>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/easyui@1.10.0/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/easyui@1.10.0/themes/icon.css">
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/easyui@1.10.0/jquery.easyui.min.js"></script>
</head>
<body>
    <input id="tags" class="easyui-tagbox" style="width:300px;height:32px;"
          data-options="url:'tags.json', valueField:'id', textField:'text', limitToList:true"
          />
    <script type="text/javascript">
        $(function(){
            $('#tags').tagbox({
                onSelect: function(record){
                    console.log('Selected:', record);
                },
                onChange: function(newValue, oldValue){
                    console.log('Changed:', newValue, oldValue);
                }
            });
        });
    </script>
</body>
</html>

总结

EasyUI jQuery 标签小部件是一款易用、可定制的多选选择器，支持异步数据加载、键盘快捷键和灵活的事件接口。已经应用于许多企业应用程序和网站中，深受广大开发者的喜爱。