因為項目需要，需要做輸入框自動提示功能，之前我只是使用過這種功能，相信大家也都使用過，百度~現在要讓我自己做，好吧，還是百度一下，百度搜索“輸入框自動提示”，彈出一對頁面，也看了一堆文章，有自己開發的，也有插件的。
最后經過幾次試驗，我選擇了JQuery.Autocomplete這款插件，還行吧用著，支持本地也支持ajax訪問服務器，這款插件是基于jquery的，各位若有項目需要使用的，可以嘗試一把。
源碼下載：
JQuery.AutoComplete本地自動提示的方式我就不說了，各位下載源碼之后看一下也就明白了，當然不明白的也可以問我，說一下ajax訪問服務器的方式吧，直接上代碼最為直接：
$(function(){
var onAutocompleteSelect =function(customer) {
$('#customerIdString').val(customer.data);
};
var options = {
serviceUrl: '${pageContext.request.contextPath}/TCustomer/getAllCustomer.koala',//獲取數據的后臺頁面
onSelect: onAutocompleteSelect,//選中之后的回調函數
extraParams: {selectedCustomerName:$.trim($("#selectedCustomerName").val())},//動態參數值
paramName: "selectedCustomerName",
noCache: false, //是否啟用緩存 默認是開啟緩存的
max:10,
autoFill:false
};
$('#selectedCustomerName').autocomplete(options);
});
這樣我們就可以把填入輸入框的值作為extraParams動態參數傳遞到后臺去，后臺直接request.getParameter("selectedCustomerName");就可以了。
值得注意的是，后臺應該返回什么樣的數據格式，這個插件需要注意的地方就是這塊了，如果不是他要求的格式的話，頁面會報js錯誤的，要求的數據格式必須是這樣的json串：
{"query":"A","suggestions":[{"data":"114e69b4-87a9-4c2b-aed4-1727568a92a7","value":"AAA111"},{"data":"531b59ca-8618-48f4-a6e8-963320e10159","value":"小人物_Amor"}]}
query后面的A是我輸入框傳入的參數，根據A模糊查詢出兩組數據，并以json的格式放在key為suggestions里。
后臺代碼：
@ResponseBody
@RequestMapping("/getAllCustomer")
public Object getAllCustomer(HttpServletRequest request,HttpServletResponse response)throws IOException{
List<Object> queryCustomerList = new ArrayList<Object>();
List<TCustomerDTO> allCustomer = new ArrayList<TCustomerDTO>();
//獲取前臺帶過來的動態參數
String selectedCustomerName = request.getParameter("selectedCustomerName");
//得到包含selectedCustomerName參數的對象
allCustomer = tCustomerApplication.findAllTCustomer();
for (Iterator iterator = allCustomer.iterator(); iterator.hasNext();) {
TCustomerDTO tCustomerDTO = (TCustomerDTO) iterator.next();
if(tCustomerDTO.getName().contains(selectedCustomerName)){
Map<String, Object> result = new HashMap<String, Object>();
result.put("value", tCustomerDTO.getName());
result.put("data", tCustomerDTO.getId());
queryCustomerList.add(result);
}
}
//構造規定的json數據格式
Map<String, Object> query_result = new HashMap<String, Object>();
Object json = JSONArray.toJSON(queryCustomerList);
query_result.put("query", selectedCustomerName);
query_result.put("suggestions", json);
Object json_map = JSONArray.toJSON(query_result);
System.out.println(json_map);
return json_map;
}
OK了，其實很簡單，當然你需要引入jquery，以及他所要求的其他兩個js文件，各位下載源碼后看示例就知道啦~
posted @
2014-05-22 18:11 小人物_Amor 閱讀(1405) |
評論 (0) |
編輯 收藏1.網上下載jstl.jar包和standard.jar包放到項目的lib文件夾下，jar包下載：
jar包下載;
2.然后在你的jsp頁面里引入如下代碼：
1 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
ok了，在你的頁面使用c標簽吧～
下面來說說自定義標簽的開發：jsp自定義標簽，用于項目便捷開發。在實際項目開發中，我們大多數時候會采用數據字典來儲存項目中一些數據，比如性別、國際、類型等，用數據字典存儲很 方便，因此在數據庫中添加一張數據字典表t_dict_value，有做過的項目中采用兩張表進行數據字典的管理，個人在設計數據字典的時候感覺一張表也 夠用了，不多說看建表語句：
我的自定義標簽是基于數據字典表使用的，當然后續業務中有需要也可以制作特定的自定義標簽，接下來開始自定義標簽，首先寫一個DictSelectTag類，代碼如下：
package com.infopatent.juangetljc.web.controller.core;import java.io.IOException;
import java.util.List;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;
import org.apache.commons.lang3.StringUtils;
import com.infopatent.juangetljc.core.DictValue;
public class DictSelectTag extends TagSupport {
private String dictName = "";
private boolean defaultValue;
private String value;
private String name;
private String id;
private String cssClass;
private String styleClass;
private String multiple;
private String onChange;
private String dataType;
public String getDataType() {
return dataType;
}
public void setDataType(String dataType) {
this.dataType = dataType;
}
public String getCssClass() {
return cssClass;
}
public void setCssClass(String cssClass) {
this.cssClass = cssClass;
}
public String getStyleClass() {
return styleClass;
}
public void setStyleClass(String styleClass) {
this.styleClass = styleClass;
}
public String getMultiple() {
return multiple;
}
public void setMultiple(String multiple) {
this.multiple = multiple;
}
public String getOnChange() {
return onChange;
}
public void setOnChange(String onChange) {
this.onChange = onChange;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
public String getDictName() {
return dictName;
}
public void setDictName(String dictName) {
this.dictName = dictName;
}
public boolean isDefaultValue() {
return defaultValue;
}
public void setDefaultValue(boolean defaultValue) {
this.defaultValue = defaultValue;
}
@Override
public int doEndTag() throws JspException{
DictValue dict = new DictValue();
List<DictValue> dict_list = dict.getRepository().findByProperty(DictValue.class,"dictName",dictName);
JspWriter out = pageContext.getOut();
StringBuffer sb = new StringBuffer();
sb.append("<select name='"+this.getName()+"' id='"+this.getId()+"' dataType='"+this.getDataType()+"'");
if(!StringUtils.isEmpty(this.getCssClass())){
sb.append("class=\"" + this.getCssClass() + "\" ");
}
if(!StringUtils.isEmpty(this.getStyleClass())){
sb.append("style=\"" + this.getStyleClass() + "\" ");
}
if(!StringUtils.isEmpty(this.getMultiple())){
sb.append("multiple=\"" + this.getMultiple() + "\" ");
}
if(!StringUtils.isEmpty(this.getOnChange())){
sb.append("onchange=\"" + this.getOnChange() + "\" ");
}
sb.append(">");
if(this.isDefaultValue()){
sb.append("<option value=''>--請選擇--</option>");
}
for(DictValue dc:dict_list){
if(dc.getItemDesc().equals(this.getValue())){
sb.append("<option value='"+dc.getItemCode()+"' selected='selected'>");
}else{
sb.append("<option value='"+dc.getItemCode()+"'>");
}
sb.append(dc.getItemDesc()+"</option>");
}
sb.append("</select>");
try {
out.write(sb.toString());
} catch (IOException e) {
// TODO Auto-generated catch block
throw new JspException(e);
}
return TagSupport.EVAL_PAGE;
}
}
再寫一個DictLabelTag類用于顯示字典中的值，代碼如下：
package com.infopatent.juangetljc.web.controller.core;
import java.io.IOException;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;
import org.springframework.web.servlet.tags.form.OptionsTag;
import com.infopatent.juangetljc.core.DictValue;
public class DictLabelTag extends TagSupport {
private String dictName = "";
private String itemCode;
public String getDictName() {
return dictName;
}
public void setDictName(String dictName) {
this.dictName = dictName;
}
public String getItemCode() {
return itemCode;
}
public void setItemCode(String itemCode) {
this.itemCode = itemCode;
}
@Override
public int doEndTag() throws JspException {
DictValue dict = new DictValue();
JspWriter out = pageContext.getOut();
try {
out.write(dict.codeToName(getDictName(),getItemCode()));
} catch (IOException e) {
throw new JspException(e);
}
return TagSupport.EVAL_PAGE;
}
}
接下來配置tld文件，代碼如下：
<?xml version="1.0" encoding="UTF-8"?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
version="2.0">
<description>SPay JSP Form Tag Library</description>
<tlib-version>1.0</tlib-version>
<short-name>dict</short-name>
<uri>http://www.tljc.com/dict_tag</uri>
<tag>
<description>Renders an HTML 'select' element. Supports databinding to the selected option.</description>
<name>select</name>
<tag-class>com.infopatent.juangetljc.web.controller.core.DictSelectTag</tag-class>
<body-content>JSP</body-content>
<attribute>
<name>defaultValue</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>dataType</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>value</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>dictName</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>name</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>id</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>cssClass</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>styleClass</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>multiple</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onChange</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
</tag>
<tag>
<name>itemdesc</name>
<tag-class>com.infopatent.juangetljc.web.controller.core.DictLabelTag</tag-class>
<body-content>JSP</body-content>
<attribute>
<description>The Dict Name config in dict_value</description>
<name>dictName</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<description>The Dict Code config in dict_value</description>
<name>itemCode</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
</tag>
</taglib>
接下來在jsp頁面里引入標簽：
<%@taglib prefix="dict" uri="http://www.tljc.com/dict_tag" %>
這樣便可以在jsp頁面里使用定義的標簽了：
<dict:select defaultValue="true" name="GJ" id="GJ" dictName="GJ" cssClass="form-control"/>前提是要在字典表里加上“GJ”這條數據。
OK了!
posted @
2014-05-21 17:17 小人物_Amor 閱讀(11614) |
評論 (6) |
編輯 收藏