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

项目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教程

页面展示：

前端页面：

//工具栏
<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实现把查询的参数传到后台：然后再重加载页面显示数据：

<script>

	/*查询*/
	function doSearch(){
	$('#tt').datagrid('load',{
		keyWord: $('#keyWord').val(),
		status:$('#status').val(),
		startTime:$('#startTime').val(),
		endTime:$('#endTime').val()
	});
}
	
</script>

注：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的数据网格实现多条件查询并显示数据

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

猜你喜欢