小人物_Amor Blog

因为项目需要，需要做输入框自动提示功能，之前我只是使用过这种功能，相信大家也都使用过，百度~现在要让我自己做，好吧，还是百度一下，百度搜索“输入框自动提示”，弹出一对页面，也看了一堆文章，有自己开发的，也有插件的。

最后经过几次试验，我选择了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 阅读(1373) | 评论 (0) | 编辑收藏

jsp页面引入jstl标签以及如何开发自定义标签

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 阅读(11578) | 评论 (6) | 编辑收藏

仅列出标题

常用链接

留言簿(1)

随笔分类

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜