公司通知,以前处理的XX物资系统的部门,班组,工程,供应厂商部分都需要修改成Ajaxtags 的autocomplete来完成,用户需要输入查询码来进行索引,于是开始动手研究Ajaxtags.Ajaxtags 是基于prototype.js的简化AJAX开发的组件,可以通过标签来来完成以前非常复杂的事情. 通过DOME和原代码的分析,我感觉,他的简化过于局限,没有非常好扩展性,只能做一些简单的处理,比方他的AjaxXmlBuilder的toString()方法可以返回一种简单的XML格式,而且过于简单:
<?
xml version="1.0" encoding="UTF-8"
?>
<
ajax-response
>
<
response
>
<
item
>
<
name
>
Record 1
</
name
>
<
value
>
1
</
value
>
</
item
>
<
item
>
<
name
>
Record 2
</
name
>
<
value
>
2
</
value
>
</
item
>
<
item
>
<
name
>
Record 3
</
name
>
<
value
>
3
</
value
>
</
item
>
</
response
>
</
ajax-response
>
他在autocomplete处理时会用到这中XML文件:
以下是在他的JS中解析XML的部分
var
name
=
items[i].getElementsByTagName(
"
name
"
)[
0
].firstChild.nodeValue;
var
value
=
items[i].getElementsByTagName(
"
value
"
)[
0
].firstChild.nodeValue;
由此可以看出他过于简单,如果我有多个属性需要放入自动下拉菜单中怎么办?
好办,我们扩展!
自己造一个AjaxXmlBuilder,继承一下就可以了,把toString()方法重载掉~让他组一个我要的XML文件出来,然后再到页面上自己解吸他`就OK了~
我的类:
package
com.kaiwang.mmis.ajax.autoselect;
import
java.lang.reflect.InvocationTargetException;
import
java.util.ArrayList;
import
java.util.Collection;
import
java.util.Iterator;
import
java.util.List;
import
org.ajaxtags.helpers.AjaxXmlBuilder;
import
org.apache.commons.beanutils.BeanUtils;
/** */
/** * 重载ajaxxmlbuilder封装出新的xml文件 * @author Gary.lee Jan 16, 2006 */
public
class
ManufacturerXmlBuilder
extends
AjaxXmlBuilder
implements
MisAjaxXmlBuilder
{ private String encoding = " UTF-8 " ; private List items = new ArrayList(); public ManufacturerXmlBuilder addItems(Collection collection, String nameProperty, String valueProperty, String seachCodeProperty) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException { for (Iterator iter = collection.iterator(); iter.hasNext();) { Object element = (Object) iter.next(); String name = BeanUtils.getProperty(element, nameProperty); String value = BeanUtils.getProperty(element, valueProperty); String seachCode = BeanUtils.getProperty(element, seachCodeProperty); items.add( new MisAjaxBaseItem(name, value, seachCode)); } return this ; } /** */ /** * @see java.lang.Object#toString() */ public String toString() { StringBuffer xml = new StringBuffer().append( " <?xml version=/ " 1.0 / "" ); if (encoding != null ) { xml.append( " encoding=/ "" ); xml.append(encoding); xml.append( " / "" ); } xml.append(" ?> " ); xml.append( " <ajax-response> " ); xml.append( " <response> " ); for (Iterator iter = items.iterator(); iter.hasNext();) { MisAjaxBaseItem item = (MisAjaxBaseItem) iter.next(); xml.append( " <item> " ); xml.append( " <name> " ); xml.append( " <![CDATA[ " ); xml.append(item.getName()); xml.append( " ]]> " ); xml.append( " </name> " ); xml.append( " <value> " ); xml.append( " <![CDATA[ " ); xml.append(item.getId()); xml.append( " ]]> " ); xml.append( " </value> " ); xml.append( " <searchcode> " ); xml.append( " <![CDATA[ " ); xml.append(item.getSearchCode()); xml.append( " ]]> " ); xml.append( " </searchcode> " ); xml.append( " </item> " ); } xml.append(" </response> " ); xml.append( " </ajax-response> " ); return xml.toString(); } }
这样就有了我要的XML文件格式了~再修改JS
var
name
=
items[i].getElementsByTagName(
"
name
"
)[
0
].firstChild.nodeValue;
var
value
=
items[i].getElementsByTagName(
"
value
"
)[
0
].firstChild.nodeValue;
//
新增加一个searchcode部分的解析
var
searchCode
=
items[i].getElementsByTagName(
"
searchcode
"
)[
0
].firstChild.nodeValue;
var
li
=
document.createElement(
"
li
"
);
var
liIdAttr
=
document.createAttribute(
"
id
"
); li.setAttribute(
"
id
"
, value);
//
将searchcode部分+name输出到文本区域中
var
liText
=
document.createTextNode(name
+
'('
+
searchCode
+
')');
大家可以看到,我加入了一个
searchCode的东西就是在下拉框中把searchCode打印出来! 效果~~~~~~我抓张图出来看看: 样子还可以吧`! 用过autocomplete的朋友应该知道如果仅仅是鼠标点击以后这个框是不会出来了~ 因为他默认的事件是"keyup",也就是当有输入的时候才出来.初始化的部分在JS中:
setOptions:
function
(options)
{ this .options = { sourceElem: $(options.source), targetElem: $(options.target), eventType: options.eventType ? options.eventType : " keyup " , appendValue: evalBoolean(options.appendValue), appendSeparator: options.appendSeparator || " " , forceSelection: evalBoolean(options.forceSelection) } .extend(options || {} );
而且这里如果换成"force"的话,在下拉框中的上下键和回车就失效了,没关系!解决了!在调用的时候把
eventType:"focus"
加上(这个属性官方文档中并没有说~)然后找到:
attachBehaviors:
function
(element, event, listener, obj)
{ if (isArray(element)) { for ( var i = 0 ; i < element.length; i ++ ) { eval( " element[i].on " + event + " = listener.bindAsEventListener(obj) " ); } } else { eval( " element.on " + event + " = listener.bindAsEventListener(obj) " ); eval( " element.onkeyup = listener.bindAsEventListener(obj) " ); } }
大 家可以看到我在下面又追加了一个“keyup”的属性,这样既在得到焦点的时候可以出来,也可以在用上下建的时候选择,还可以做筛选~还有就是我没有实用 标签,我读了它的DOME以后发现它仅仅是封装了JS而已,用了标签以后感觉怪怪的,为什么JS的调用也要用标签封装呢?仅仅是可以在标签中实用EL语法 ·但是又有多少兄弟会用呢?最主要的是它的标签中好想没有“eventType”这个属性~,看看我的调用:
//
班站编号
new
AjaxJspTag.Autocomplete(
"
<%=request.getContextPath()%>/autoSelectTeam.do
"
,
{ parameters: " team={team_Name},depId={department_Id} " , progressStyle: " throbbing " , target: " team_Id " , className: " autocomplete " , source: " team_Name " , forceSelection: " yes " , eventType: " focus " }
);
要注意的是parameters这里多参数实用了,号隔开,这样到ACTION中就可以用depId接到值了~这个东西在官方文档中也没有说出来,还是同事发现的~ !
本人文采不行``大家见谅,希望文章对用ajaxTags 的朋友有写帮助,我的原则就是·能改的我都改·只要我能用就可以了! 我再改~前面说了,我修改了AJAX基本的JS文件``但是他的其他属性就不能用了~~~很痛苦,所以晚上突然想到,我专门为他加一个方法就可以了~
//
事件触发(修改增加一个keyup事件auto专用)
attachBehaviorsAuto:
function
(element, event, listener, obj)
{ eval( " element.on " + event + " = listener.bindAsEventListener(obj) " ); eval( " element.onkeyup = listener.bindAsEventListener(obj) " ); }
再改一下`他调用的地方,换成这个方法就好了`噎!