利用easyui实现增删改查（四）：搜索数据

界面展示

具体jsp代码

我们在jsp页面画出搜索的页面

代码语言：javascript复制

<div id="datagridtoorbar">
    <a href="javascript:void(0)" >添加</a>
    <a href="javascript:void(0)" >删除</a>
   <input id="keywords" type="text" name="keywords"/>  搜索的按钮
</div>
    //搜索按钮的easyUI的样式
    $("#keyword").textbox({
        buttonIcon:"icon-search",
        buttonText:"搜索",
    })

以上的搜索框就有easyui的样式，现在给这个搜索框一个点击事件：在写easyui样式的代码里面加一个点击事件

代码语言：javascript复制

    //搜索按钮的easyUI的样式
    $("#keywords").textbox({
        buttonIcon:"icon-search",
        buttonText:"搜索",
        onClickButton:function () {

        //    获取输入框里面的值
            var val = $("#keywords").val();

        //    给后台发送数据，携带输入框里面的值
            //    使用datagrid里面的load方法，发送  关键词的参数
            //    数据自动加载在页面
            //    提示信息，搜索结束
            $("#datagridpersion").datagrid('load',{
                keywords:val,
            })
        

        }
    })

后端接收

后端写一个实体类进行接收

代码语言：javascript复制

package com.pojo;

import java.util.Objects;

/**
 * @author 
 * @date 2020/9/6--22:11
 */
public class persionQuery {
    private Integer page;
    private Integer rows;
    private String keywords;

    public persionQuery() {
    }

    public persionQuery(Integer page, Integer rows, String keywords) {
        this.page = page;
        this.rows = rows;
        this.keywords = keywords;
    }

    public Integer getPage() {
        return page;
    }

    public void setPage(Integer page) {
        this.page = page;
    }

    public Integer getRows() {
        return rows;
    }

    public void setRows(Integer rows) {
        this.rows = rows;
    }

    public String getKeywords() {
        return keywords;
    }

    public void setKeywords(String keywords) {
        this.keywords = keywords;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        persionQuery that = (persionQuery) o;
        return Objects.equals(page, that.page) &&
                Objects.equals(rows, that.rows) &&
                Objects.equals(keywords, that.keywords);
    }

    @Override
    public int hashCode() {
        return Objects.hash(page, rows, keywords);
    }

    @Override
    public String toString() {
        return "persionQuery{"  
                "page="   page  
                ", rows="   rows  
                ", keywords='"   keywords   '''  
                '}';
    }
}

controller层

代码语言：javascript复制

    @ResponseBody
    @RequestMapping("/showPersion")
    public  Object  showPersion(persionQuery persionQuery){
//        System.out.println(persionQuery.getKeywords());
        Object all02 = persionService.getAll02(persionQuery);
//        System.out.println(all02.toString());
        return all02;

    }

xml 里面的代码

代码语言：javascript复制

   <select id="getAll01" resultType="com.pojo.person" parameterType="com.pojo.persionQuery" >
        SELECT
        id,
        name ,
        age,
        gender,
        phone,
        address
        FROM persion
        <if test="keywords != null and keywords !='' ">
            where name like '%' #{keywords} '%'
        </if>
    </select>

以上就完成了模糊查询

jsp java javascript

0 人点赞