【JavaWeb】总结一些前端开发的坑
#-1--自适应网页|手机页面
在JSP页面添加如下代码
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>添加前：手机适应屏幕会直接缩小成一块放在上面，但注意DataTable的滑动效果依旧保留
添加后：手机屏幕可以自适应了，表格宽度自动平铺整个页面，DataTable滑动效果正常
#-2--日期查询栏div并排居中显示
日期查询栏包括标签（label）、日期查询控件（datepicker）、查询按钮（button）
<body>
<div id="controlDiv">
<label>日期:</label>
<div id="queryDate" style="display: inline-block"></div>
<button id="queryButton" class="sel_btn" onclick="queryData()" value="" name="0">查询</button>
</div>
</body>div#controlDiv{
display: flex;
align-items: center;
justify-content: space-around;
}显示效果：
了解更多 CSS display属性: https://www.cnblogs.com/xuyuntao/articles/6391728.html
#-3--日期控件显示
#-3.1--第一种仅显示年份-月份
<head>添加相应的JS文件和CSS文件
JS文件：jquery-ui.js datepicker-zh-CN.js
CSS文件：jquery-ui.css
<head>
<!--jQuery-UI CSS-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<!--jQuery-UI-->
<script type="text/javascript" charset="UTF-8" src="scripts/jquery-ui.js"></script>
<!--datePicker-->
<script type="text/javascript" charset="UTF-8" src="scripts/datepicker-zh-CN.js"></script>
</head><body>添加日期控件 id标识为“queryDate”
<body>
<div id="controlDiv">
<label>日期:</label>
<div id="queryDate" style="display: inline-block"></div>
<button id="queryButton" class="sel_btn" onclick="queryData()" value="" name="0">查询</button>
</div>
</body>添加<script>给日期控件设置一些外观属性及默认设置
<script>
$(function () {
$("#queryDate").datepicker({
dateFormat: "yy-mm",
changeMonth: true,
changeYear: true,
// showButtonPanel: true,
maxDate: 0,
beforeShow: function (input, inst) {
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(0, 4);
month = datestr.substring(datestr.length - 3, datestr.length - 1);
$(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1));
// $(this).datepicker('setDate', new Date(year, month - 1, 1));
$(".ui-datepicker-calendar").hide();
$(".ui-datepicker-prev").hide();
}
},
onChangeMonthYear: function (dateText) {
var month = $(".ui-datepicker-month :selected").val();
var year = $(".ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
// alert(month)
$('.date-picker').focusout()
// Set date to picker
// $(this).datepicker('setDate', new Date(year, month, 1));
// Hide (close) the picker
$(this).datepicker('hide');
// // Blur to let the picker open on focus in
$(this).blur();
}
});
$("#queryDate").datepicker('setDate', new Date()); //设置默认起始时间为当天
});
</script>#-3.2--第二种显示年份-月份-日期，图标点击查询日期
<head>添加JS文件和CSS文件
<%--jquery-ui-主要为了引入datepicker--%>
<link rel="stylesheet" href="scripts/jquery-ui/jquery-ui.min.css">
<script src="scripts/jquery-ui/jquery-ui.min.js"></script><body>添加日期选择栏控件
<body>
<div id="dateSelect">
<form id="dateForm">
起始日期：<input type="text" id="startDate" name="startDate" class="datepicker" value="请点击右侧图标" readonly="readonly">
终止日期：<input type="text" id="endDate" name="endDate" class="datepicker" value="请点击右侧图标" readonly="readonly">
<input type="button" value="查询" onclick="SelectByDate()">
<input type="button" value="查询所有" onclick="SelectAll()">
</form>
</div>
</body><script>添加datepicker的默认外观设置及一些输入框的条件判断
<script>
<%--日历控件选择--%>
$(function () {
$(".datepicker").datepicker({
//设置日期格式
dateFormat:"yy-mm-dd",
//设置月历为中文
monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
//设置一周为中文
dayNamesMin: ['日','一','二','三','四','五','六'],
//显示其他月份日期，但不可点击
showOtherMonths: true,
//其他月份的日期设置为可选。前提是showOtherMonths: true
// selectOtherMonths: true,
//设置月份下拉框，可直接跳转
changeMonth: true,
//设置下拉框月份显示为中文
monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
//设置年份下拉框，可直接跳转
changeYear: true,
//设置最大可选日子，0代表到今天为止都可以选择
maxDate: 0,
//设置点击图标弹出日历框
showOn:"button",
buttonImage: "pic/Calender_24px.png",
//仅仅显示图片，false的时候会显示一个带图片的button
buttonImageOnly: true
});
});
//点击【查询】
function SelectByDate() {
//提交之前需要对【起始日期】和【终止日期】进行校验
var startDate = document.getElementById("startDate").value;
var endDate = document.getElementById("endDate").value;
if(startDate=="请点击右侧图标"&&endDate=="请点击右侧图标"){
alert("请输入正确的查询日期！");
}
else if(startDate=="请点击右侧图标"){
alert("请输入【起始日期】！");
}
else if(endDate=="请点击右侧图标"){
alert("请输入【终止日期】！");
}
else if(startDate > endDate){
alert("【终止日期】不能小于【起始日期】，请重新选择！");
}
//进行正常的跳转查询
else{
DateSelFlag = true;
dateSelString = startDate+"|"+endDate;
Flush(Total_salechannel);
}
}
//点击【查询所有】
function SelectAll() {
//调用查询函数
//把文本框恢复设置成原始值
document.getElementById("startDate").value = "请点击右侧图标";
document.getElementById("endDate").value = "请点击右侧图标";
}
</script>#-4--DataTable的使用
#-4.1-固定第一列【排名】情况
情况说明：表格第一列是排名情况默认从1开始，但DataTable有按列排序的功能，每次排序可能会导致第一列跟着移动，为了避免这种情况，需要每次在表格加载完成后重新绘制第一列。
<script>
function queryData(){
$.ajax({
type: "post",
data: {
queryDate: queryDate
},
url: "SlsptDataServlet",
dataType: "json",
success: function (data) {
//加载数据
drawTable(data);
},
error: function (e) {
alert("错误" + e.status);
},
complete: function () {
//第一栏是排名[1,2,3,..,]，让第一栏在重新排序的时候重新加载
//不然排序的时候会带着排名一起移动会变成乱序状态
var t = $("#example").DataTable();
t.on('order.dt search.dt', function () {
t.column(0, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
}
});
}
</script>效果展示：第一个按照综合得分从高到低排序，第二个按照综合得分从低到高排序
#-4.2-DataTable的初始化
1. 第一列不可查询、不可排序
2. 固定左边两列不滑动
$('#example').dataTable({
"columnDefs": [
{
//第一列不可查询、不可排序
"searchable": false,
"orderable": false,
"targets": 0
}
],
"paging": false,
"info": false,
"order": [[2, "desc"]], //默认按照第3列【综合得分】进行排序
"language": {
"zeroRecords": "抱歉，无数据，请重新查询！",
"lengthMenu": "每页显示_MENU_条",
"paginate": {
"next": "下一页",
"previous": "上一页"
},
"info": "总共_TOTAL_条数据，目前显示的是第_START_到_END_条",
"thousands": ","
},
"searching": false,
"destroy": true,
"data": data.BodyData,
scrollX: true, //可水平滑动
//固定左边两栏不滑动
fixedColumns: {
leftColumns: 2
}
});#-4.3-DataTable的footer
情况说明：有时候表格会在最下面一栏添加统计信息
$('#example').dataTable({
//底部foot设置统计的数据
"footerCallback": function (row, ndata, start, end, display) {
var totalJsonObj = data.TotalData;
var $th = $('tfoot').find('th');
$th.eq(0).html(totalJsonObj['排名']);
$th.eq(1).html(totalJsonObj['名称']);
$th.eq(2).html(totalJsonObj['综合得分']);
$th.eq(3).html(totalJsonObj['本周XX率-目标']);
$th.eq(4).html(totalJsonObj['本周XX率-达成']);
$th.eq(5).html(totalJsonObj['本周XX率-达成比例']);
$th.eq(6).html(totalJsonObj['本周XX率-得分']);
$th.eq(7).html(totalJsonObj['XX率-目标']);
$th.eq(8).html(totalJsonObj['XX率-达成']);
$th.eq(9).html(totalJsonObj['XX率-达成比例']);
$th.eq(10).html(totalJsonObj['XX率-得分']);
$th.eq(27).html(totalJsonObj['净XX率-达成']);
$th.eq(28).html(totalJsonObj['净XX率-得分']);
}
});#-4.4-NameAndNO
在后台传送JSON数据的时候封装了一个key为"nameAndNo"的json对象
//封装机构号+名称
JSONObject obj = new JSONObject();
obj.put("机构号",dataBean.getBranchNo());
obj.put("名称",dataBean.getBranchName());
jsonObject.put("nameAndNo",obj);前台接收json的时候，希望表格在[显示]状态下表现为“名称”，而其他情况例如排序的时候表现为“机构号”
$('#example').dataTable({
"columns": [
{
"data": "nameAndNo",
//渲染的时候
"render": function (data, type, row, meta) {
//当前模式为“display"即显示的时候，设置data为单位，否则为机构号，方便后续程序处理
if (type === 'display') {
data = data.名称;
}
else
data = data.机构号;
return data;
}
},
});#-4.5-排序的时候标明箭头【上】和【下】
<head>添加JS和css文件：
js文件：jquery.dataTables.min.js
css文件：jquery.dataTables.min.css
<head>
<script type="text/javascript" charset="utf8" src="scripts/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
</head>默认情况下：箭头没有显示，原因是图标的路径没有更改
图标放置在文件夹【pic】中
打开jquery.dataTables.min.css文件修改图标的默认路径
修改后效果如下：
#-4.6-datapicker去掉所有外边框
把jquery-ui.min.css去掉以后就行了，记得<head>中的link注释掉
<head>
<link rel="shortcup icon" href="pic/logo-small.png">
<!--链接外部样式表-->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/fixedColumns.dataTables.min.css">
<!--去掉datepicker的外边框样式-->
<%--<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">--%>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="scripts/jquery-3.3.1.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="scripts/dataTables.fixedColumns.min.js"></script>
<!--jQuery-UI-->
<script type="text/javascript" charset="UTF-8" src="scripts/jquery-ui.js"></script>
<!--datePicker-->
<script type="text/javascript" charset="UTF-8" src="scripts/datepicker-zh-CN.js"></script>
</head>