昨天下午突然接到公司通知,以前處理的XX物資系統(tǒng)的部門,班組,工程,供應(yīng)廠商部分都需要修改成Ajaxtags的autocomplete來(lái)完成,用戶需要輸入查詢碼來(lái)進(jìn)行索引,于是開(kāi)始動(dòng)手研究Ajaxtags.
Ajaxtags是基于prototype.js的簡(jiǎn)化AJAX開(kāi)發(fā)的組件,可以通過(guò)標(biāo)簽來(lái)來(lái)完成以前非常復(fù)雜的事情.
通過(guò)DOME和原代碼的分析,我感覺(jué),他的簡(jiǎn)化過(guò)于局限,沒(méi)有非常好擴(kuò)展性,只能做一些簡(jiǎn)單的處理,比方他的AjaxXmlBuilder的toString()方法可以返回一種簡(jiǎn)單的XML格式,而且過(guò)于簡(jiǎn)單:
<?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處理時(shí)會(huì)用到這中XML文件:
以下是在他的JS中解析XML的部分
var name = items[i].getElementsByTagName("name")[0].firstChild.nodeValue;
var value = items[i].getElementsByTagName("value")[0].firstChild.nodeValue; 由此可以看出他過(guò)于簡(jiǎn)單,如果我有多個(gè)屬性需要放入自動(dòng)下拉菜單中怎么辦?
好辦,我們擴(kuò)展!
自己造一個(gè)AjaxXmlBuilder,繼承一下就可以了,把toString()方法重載掉~(yú)讓他組一個(gè)我要的XML文件出來(lái),然后再到頁(yè)面上自己解吸他`就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;
//新增加一個(gè)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輸出到文本區(qū)域中
var liText = document.createTextNode(name+'('+searchCode+')'); 大家可以看到,我加入了一個(gè)
searchCode的東西就是在下拉框中把searchCode打印出來(lái)!
效果~~~~~~我抓張圖出來(lái)看看:
樣子還可以吧`!
用過(guò)autocomplete的朋友應(yīng)該知道如果僅僅是鼠標(biāo)點(diǎn)擊以后這個(gè)框是不會(huì)出來(lái)了~
因?yàn)樗J(rèn)的事件是"keyup",也就是當(dāng)有輸入的時(shí)候才出來(lái).初始化的部分在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"的話,在下拉框中的上下鍵和回車就失效了,沒(méi)關(guān)系!解決了!在調(diào)用的時(shí)候把
eventType:"focus" 加上（這個(gè)屬性官方文檔中并沒(méi)有說(shuō)～）然后找到：
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)");
}
} 大家可以看到我在下面又追加了一個(gè)“keyup”的屬性，這樣既在得到焦點(diǎn)的時(shí)候可以出來(lái)，也可以在用上下建的時(shí)候選擇，還可以做篩選～還有就是我沒(méi)有實(shí)用標(biāo)簽，我讀了它的DOME以后發(fā)現(xiàn)它僅僅是封裝了JS而已，用了標(biāo)簽以后感覺(jué)怪怪的，為什么JS的調(diào)用也要用標(biāo)簽封裝呢？?jī)H僅是可以在標(biāo)簽中實(shí)用EL語(yǔ)法·但是又有多少兄弟會(huì)用呢？最主要的是它的標(biāo)簽中好想沒(méi)有“eventType”這個(gè)屬性～，看看我的調(diào)用：
//班站編號(hào)
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這里多參數(shù)實(shí)用了,號(hào)隔開(kāi)，這樣到ACTION中就可以用depId接到值了～這個(gè)東西在官方文檔中也沒(méi)有說(shuō)出來(lái)，還是同事發(fā)現(xiàn)的～
!
本人文采不行``大家見(jiàn)諒，希望文章對(duì)用ajaxTags的朋友有寫幫助，我的原則就是·能改的我都改·只要我能用就可以了！
我再改~前面說(shuō)了,我修改了AJAX基本的JS文件``但是他的其他屬性就不能用了~~~很痛苦,所以晚上突然想到,我專門為他加一個(gè)方法就可以了~
//事件觸發(fā)（修改增加一個(gè)keyup事件auto專用）
attachBehaviorsAuto: function(element, event, listener, obj) {
eval("element.on"+event+" = listener.bindAsEventListener(obj)");
eval("element.onkeyup = listener.bindAsEventListener(obj)");
}
再改一下`他調(diào)用的地方,換成這個(gè)方法就好了`噎!