EasyUI jQuery tagbox Widget

介绍

EasyUI jQuery tagbox Widget 是一款基于 jQuery 和 EasyUI 的标签框部件。它可以在输入框中快速创建和选择标签，并支持定制化的样式和行为。此部件通常用于表单中，以便用户可以轻松选择或输入标签。

功能

• 支持自动完成
• 支持添加和删除标签
• 支持设置标签的颜色和名字
• 支持显示预选项
• 支持自定义的搜索和筛选标签

使用

<!-- 引用 EasyUI 的样式和脚本 -->
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

<!-- 引用 EasyUI 的 tagbox 组件 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.5/themes/icon.css"/>
<script type="text/javascript" src="jquery-easyui-1.9.5/jquery.easyui.min.js"></script>

<!-- 创建 tagbox -->
<div class="easyui-tagbox" style="width:200px;height:32px;">
    <input class="easyui-combobox" style="width:150px;height:22px;">
</div>

选项

• width: 组件的宽度（默认值：空）
• height: 组件的高度（默认值：空）
• editable: 是否可以手动输入（默认值：true）
• limitToList: 是否限制输入的内容必须在给定的列表中（默认值：true）
• hasDownArrow: 是否显示下箭头（默认值：true）
• buttonIcon: 按钮图标的 CSS 类（默认值：'icon-search'）
• buttonAlign: 按钮在输入框中的位置（可选值：'left'，'right'，默认值：'right'）
• buttonText: 按钮文本（默认值：空）
• buttonCls: 按钮的 CSS 类（默认值：空）
• mode: 组件的模式，可选值包括 'default'，'removable'，'selector'，'non-editable'，'borderless'，默认值：'default'
• prompt: 输入框中的提示文本（默认值：'请输入查询...'）
• delay: 自动完成的延迟时间，单位为毫秒（默认值：300）
• url: 自动完成的 URL（默认值：空）
• method: 自动完成的请求方法（默认值：'post'）
• queryParams: 请求的额外参数（默认值：空）
• showItemTip: 是否显示项目提示（默认值：true）
• formatter: 项目格式化函数，函数参数包括 'row'，'index'，返回值为处理后的字符串（默认值：function(row){return row}）
• inputEvents: 输入框的事件对象（默认值：空）
• onShowPanel: 显示下拉面板时触发的函数（默认值：function(){}）
• onHidePanel: 隐藏下拉面板时触发的函数（默认值：function(){}）
• onSelect: 选择项目时触发的函数，函数参数包括 'row'，'index'（默认值：function(){}）
• onUnselect: 取消选择项目时触发的函数，函数参数包括 'row'，'index'（默认值：function(){}）
• onInputBlur: 输入框失去焦点时触发的函数（默认值：function(){}）
• onInputEnter: 按下回车键时触发的函数，函数参数为输入框的值（默认值：function(value){}）
• onInputCompositionStart: 开始输入时触发的函数，函数参数为输入框的值（默认值：function(value){}）
• onInputCompositionUpdate: 输入内容更新时触发的函数，函数参数为输入框的值（默认值：function(value){}）
• onInputCompositionEnd: 输入结束时触发的函数，函数参数为输入框的值（默认值：function(value){}）

方法

• setValue(value): 设置组件的值，参数 'value' 可以是一个数组或以逗号分隔的字符串
• getValue(): 获取组件的值，返回值是一个数组
• clear(): 清空组件
• loadData(data): 加载下拉列表，并将选择的项目设置为当前值
• reload(): 重新加载下拉列表，并将选择的项目设置为当前值
• resize(): 重新设置组件的大小和位置

例子

<!-- HTML -->
<div class="easyui-tagbox" style="width:400px;height:32px;">
    <div data-value="red" data-name="红色" style="background-color:red;color:white;">红色</div>
    <div data-value="green" data-name="绿色" style="background-color:green;color:white;">绿色</div>
    <div data-value="blue" data-name="蓝色" style="background-color:blue;color:white;">蓝色</div>
    <div data-value="yellow" data-name="黄色" style="background-color:yellow;">黄色</div>
    <div data-value="black" data-name="黑色" style="background-color:black;color:white;">黑色</div>
</div>

<!-- JavaScript -->
<script type="text/javascript">
    $('.easyui-tagbox').tagbox({
        mode: 'selector',
        valueField: 'data-value',
        textField: 'data-name'
    });
</script>

结论

EasyUI jQuery tagbox Widget 是一款易于使用和定制的标签框部件。它可以帮助您在表单中提供更好的用户体验，并为用户快速选择或输入标签提供便利。如果您想要获得更多关于 EasyUI 的信息，请参考官方文档。