随笔-12  评论-6  文章-0  trackbacks-0
 
因为项目需要,需要做输入框自动提示功能,之前我只是使用过这种功能,相信大家也都使用过,百度~现在要让我自己做,好吧,还是百度一下,百度搜索“输入框自动提示”,弹出一对页面,也看了一堆文章,有自己开发的,也有插件的。
最后经过几次试验,我选择了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 阅读(1281) | 评论 (0)编辑 收藏
jsp页面引入jstl标签:

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 阅读(11341) | 评论 (6)编辑 收藏
仅列出标题
共2页: 上一页 1 2