SSM框架+layui:查询某段时间范围内的数据(从后端到前端)

需求(如下图)

需求图

  • 查询条件为时间区间,实际数据为具体日期。
  • 选择时间范围后,下面数据会筛选出范围内的数据刷新显示。

数据库表字段

数据库字段图片

JAVA实体类

private Date claimDate;		// 索赔日期
  • 因为需要接收前端两个时间(起、止) ,所以实体类需要添加两个字段作为程序判断使用。
  • 使用字符串格式
private String claimDateStart; //范围起期
private String claimDateEnd;   //范围止期

SQL语句(SSM框架,oracle数据库)

<select id="findList" resultType="......实体类所在路径...">
	SELECT 
		...
	FROM 
		表名 a --别名为a
	<where>
		...
		<if test="claimDateStart !=null and claimDateStart != ''">
			AND a.claim_date<![CDATA[>=]]> to_date(#{claimDateStart},'yyyy-MM-dd')
		</if>
		<if test="claimDateEnd !=null and claimDateEnd != ''">
			AND a.claim_date<![CDATA[<=]]> to_date(#{claimDateEnd},'yyyy-MM-dd')
			--#{claimDateEnd} 为前端传来、并且是用实体类String类型属性接收的,所以此时要转化成时间格式
		</if>
	</where>
</select>
  • 在使用mybatis 时sql是写在xml 映射文件中,如果写的sql中有一些特殊的字符的话,在解析xml文件的时候会被转义,如果不希望被转义,要使用<![CDATA[ ]]>来解决。
  • <![CDATA[ ]]> 是什么? 是XML语法。在CDATA内部的所有内容会被解析器忽略。
  • 如果文本包含了"<“字符 <=和”&"等字符,要使用<![CDATA[ ]]>来避免解析
  • to_date (把字符类型转为时间类型) 函数使用:
SELECT TO_DATE('2006-05-01 19:25:34', 'YYYY-MM-DD HH24:MI:SS') FROM 表名;
--注意:SQL中不区分大小写,MM和mm被认为是相同的格式代码,所以Oracle的SQL采用了mi代替分钟
--此方法将String类型的数据转换成Date类型

DAO接口

@MyBatisDao
public interface XXXXDao{
	//sql语句的id 就是findList T泛指类型 此处代表这个实体类对象
	public List<T> findList(T entity);
}

Service层

@Service
@Transactional(readOnly = true)
public class XXXXService{
	public List<实体类T> findList(T entity) {
		return XXXXDao.findList(entity);
	}
}

Controller 层

//此处使用layUI框架封装
@RequestMapping(value = {"listData"})
@ResponseBody
public Layui listData(T entity) {
	Page<实体类> page = XXXXService.findPage(new Page(entity), entity);
	return Layui.data(page);
}

前端JSP

<div class="span3">
	<span class="label-none">索赔日期: </span>
	<input id="claimDateStart"
		name="claimDateStart" type="text" style="width: 85px;"
		maxlength="20" readonly="readonly" class="input-min Wdate"
		value="<fmt:formatDate value="${bsPersonClaimCase.claimDateStart}" 
		pattern="yyyy-MM-dd"/>"
		οnclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"
		οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,maxDate:'#F{$dp.$D(\'claimDateEnd\')}'});"/>
		— 
	<input id="claimDateEnd" name="claimDateEnd" type="text"
		style="width: 85px;" maxlength="20" readonly="readonly"
		class="input-min Wdate"
		value="<fmt:formatDate value="${bsPersonClaimCase.claimDateEnd}" pattern="yyyy-MM-dd"/>"
		οnclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,minDate:'#F{$dp.$D(\'claimDateStart\')}'});" />
	
</div>
//注:WdatePicker()封装的函数方法点击获取时间
___________________按钮________________绑定函数(点击事件)___________________
<a class="btn btn-primary" onclick="toSearch()">查询</a>

前端JS

<script>
function toSearch(){
	//获取数据所在表格为table
    var table = layui.table;
    //layUI方法重新加载
	table.reload('数据所在列表的ID', {
	   //查询条件为:
		where: {
			//此处省略其它查询条件...
			claimDateStart:$("#claimDateStart").val(),
			claimDateEnd:$("#claimDateEnd").val()    	  
		},
		page: {
			curr: 1 //重新从第 1 页开始
		}
	});	      					
}
</script>

想到其它还会来补充…

发布了11 篇原创文章 · 获赞 0 · 访问量 228

猜你喜欢

转载自blog.csdn.net/weixin_43885975/article/details/103661513