要求:在页面添加日期选择控件,并显示日期相应的标题和数据。进入页面默认2017年01月。
实现:在页面上添加select控件,js通过调用id名,实现日期控件的范围。
主要问题1:月份控件的1-9月与数据库的两位数据无法对应。
【解决:当月份为1-9时,在前面添加0
function SetSelect1() {
$(".js-example-basic-single").select2();
var selYear = document.getElementById('selYear');
var selMonth = document.getElementById('selMonth');
setyear("selYear");
setmonth("selMonth");
if (new Date().getMonth() >= 1 && new Date().getMonth() <= 9) {
selYear.value = new Date().getFullYear();
selMonth.value = "0".concat(new Date().getMonth());
} else {
selYear.value = new Date().getFullYear();
selMonth.value = new Date().getMonth();
}
}
】
主要问题2:使用js实现标题动态变化。
【解决:动态拼接标题语句,并渲染到页面上。
function SetTitle() {
$(".page-header").empty();
$(".page-header").html(
selYear.value + "年" + selMonth.value + "月" + "医联常规统计信息:")
}
】
主要问题3:使用ajax传入日期选择参数,并动态显示数据。当数据不存在时,提示“暂无数据!”
【解决:
function ylcgtjQuery() {
var selYear = $('#selYear').val();
var selMonth = $('#selMonth').val();
SetTitle();
$.ajax({
url : "ylcgtjQuery!getYuzhiset.action",
type : "POST",
data: "selYear="+selYear+"&selMonth="+selMonth,
dataType : "text",
success : function(result) {
if (result != null) {
if(result!="nodata"){
$("#ylcjtjDesc").empty();
var str = result;
//返回数据中数字显示红色
var nums = result.match(/[1-9]\d*\.\d*|0\.\d*[1-9]\d*/g);
if(nums!=null){
for ( var i = 0; i < nums.length; i++) {
str = str.replace(nums[i], "" + nums[i]+ "");
}
$("#ylcjtjDesc").append(str);
}
}else{
$("#ylcjtjDesc").empty();
var str = "暂无数据!";
$("#ylcjtjDesc").append(str);
}
}
}
}
);}
】