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

#-1--自适应网页|手机页面

在JSP页面添加如下代码

添加前：手机适应屏幕会直接缩小成一块放在上面，但注意DataTable的滑动效果依旧保留

添加后：手机屏幕可以自适应了，表格宽度自动平铺整个页面，DataTable滑动效果正常

#-2--日期查询栏div并排居中显示

日期查询栏包括标签（label）、日期查询控件（datepicker）、查询按钮（button）

    

          日期:
          

          查询
      

div#controlDiv{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

显示效果：

了解更多 CSS display属性: https://www.cnblogs.com/xuyuntao/articles/6391728.html

#-3--日期控件显示

#-3.1--第一种仅显示年份-月份

添加相应的JS文件和CSS文件

JS文件：jquery-ui.js  datepicker-zh-CN.js

CSS文件：jquery-ui.css

添加日期控件 id标识为“queryDate”

    

          日期:
          

          查询
    

添加

#-3.2--第二种显示年份-月份-日期，图标点击查询日期

添加JS文件和CSS文件

 <%--jquery-ui-主要为了引入datepicker--%>
 
 

添加日期选择栏控件

 
    

        

            起始日期：
            终止日期：
            
            
        
    

#-4--DataTable的使用

#-4.1-固定第一列【排名】情况

情况说明：表格第一列是排名情况默认从1开始，但DataTable有按列排序的功能，每次排序可能会导致第一列跟着移动，为了避免这种情况，需要每次在表格加载完成后重新绘制第一列。

效果展示：第一个按照综合得分从高到低排序，第二个按照综合得分从低到高排序

     

#-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-排序的时候标明箭头【上】和【下】

添加JS和css文件：

js文件：jquery.dataTables.min.js

css文件：jquery.dataTables.min.css

默认情况下：箭头没有显示，原因是图标的路径没有更改

图标放置在文件夹【pic】中

打开jquery.dataTables.min.css文件修改图标的默认路径

修改后效果如下： 

 

#-4.6-datapicker去掉所有外边框

              

把jquery-ui.min.css去掉以后就行了，记得中的link注释掉

      

      
      
      
      
      
      
      <%----%>