jquery datepicker 点击同步刷新echarts数据显示功能
jquery datepicker 点击同步刷新echarts数据显示功能
很久没有写过博客了，工作比较忙，最近有时间在做自己的毕业设计，将比较新的功能架构加入到了我的比设里，看上去感觉还是挺高大上的，所以把最近研究比较多，也比较实用的一个前端功能展示给大家
需要的前端包：jquery-min.js
jquery-form.js
jquery-ui.min.js
jquery-ui.js
chart.min.js
后端用的springmvc+spring+mybatis
页面展示：
功能描述：通过点击日历中的日期可以搜索当前日期的前三天和后三天的用电情况然后局部刷新到图表中
思路：通过点击日历中的日期建立监听函数，通过ajax提交到后台，进行数据获取，然后传回json数据到前端，再将数据放置到表单中即可
前端展示：
页面生成默认搜索当前系统日期信息：
$(document).ready(function () {
var date = getNowFormatDate();
var dates = new Array();
var datas = new Array();
var surplusEnergy = new Array();
var today;
var yest;
var supr;
$.ajax({
url: "
日历生成及点击监听函数：
$('#calendar').datepicker({
monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
onSelect: function(dateText, inst) {
doready(dateText);
}
}); function doexit() {
$.ajax({
url:" /**
* 通过日期查询前三天至后三天用电情况
*/
@RequestMapping("/energyInfo/dateEnergyInfos")
public void dateEnergyInfos(HttpServletRequest req, HttpServletResponse resp) throws IOException, ParseException {
PrintWriter pw = resp.getWriter();
//获取当前登录用户
User user = (User) req.getSession().getAttribute("user");
String id = user.getId();
//获取查询日期
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String date = req.getParameter("date");
if (null == date) {
Date d = new Date();
date = sdf.format(d);
}
if (date.contains("/")) {
String dates[] = date.split("/");
date = "";
date = dates[2] + "-" + dates[0] + "-" + dates[1];
}
log.info(date);
String dateStart = sdf.format(getDateBefore(sdf.parse(date),3));
String dateEnd = sdf.format(getDateAfter(sdf.parse(date),3));
String datesecond = sdf.format(getDateBefore(sdf.parse(date),2));
String datethird = sdf.format(getDateBefore(sdf.parse(date),1));
String datefifth = sdf.format(getDateAfter(sdf.parse(date),1));
String datesix = sdf.format(getDateAfter(sdf.parse(date),2));
String dates[] = new String[7];
dates[0] = dateStart;
dates[1] = datesecond;
dates[2] = datethird;
dates[3] = date;
dates[4] = datefifth;
dates[5] = datesix;
dates[6] = dateEnd;
log.info(dateStart+"-----"+dateEnd);
List list = energyInfoService.searchEnergyInfoByDates(id, dateStart,dateEnd);
for(int i=0;i //获取开始日期
public static Date getDateBefore(Date d, int day) {
Calendar now = Calendar.getInstance();
now.setTime(d);
now.set(Calendar.DATE, now.get(Calendar.DATE) - day);
return now.getTime();
}
//获取结束日期
public static Date getDateAfter(Date d, int day) {
Calendar now = Calendar.getInstance();
now.setTime(d);
now.set(Calendar.DATE, now.get(Calendar.DATE) + day);
return now.getTime();
}
//按日期排序
private static void ListSort(List list) {
Collections.sort(list, new Comparator() {
@Override
public int compare(EnergyInfoVO o1, EnergyInfoVO o2) {
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
try {
Date dt1 = format.parse(o1.getDateEnergy());
Date dt2 = format.parse(o2.getDateEnergy());
if (dt1.getTime() > dt2.getTime()) {
return 1;
} else if (dt1.getTime() < dt2.getTime()) {
return -1;
} else {
return 0;
}
} catch (Exception e) {
e.printStackTrace();
}
return 0;
}
});
} mybatis的mapper配置文件的sql：