【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>
        <%--日历控件选择--%>
        $(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>

【JavaWeb】总结一些前端开发的坑

猜你喜欢