EasyUI jQuery tagbox Widget

下面我会为你详细讲解EasyUI jQuery tagbox Widget的完整攻略。这个Widget是EasyUI的一个常用组件之一，用于实现多个标签的展示和选择。下面我们将分为以下几个方面来进行讲解：

1. 引入EasyUI和tagbox组件
2. tagbox基本用法
3. tagbox常用配置项
4. tagbox事件

接下来，我们将逐一进行讲解。

1. 引入EasyUI和tagbox组件

首先，我们需要引入EasyUI和tagbox组件，代码如下：

<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/easyui/1.7.0/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/easyui/1.7.0/themes/icon.css">
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/easyui/1.7.0/jquery.easyui.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/easyui/1.7.0/locale/easyui-lang-zh_CN.js"></script>

这里我们使用的是EasyUI的Bootstrap主题，如果您使用的是其他主题，需要修改上述链接。引入完毕后，我们就可以使用EasyUI和tagbox组件了。

2. tagbox基本用法

tagbox组件的基本用法非常简单，只需要在一个<div>标签中添加<input>标签，并在<input>标签上使用class="easyui-tagbox"即可。代码如下：

<div>
  <input class="easyui-tagbox" style="width: 300px;">
</div>

上述代码中，我们创建了一个300px宽的tagbox组件，此时tagbox中并没有任何标签。我们可以使用jQuery的方式向tagbox中添加标签，具体代码如下：

$('.easyui-tagbox').tagbox('setValues', ['标签一', '标签二', '标签三']);

这里我们向tagbox中添加了三个标签。我们可以在页面中看到，tagbox的输入框中已经显示了三个标签。

3. tagbox常用配置项

tagbox组件有多个配置项，下面介绍一些常用的配置项：

• width：设置tagbox组件的宽度。
• height：设置tagbox组件的高度。
• valueField：设置tagbox中值的域名，默认为'value'。
• textField：设置tagbox中文本的域名，默认为'text'。
• separator：设置tagbox中多个标签之间的分隔符，默认为','。
• editable：设置tagbox输入框是否可编辑，默认为true。
• disabled：设置tagbox是否禁用，默认为false。

代码示例：

<div>
  <input class="easyui-tagbox" style="width: 300px;" data-options="
    width: 300,
    height: 50,
    valueField: 'id',
    textField: 'name',
    separator: ';',
    editable: false,
    disabled: true
  ">
</div>

上述代码设置了tagbox的一些常用配置项，并使用了data-options的方式进行设置。其中，valueField和textField可以用于设置tagbox中每个标签的id和text的来源。separator用于设置多个标签之间的分隔符。editable和disabled使用了布尔值进行设置。

4. tagbox事件

tagbox组件还有一些事件可以使用，常用的事件有以下几个：

• onSelect：在选择一个标签时触发。
• onUnselect：在取消选择一个标签时触发。
• onChange：在tagbox值发生变化时触发。

代码示例：

$('.easyui-tagbox').tagbox({
  onSelect: function(value){
    console.log('选择了标签：' + value);
  },
  onUnselect: function(value){
    console.log('取消选择了标签：' + value);
  },
  onChange: function(values){
    console.log('tagbox的值发生了变化，当前值为：' + values);
  }
});

上述代码中，我们使用了tagbox的几个常用事件。每个事件都有一个回调函数，在事件触发时执行。例如，在选择一个标签时，onSelect事件会将value值作为回调函数的参数传入，并在控制台输出选择的标签。在值发生变化时，onChange事件会将当前的值作为回调函数的参数传入，并在控制台输出当前的值。

至此，EasyUI jQuery tagbox Widget的完整攻略讲解结束。如果您还有其他问题或不明白的地方，可以在留言板中跟我交流。