简介

TagEditor(标签编辑器)用于编辑String[]类型的数据，TagEditor的编辑效果如下：

在很多表单编辑页面的设计中，我们为避免用户输入错误，会采用下拉框方式让用户选择输入：

这样可以有效的防止用户因为输入原因造成的低级错误。

TagEditor通过avaliableTags定义下拉可选的数据项。

如果下拉数据选项是来自数据库的一张表，则可以通过其avaliableTagsDataset和avaliableTagsDataPath定义下拉可选的数据项。

根据我们对dorado的基础知识，我们可以预先定义一个DataSet，然后只要设置TagEditor的avaliableTagsDataset和avaliableTagsDataPath属性即可产生下拉数据选项。

其中：

avaliableTagsDataset：用于设定下拉数据选项对应的数据来源
avaliableTagsDataPath：下拉数据选项通常都对应为一个EntityList，通过avaliableTagsDataPath属性我们可以告诉下拉数据选项只显示对应Entity对象的那个属性

基本使用

通过avaliableTags定义数据下拉选项

直接设置TagEditor的avaliableTags就可以定义下拉数据(用逗号或分号做分隔符号)：

这样在浏览器中单击TagEditor编辑框的时候就可以出现如下的下拉框，最基本的一个TagEditor的实例开发已经完成。

范例下载：TagEditor-Demo1.zip

通过avaliableTagsDataset定义数据下拉选项

通过avaliableTags定义下拉选项是静态的定义方式，有时候我们希望其下拉数据并不是开发人员预先知道的，而是直接与数据库的一个业务表相关联，则这个时候我们建议你通过TagEditor的avaliableTagsDataset属性定义动态的下拉数据源，基本步骤如下

首先定义一个DataProvider(本例暂用Java代码动态生成，实际项目中改为数据库实现即可):

@DataProvider
public List<String> getTags() {
	List<String> languages = new ArrayList<String>();
	languages.add("Java");
	languages.add("JavaScript");
	languages.add("Ruby");
	languages.add("Python");
	languages.add("Basic");
	languages.add("C");
	languages.add("C++");
	languages.add("C#");
	languages.add("Objective C");
	languages.add("Pascal");
	languages.add("groovy");
	languages.add("Dart");
	languages.add("go");
	languages.add("Perl");
	languages.add("Logo");
	languages.add("Ada");
	return languages;
}

然后在View中定义一个DataSet，并设置dataType为[String],以及DataProvider绑定到上面的DataProvider上：

最后设置TagEditor控件的avaliableTagsDataset属性:

这样最基本的一个TagEditor的实例开发已经完成。

范例下载：TagEditor-Demo2.zip

详细说明

TagEditor控件的基本属性和TextEditor(DCUG)类似，不再重复叙述，下面我们只针对TagEditor中特有的属性做详细说明。

关于DataProvider

上述范例中DataProvider返回的是List<String>数组，实际上根据DataSet的基本原理，我们知道也可以直接返回Bean对象，如：

@DataProvider
public Collection<LanguageInfo> getTags() {
	List<LanguageInfo> languages = new ArrayList<LanguageInfo>();
	LanguageInfo language = new LanguageInfo();
	language.setCode("Java");
	languages.add(language);
	language = new LanguageInfo();
	language.setCode("JavaScript");
	languages.add(language);
	language = new LanguageInfo();
	language.setCode("Ruby");
	languages.add(language);
	language = new LanguageInfo();
	language.setCode("Python");
	languages.add(language);
	language = new LanguageInfo();
	language.setCode("Basic");
	languages.add(language);
	language = new LanguageInfo();
	language.setCode("C");
	languages.add(language);
	language = new LanguageInfo();
	language.setCode("C++");
	languages.add(language);
	language = new LanguageInfo();
	language.setCode("C#");
	languages.add(language);
	language = new LanguageInfo();
	language.setCode("Objective C");
	languages.add(language);
	language = new LanguageInfo();
	language.setCode("Pascal");
	languages.add(language);
	return languages;
}

之后在View中添加DataType定义关联到LanguageInfo对象上：

同时修改DataSet的dataType属性为这个新增的LanguageInfo:

最后修改TagEdiotr的avaliableTagsDataPath为".code"(表示要获取对应数据实体的code属性):

范例下载：TagEditor-Demo3.zip

关于text属性

TagEditor是用于编辑String[]类型的数据，我们可以通过text设置值，如：

则界面显示是的效果如下：

另外我们也可以通过JS的方法存取其值：

tagEditor.set("text", "Ruby,PowerScript,Oracle,Java,C++");

当我们在浏览器中对tagEditor中多次编辑后，如果通过text属性获取的值默认就是一个用逗号分隔的字符串。

关于textSeperator属性

前面我们说过TagEditor的text属性默认使用逗号作为分隔符，如：

"Ruby,PowerScript,Oracle,Java,C++"

但是如果我的风格符号不是逗号，为";","@",或"<==>"符号怎么办?

这个时候你可以通过TagEditor的textSeperator属性自定义分隔符号：

这个时候TagEditor最终编辑后的text值将会是如下的文本格式：

"Ruby<==>PowerScript<==>Oracle<==>Java<==>C++"

textSeperator的默认值为逗号。

关于value属性

前面我们说过TagEditor用于编辑String[]类型的数据，如下图：

如果我们通过JS访问value值的时候在Debug状态下可以看到它是一个Array类型的数据对象：

同样如果我们希望通过value属性设置TagEditor的值的时候也需要以Array的类型设置：

tagEditor.set("value",["Ruby", "PowerScript", "Oracle", "Java", "C++"]);

关于acceptUnknownTag属性

默认情况下如果你直接在编辑框中输入的数据无法与下拉列表中的数据匹配，TagEditor也将接纳这个数据(如下图中的aaa):

入过我们将acceptUnknownTag的属性设置为false,这个时候如果我们直接在编辑框中输入aaa，则显示效果如下(aaa会有删除线效果)：

关于showAvaliableTags属性

改属性用以控制是否出现可选的下拉选项，如果将showAvaliableTags设置为false，则TagEditor编辑的时候不再出现下拉数据列表。

Dorado 9 : TagEditor(DCUG)

简介