easyui的数据网格实现多条件查询并显示数据

傷城~ 2022-05-12 08:12 242阅读 0赞

项目ssm(spring+springmvc+mybatis)

编译工具：eclipse

后台框架：easyui

因为easyui数据网格显示的是一种json格式数据：

{
    
    "total":1,
    
    "rows":[
    
    {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}
    
    
    ]
    
    }

注：重点就是返回total和rows两个属性，而rows就是封装了我们要返回的数据集

搭建easyui框架可以参考：[easyui教程][easyui]

页面展示：

![70][]

前端页面：

//工具栏
    <div id="tb" style="padding:5px;height:auto">
    	<div>
    		
    	<input id="keyWord" style="line-height:26px;border:1px solid #ccc" placeholder="输入内容查询关键字">
    	
    	<span>开始时间：<input type="text" class="easyui-datebox"  id="startTime"> </span>
    	<span>结束时间：<input type="text" class="easyui-datebox" id="endTime"> </span>
    	<span>留言状态：
    	<select id="status" class="easyui-combobox" style="width: 100px;height:auto">
    		<option value="-1">请选择</option>
    		<option value="1">公开</option>
    		<option value="2">不公开</option>
    	</select>
    	 </span>
    	<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
    	</div>
    </div>
    //table中的toolbar就是加上的工具栏
    <table id="tt" class="easyui-datagrid" style="width:100%;height:500px"
    		url="<%=request.getContextPath()%>/messages/messageLists" 
    		 toolbar="#tb"
    		singleSelect="true" fitColumns="true"  pagination="true">
    	<thead>
    		<tr>
    		<th field="m_id" width="60">留言编号</th>
    			<th field="u_id" width="60">用户编号</th>
    			<th field="m_content"  width="70">留言内容</th>
    			<th data-options="field:'m_date',width:60,align:'center',formatter:dataFormatter">留言时间</th>
    			<th data-options="field:'m_status',width:60,align:'center',formatter:statusFormatter">留言状态</th>
    			<th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>
    		</tr>
    	</thead>
    </table>

js实现把查询的参数传到后台：然后再重加载页面显示数据：

注：keyWord，status等这些参数就是我要传到后台的，所以传什么参数到后台，看你个人需求。当点击查询时是执行table中的url路径。

//table中的toolbar就是加上的工具栏
    <table id="tt" class="easyui-datagrid" style="width:100%;height:500px"
    		url="<%=request.getContextPath()%>/messages/messageLists"

后台代码实现：

controller层：

/**
    
    * 留言记录
    
    * @param page 分页
    
    * @return 后台管理留言记录信息
    
    */
    
    @RequestMapping("/messageLists")
    
    @ResponseBody
    
    public Map<String,Object>messageList(Page page){
    
    Map<String,Object>map=new HashMap<String,Object>();
    
    //留言记录
    
    List<Messages>list=messagesService.personList(page);
    
    //留言记录总数
    
    int total=messagesService.personListCount(page);
    
    map.put("total", total);
    
    map.put("rows", list);
    
    return map;
    
    }

注：map就是一种key-value对，而@ResponseBody会以json形式返回数据，所以这样返回给前端页面，easyui就可以解析成符合的json数据形式，这样数据网格就可以显示出数据来。

Page类是封装了一些分页的属性以及接收查询的参数：

/**
    
    * 处理分页
    
    * @author admin
    
    *
    
    */
    
    public class Page implements Serializable {
    
    
    
    //当前页
    
    private Integer page=1;
    
    //页大小
    
    private Integer rows=5;
    
    // 总记录 数
    
    private Integer totalRecord;
    
    //总页数
    
    private Integer totalPage;
    
    //关键字类型
    
    private String keyType;
    
    //查询关键字
    
    private String keyWord;
    
    //开始记录位置
    
    private Integer start=0;
    
    //用户id
    
    private String userid;
    
    //开始时间
    
    private String startTime;
    
    //结束时间
    
    private String endTime;
    
    //留言状态
    
    private Integer status;
    
    
    //setter省略。。。
    
    
    }

service层：

List<Messages> personList(Page page);
    
    Integer personListCount(Page page);

serviceImpl层：

@Override
    
    public List<Messages> personList(Page page) {
    
    return messagesMapper.personList(page);
    
    }
    
    @Override
    
    public Integer personListCount(Page page) {
    
    return messagesMapper.personListCount(page);
    
    }

mapper.xml:

<select id="personList" resultMap="BaseResultMap2"
    
    parameterType="comit.model.Page">
    
    select * from messages
    
    <where>
    
    <if test="userid!='' and userid!=null and userid!='undefined' ">
    
    AND u_id=#{userid}
    
    </if>
    
    <if test="keyWord!='' and keyWord!=null ">
    
    AND m_content like concat('%',#{keyWord},'%')
    
    </if>
    
    <if test="startTime!='' and startTime!=null ">
    
    AND m_date <![CDATA[ >= ]]> #{startTime}
    
    </if>
    
    <if test="endTime!='' and endTime!=null ">
    
    AND m_date <![CDATA[ <= ]]> #{endTime}
    
    </if>
    
    <if test="status!='' and status!=null and status==2">
    
    AND m_status=0
    
    </if>
    
    <if test="status!='' and status!=null and status==1">
    
    AND m_status=1
    
    </if>
    
    </where>
    
    ORDER BY m_id DESC
    
    limit #{start},#{rows}
    
    </select>
    
    
    
    <select id="personListCount" resultType="java.lang.Integer"
    
    parameterType="comit.model.Page">
    
    select count(1)
    
    from messages
    
    <where>
    
    <if test="userid!='' and userid!=null and userid!='undefined' ">
    
    AND u_id=#{userid}
    
    </if>
    
    <if test="keyWord!='' and keyWord!=null ">
    
    AND m_content like concat('%',#{keyWord},'%')
    
    </if>
    
    <if test="startTime!='' and startTime!=null ">
    
    AND m_date <![CDATA[ >= ]]> #{startTime}
    
    </if>
    
    <if test="endTime!='' and endTime!=null ">
    
    AND m_date <![CDATA[ <= ]]> #{endTime}
    
    </if>
    
    <if test="status!='' and status!=null and status==2">
    
    AND m_status=0
    
    </if>
    
    <if test="status!='' and status!=null and status==1">
    
    AND m_status=1
    
    </if>
    
    </where>
    
    </select>

注：重点就是看你想拿到什么样的数据，sql应该怎么写

### 我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。  ###

[easyui]: http://www.jeasyui.net/tutorial/147.html
[70]: /images/20220512/f067ae32856d4b7cb70ddee61afa9d82.png