简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >固定表头/文本框只能输入数字

固定表头/文本框只能输入数字

岂几岂几
岂几岂几原创
2020年06月29日 15:09:091270浏览

滚动固定表头/文本框只能输入数字

1. 滚动固定表头

实现过程：

  • 创建两个表格，第一个只有表头信息（.head-tbl），第二个就是完整的数据表（.data-tbl）。
  • 使用定位的方式把.head-tbl表固定在顶部
    • .head-tbl表默认隐藏
    • 需要加z-index样式，且数值要比.data-tbl的z-index样式的数值大, 否则滚动时.head-tbl表将会被.data-tbl覆盖.
      1. <style>
      2. .head-tbl {
      3.   display: none;
      4.   /* 相对于浏览器窗口定位 */
      5.   position: fixed;
      6.   /* 可能是body元素的padding-top没有置为0, 所以需要微调距离顶部的距离为-10px才能贴住浏览器上方 */
      7.   top: -10px;
      8.   z-index: 2;
      9. }
      10. </style>

  • 编写<body>元素的onload和onresize事件的处理脚本, 在加载页面/页面大小发生变化时, 调整.head-tbl表的整体宽度和列宽度

    • 在使用定位的方式固定.head-tbl表后, 它的宽度和列宽都会发生变化(可能是脱离了原文档流). 所以需要触发事件调整其宽度.
    • 在<script>中的全局区域, 也需要触发一次调整整体宽度和列宽度的处理脚本. 相当于在进入页面时重调.
    • 整体宽度的调整, 获取当前窗口的宽度, 减去父容器的padding-left和padding-right就能得到.head-tbl可布局的宽度.
    • 整体宽度的调整, 使用css()方法设置width样式即可.
      1. /* 加载完成/窗口大小变化时, 调整表格的宽度 */
      2. function resizeWidth() {
      3.     $ = layui.jquery;
      4.     console.log('redizing');
      5.     /* 获取body元素的宽度(不包含纵向滚动条), 20是父容器左右内边距之和 */
      6.     var width = document.body.clientWidth - 20 + "";
      7.     $('table:first-of-type').css('width', width );
      9.     // 调整固定表头列宽度
      10.     resizeThWidth();
      11. }
    • 调整.head-tbl表的列宽, 每列列宽等于.data-tbl表tbody中第一行数据的对应列宽.
    • 获取.data-tble表的列宽, 务必要用td元素的offsetWidth属性获取, td.style.width是获取不到的!
    • 设置.head-tble表的列宽, 无比要给td元素的width属性赋值, 给td.style.width赋值是无效的!
    • td.offsetWidth的值的是”内容区宽度+左右内边距+边框[不确定]”的和; 而td.width属性是设置内容区宽度的值. 所以td2.width = td1.offsetWidth - 左右边距 - 左右边框宽度.
      1.   /* 根据表格中的数据, 调整固定表头的列宽度 */
      2. function resizeThWidth() {
      3.     $ = layui.jquery;
      5.     // 表头表中的<tr>元素列表
      6.     var thHead = $('table:first-of-type > thead > tr');
      7.     // 数据表的内容区第一行的<td>列表, 因为本实例中是两层表头, 所以有两个<tr>元素
      8.     var thData = $('table:last-of-type > tbody > tr:first-of-type > td');
      9.     // 遍历数据表的内容区第一行的<td>列表
      10.     for(var i = 0; i < thData.length; i++) {
      11.         $(thData[i]).css('padding');
      12.         // 前7个td宽度设置给表头表的第一个tr对应的th的宽度
      13.         if(i < 7) {
      14.             ths = thHead[0].querySelectorAll('th');
      15.             // 30为padding-left和padding-right, 1是找平的, 不懂为啥会多处1
      16.             ths[i].width = thData[i].offsetWidth - 30 - 1;
      17.         } else if(i >=7 && i < 16) { // 生于的td宽度设置给表头表的第二个tr对应的th的宽度
      18.             ths = thHead[1].querySelectorAll('th');
      19.             // 30为padding-left和padding-right, 1是找平的, 不懂为啥会多处1
      20.             ths[i - 7].width = thData[i].offsetWidth - 30 - 1;
      21.         }
      22.     }
      23. }
    • 监听窗口滚动事件, 当窗口的滚动高度scrollTop大于.data-tbl表的offsetTop属性值(即.data-tbl表相对于窗口顶部的偏移量)时, 把.head-tbl表的display样式属性值设置为table; 否则设置为hidden.
      1. window.addEventListener("scroll", function(e) {
      2.         /* console.log($('table:last-of-type')[0].offsetTop);
      3.         console.log($('table:last-of-type')[0].scrollTop);
      4.         console.log(document.documentElement.scrollTop);
      5.         console.log('---'); */
      6.         if(document.documentElement.scrollTop > $('table:last-of-type')[0].offsetTop) {
      7.             console.log('show!');
      8.             $('.head-tbl').css('display', 'table');
      9.             // resizeThWidth();
      10.         } else {
      11.             console.log('hide!');
      12.             $('.head-tbl').css('display', 'none');
      13.         }
      14.     }, false);

      2. 文本框只能输入数字

实现思路:

  • 文本框设置maxlength属性, 限制文本域能输入的字符数上限.
  • 文本框设置onpast="return false;"来屏蔽文本框粘贴功能. 避免通过粘贴向文本框中输入非数字字符.
  • 文本快设置style="ime-mode:disabled"样式来屏蔽中文输入, 但貌似并没有成功屏蔽.
    1. <input type="text" class="layui-input" name="zhipinshuhao" id="zhipinshuhao" placeholder="4位书号" maxlength="4" style="ime-mode:disabled" onpaste="return false;" onkeyup="this.value = check(this.value)" value="{{$book['zhipinshuhao']}}">
  • 为文本快添加keypress事件的处理脚本, 当发生按键点按事件时, 判断此次点按输入的字符是否是数字, 是则返回此次输入的字符; 否则不返回输入的字符(主要是过滤非中文的非法字符).
    1. <script>
    2. // 判断按键的编码是不是数字，如果不是，则不返回这个按键值（对中文无效）
    3. $('#zhipinshuhao').on('keypress', function() {
    4. // 本次点按的按键是回车
    5. if(event.keyCode == 13) {
    6.   layer.msg(event.keyCode);
    7. }
    9. var val = event.target.value.toString();
    10. // 0的ascii码值是48; 9的ascii码值是57
    11. if(event.keyCode < 48 || event.keyCode > 57) {
    12.   // 本次点按的按键对应的字符不是数字, 则不反悔输入的字符
    13.   event.returnValue = false;
    14. } else {
    15.   // 本次点按的按键对应的字符是数字, 返回输入的字符
    16.   event.returnValue = true;
    17. }
    18. });
    19. </script>
  • 文本框设置onkeyup="this.value = check(this.value)", 实现在按键抬起时, 再验证一次输入的文本是否有非数字字符(主要是中文字符).
    1. <script>
    2.   // 只能输入整数的双保险， 不做这个check，则可以输入中文字符
    3. function check(str) {
    4.     var temp=""
    5.     for(var i=0;i<str.length;i++)
    6.         if(str.charCodeAt(i)>=48&&str.charCodeAt(i)<=57)
    7.             temp+=str.charAt(i)
    8.     return temp;
    9. }
    10. </script>

代码清单

  • 1- 滚动固定表头

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>图书校对进度表</title>
    7.   <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
    8.   <script src="/static/plugin/layui/layui.js"></script>
    9.   <style>
    10.       body {
    11.           padding: 0 10px 10px 10px;
    12.       }
    13.       h2 {
    14.           margin-bottom: 20px;
    15.       }
    16.       tr, th {
    17.           text-align: end;
    18.       }
    19.       .head-tbl {
    20.           display: none;
    21.           position: fixed;
    22.           top: -10px;
    23.           z-index: 2;
    24.       }
    25.       .data-tbl{
    26.           z-index: 1;
    27.       }
    28.       .data-tbl td{
    29.           padding: 5px;
    30.       }
    31.       .fun-area {
    32.           width: 100%;
    33.           display: flex;
    34.           flex-flow: row wrap;
    35.           justify-content: flex-end;
    36.       }
    37.   </style>
    38. </head>
    39. <body onload="resizeWidth()" onresize="resizeWidth()">
    40.   <div style="text-align: center; color: #666;">
    41.       <h2>图书校对进度表</h2>
    42.   </div>
    43.   <div class="layui-form">
    44.       <div class="layui-form-item">
    45.           <div class="layui-inline">
    46.               <label for="search_words" class="layui-form-label">关键字</label>
    47.               <div class="layui-input-inline">
    48.                   <input type="text" class="layui-input" name="search_words" id="search_words" value="{{$searchwords}}">
    49.               </div>
    50.           </div>
    51.           <div class="layui-inline">
    52.               <label for="status_0" class="layui-form-label">校对状态</label>
    53.               <div class="layui-input-inline" style="width: 280px">
    54.                   <input type="radio" name="status" id="status_0" value= "0" title="未完成" {{$status=='0' ? 'checked' : ''}}>
    55.                   <input type="radio" name="status" id="status_1" value= "1" title="已完成" {{$status=='1' ? 'checked' : ''}}>
    56.                   <input type="radio" name="status" id="status_2" value= "2" title="全部" {{$status=='2' ? 'checked' : ''}}>
    57.               </div>
    58.           </div>
    59.           <div class="layui-inline">
    60.               <div class="layui-input-block">
    61.                   <button type="button" onclick="doQuery()" class="layui-btn layui-btn-success">搜索</button>
    62.               </div>
    63.           </div>
    64.       </div>
    65.   </div>
    66.   <div class="fun-area">
    67.       <button type="button" onclick="add()" class="layui-btn layui-btn-success">新增</button>
    68.   </div>
    69.   <table class="layui-table head-tbl">
    70.       <thead style="text-align: center;">
    71.           <tr>
    72.               <th rowspan="2">序号</th>
    73.               <th rowspan="2">丛书名</th>
    74.               <th rowspan="2">书名</th>
    75.               <th rowspan="2">书号</th>
    76.               <th rowspan="2">版印次</th>
    77.               <th rowspan="2">字数</th>
    78.               <th rowspan="2">责任校对</th>
    79.               <th colspan="3">一校</th>
    80.               <th colspan="3">二校</th>
    81.               <th colspan="3">三校</th>
    82.               <th rowspan="2">操作</th>
    83.           </tr>
    84.           <tr>
    85.               <th>校对员</th>
    86.               <th>开始时间</th>
    87.               <th>完成时间</th>
    88.               <th>校对员</th>
    89.               <th>开始时间</th>
    90.               <th>完成时间</th>
    91.               <th>校对员</th>
    92.               <th>开始时间</th>
    93.               <th>完成时间</th>
    94.           </tr>
    95.       </thead>
    96.   </table>
    98.   <table class="layui-table data-tbl">
    100.       <thead style="text-align: center;">
    101.           <tr>
    102.               <th rowspan="2">序号</th>
    103.               <th rowspan="2">丛书名</th>
    104.               <th rowspan="2">书名</th>
    105.               <th rowspan="2">书号</th>
    106.               <th rowspan="2">版印次</th>
    107.               <th rowspan="2">字数</th>
    108.               <th rowspan="2">责任校对</th>
    109.               <th colspan="3">一校</th>
    110.               <th colspan="3">二校</th>
    111.               <th colspan="3">三校</th>
    112.               <th rowspan="2">操作</th>
    113.           </tr>
    114.           <tr>
    115.               <th>校对员</th>
    116.               <th>开始时间</th>
    117.               <th>完成时间</th>
    118.               <th>校对员</th>
    119.               <th>开始时间</th>
    120.               <th>完成时间</th>
    121.               <th>校对员</th>
    122.               <th>开始时间</th>
    123.               <th>完成时间</th>
    124.           </tr>
    125.       </thead>
    126.       <tbody>
    127.           @if(!empty($books))
    128.           @for($index = 0; $index < count($books); $index++)
    129.           <tr>
    130.               <td>{{$index + 1}}</td>
    131.               <td>{{$books[$index]['congshuming']}}</td>
    132.               <td>{{$books[$index]['zhipinmingcheng']}}</td>
    133.               <td>{{$books[$index]['zhipinshuhao']}}</td>
    134.               <td>{{$books[$index]['zhipinbanci'] . '/' . $books[$index]['zhipinyinci']}}</td>
    135.               <td>{{$books[$index]['qianzishu']}}</td>
    136.               <td>{{$admins[$books[$index]['zerenjiaodui']] ?? ''}}</td>
    137.               <td>{{$admins[$books[$index]['yijiaorenyuan']] ?? ''}}</td>
    138.               <td>{{$books[$index]['yijiaokaishishijian'] == 0 ? '' : Date('Y-m-d', $books[$index]['yijiaokaishishijian'])}}</td>
    139.               <td>{{$books[$index]['yijiaowanchengshijian'] == 0 ? '' : Date('Y-m-d', $books[$index]['yijiaowanchengshijian'])}}</td>
    140.               <td>{{$admins[$books[$index]['erjiaorenyuan']] ?? ''}}</td>
    141.               <td>{{$books[$index]['erjiaokaishishijian'] == 0 ? '' : Date('Y-m-d', $books[$index]['erjiaokaishishijian'])}}</td>
    142.               <td>{{$books[$index]['erjiaowanchengshijian'] == 0 ? '' : Date('Y-m-d', $books[$index]['erjiaowanchengshijian'])}}</td>
    143.               <td>{{$admins[$books[$index]['sanjiaorenyuan']] ?? ''}}</td>
    144.               <td>{{$books[$index]['sanjiaokaishishijian'] == 0 ? '' : Date('Y-m-d', $books[$index]['sanjiaokaishishijian'])}}</td>
    145.               <td>{{$books[$index]['sanjiaowanchengshijian'] == 0 ? '' : Date('Y-m-d', $books[$index]['sanjiaowanchengshijian'])}}</td>
    146.               <td>
    147.                   <button type="button" onclick="edit({{$books[$index]['id']}})" class="layui-btn layui-btn-success layui-btn-xs">修改</button>
    148.                   <button type="button" onclick="del({{$books[$index]['id']}})" class="layui-btn layui-btn-warm layui-btn-xs">删除</button>
    149.               </td>
    150.           </tr>
    151.           @endfor
    152.           @endif
    153.           <!-- @for($index = 0; $index < 100; $index++)
    154.           <tr>
    155.               <td>row1</td>
    156.               <td>row2</td>
    157.               <td>row3</td>
    158.               <td>row4</td>
    159.               <td>row5</td>
    160.               <td>row6</td>
    161.               <td>row7</td>
    162.               <td>row8</td>
    163.               <td>row9</td>
    164.               <td>row10</td>
    165.               <td>row11</td>
    166.               <td>row12</td>
    167.               <td>row13</td>
    168.               <td>row14</td>
    169.               <td>row15</td>
    170.               <td>row16</td>
    171.               <td>row17</td>
    172.           </tr>
    173.           @endfor -->
    174.       </tbody>
    175.   </table>
    176. </body>
    177. <script>
    178.   layui.use(['layer', 'form'], function() {
    179.       layer = layui.layer;
    180.       form = layui.form;
    181.       $ = layui.jquery;
    183.       $('input[name="search_words"]').on('keyup', function(e) {
    184.           // 按下回车
    185.           if(e.keyCode == 13 && $.trim(e.target.value) != '') {
    186.               var status = $('input[type="radio"]:checked').val();
    187.               window.location.href = '?searchWords=' + $.trim(e.target.value) + '&status=' + status;
    188.           }
    189.       });
    191.       // 调整固定顶部的列宽大小
    192.       resizeThWidth();
    193.       window.addEventListener("scroll", function(e) {
    194.           /* console.log($('table:last-of-type')[0].offsetTop);
    195.           console.log($('table:last-of-type')[0].scrollTop);
    196.           console.log(document.documentElement.scrollTop);
    197.           console.log('---'); */
    198.           if(document.documentElement.scrollTop > $('table:last-of-type')[0].offsetTop) {
    199.               console.log('show!');
    200.               $('.head-tbl').css('display', 'table');
    201.               // resizeThWidth();
    202.           } else {
    203.               console.log('hide!');
    204.               $('.head-tbl').css('display', 'none');
    205.           }
    206.       }, false);
    208.       $('td, th').css('text-align', 'center');
    209.   });
    211.   function edit(id) {
    212.       layer.open({
    213.           type: 2,
    214.           title: '修改图书',
    215.           shadeClose: false,
    216.           shade: 0.8,
    217.           area: ['1048px', '680px'],
    218.           content: '/reviser/revision/edit?id=' + id,
    219.           btn: ['保存'],
    220.           yes: function(index, layero) {
    221.               var body = layer.getChildFrame('body', index);
    222.               // 得到iframe页的窗口对象
    223.               var iframeWin = window[layero.find('iframe')[0]['name']];
    224.               // 执行iframe页的方法: iframeWin.要调用的方法名();
    225.               iframeWin.save();
    226.           }
    227.       });
    228.   }
    230.   function add() {
    231.       layer.open({
    232.           type: 2,
    233.           title: '新增图书',
    234.           shadeClose: false,
    235.           shade: 0.8,
    236.           area: ['1048px', '680px'],
    237.           content: '/reviser/revision/add',
    238.           btn: ['保存'],
    239.           yes: function(index, layero) {
    240.               var body = layer.getChildFrame('body', index);
    241.               // 得到iframe页的窗口对象
    242.               var iframeWin = window[layero.find('iframe')[0]['name']];
    243.               // 执行iframe页的方法: iframeWin.要调用的方法名();
    244.               iframeWin.save();
    245.           }
    246.       });
    247.   }
    249.   function del(id) {
    250.       layer.confirm('确定要删除该图书吗?', {icon: 3, title:'提示'}, function(index){
    251.           $.get(
    252.               '/reviser/revision/del?id=' + id
    253.               , function(res) {
    254.                   if(res.status != undefined && res.status == 0) {
    255.                       layer.msg(res.message, {icon: 1});
    256.                       setTimeout(() => {
    257.                           window.location.reload();
    258.                       }, 1000);
    259.                   } else if(res.status != undefined) {
    260.                       return layer.alert(res.message, {icon: 2});
    261.                   } else {
    262.                       return layer.alert('提交保存失败', {icon: 2});
    263.                   }
    264.               }
    265.               , 'json'
    266.           ); 
    267.           layer.close(index);
    268.       });
    269.   }
    271.   function doQuery() {
    272.       var status = $('input[type="radio"]:checked').val();
    273.       var searchWords = $.trim($('#search_words').val());
    274.       window.location.href = '?searchWords=' + searchWords + '&status=' + status;//+ $.trim(event.target.value + '&status=' + status);
    275.   }
    277.   /* 根据表格中的数据, 调整固定表头的列宽度 */
    278.   function resizeThWidth() {
    279.       $ = layui.jquery;
    281.       // 表头表中的<tr>元素列表
    282.       var thHead = $('table:first-of-type > thead > tr');
    283.       // 数据表的内容区第一行的<td>列表, 因为本实例中是两层表头, 所以有两个<tr>元素
    284.       var thData = $('table:last-of-type > tbody > tr:first-of-type > td');
    285.       // 遍历数据表的内容区第一行的<td>列表
    286.       for(var i = 0; i < thData.length; i++) {
    287.           $(thData[i]).css('padding');
    288.           // 前7个td宽度设置给表头表的第一个tr对应的th的宽度
    289.           if(i < 7) {
    290.               ths = thHead[0].querySelectorAll('th');
    291.               // 30为padding-left和padding-right, 1是找平的, 不懂为啥会多处1
    292.               ths[i].width = thData[i].offsetWidth - 30 - 1;
    293.           } else if(i >=7 && i < 16) { // 生于的td宽度设置给表头表的第二个tr对应的th的宽度
    294.               ths = thHead[1].querySelectorAll('th');
    295.               // 30为padding-left和padding-right, 1是找平的, 不懂为啥会多处1
    296.               ths[i - 7].width = thData[i].offsetWidth - 30 - 1;
    297.           }
    298.       }
    299.   }
    301.   /* 加载完成/窗口大小变化时, 调整表格的宽度 */
    302.   function resizeWidth() {
    303.       $ = layui.jquery;
    304.       console.log('redizing');
    305.       var width = document.body.clientWidth - 20 + "";
    306.       $('table:first-of-type').css('width', width );
    308.       // 调整固定表头列宽度
    309.       resizeThWidth();
    310.   }
    311. </script>
    312. </html>
    • 2- 只能输入数字的文本框(书号文本框)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>新增图书</title>
  7.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  8.     <script src="/static/plugin/layui/layui.js"></script>
  9.     <style>
  10.         body {
  11.             padding: 10px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="layui-form">
  17.         @csrf
  18.         <div class="layui-form-item">
  19.             <label for="zhipinmingcheng" class="layui-form-label">图书名称：</label>
  20.             <div class="layui-input-block">
  21.                 <input type="text" class="layui-input" name="zhipinmingcheng" id="zhipinmingcheng">
  22.             </div>
  23.         </div>
  24.         <div class="layui-form-item">
  25.             <label for="congshuming" class="layui-form-label">丛书名：</label>
  26.             <div class="layui-input-block">
  27.                 <input type="text" class="layui-input" name="congshuming" id="congshuming">
  28.             </div>
  29.         </div>
  30.         <div class="layui-form-item">
  31.             <label for="zhipinshuhao" class="layui-form-label">书号：</label>
  32.             <div class="layui-input-inline">
  33.                 <input type="text" class="layui-input" name="zhipinshuhao" id="zhipinshuhao" placeholder="4位书号" maxlength="4" style="ime-mode:disabled" onpaste="return false;" onkeyup="this.value = check(this.value)">
  34.             </div>
  35.         </div>
  36.         <div class="layui-form-item">
  37.             <label for="zhipinbanci" class="layui-form-label">版次：</label>
  38.             <div class="layui-input-inline">
  39.                 <input type="number" class="layui-input" name="zhipinbanci" id="zhipinbanci" value="1" min="1">
  40.             </div>
  41.         </div>
  42.         <div class="layui-form-item">
  43.             <label for="zhipinyinci" class="layui-form-label">印次：</label>
  44.             <div class="layui-input-inline">
  45.                 <input type="number" class="layui-input" name="zhipinyinci" id="zhipinyinci" value="1" min="1">
  46.             </div>
  47.         </div>
  48.         <div class="layui-form-item">
  49.             <label for="qianzishu" class="layui-form-label">千字数：</label>
  50.             <div class="layui-input-inline">
  51.                 <input type="number" class="layui-input" name="qianzishu" id="qianzishu" min="0">
  52.             </div>
  53.         </div>
  54.         <div class="layui-form-item">
  55.             <label for="zerenjiaodui" class="layui-form-label">责任校对：</label>
  56.             <div class="layui-input-inline">
  57.                 <select name="zerenjiaodui" id="zerenjiaodui" class="layui-input">
  58.                     <option value=""></option>
  59.                     @if(!empty($admins))
  60.                     @foreach($admins as $admin)
  61.                     <option value="{{$admin['id']}}">{{$admin['real_name']}}</option>
  62.                     @endforeach
  63.                     @endif
  64.                 </select>
  65.             </div>
  66.         </div>
  67.         <hr/>
  68.         <div class="layui-form-item">
  69.             <div class="layui-inline">
  70.                 <label for="yijiaorenyuan" class="layui-form-label">一校人员</label>
  71.                 <div class="layui-input-inline">
  72.                     <select name="yijiaorenyuan" id="yijiaorenyuan" class="layui-input">
  73.                         <option value=""></option>
  74.                         @if(!empty($admins))
  75.                         @foreach($admins as $admin)
  76.                         <option value="{{$admin['id']}}">{{$admin['real_name']}}</option>
  77.                         @endforeach
  78.                         @endif
  79.                     </select>
  80.                 </div>
  81.             </div>
  82.             <div class="layui-inline">
  83.                 <label for="yijiaokaishishijian" class="layui-form-label" style="width: 100px;">一校开始时间</label>
  84.                 <div class="layui-input-inline">
  85.                     <input type="text" class="layui-input" name="yijiaokaishishijian" id="yijiaokaishishijian">
  86.                 </div>
  87.             </div>
  88.             <div class="layui-inline">
  89.                 <label for="yijiaowanchengshijian" class="layui-form-label" style="width: 100px;">一校完成时间</label>
  90.                 <div class="layui-input-inline">
  91.                     <input type="text" class="layui-input" name="yijiaowanchengshijian" id="yijiaowanchengshijian">
  92.                 </div>
  93.             </div>
  94.         </div>
  95.         <div class="layui-form-item">
  96.             <div class="layui-inline">
  97.                 <label for="erjiaorenyuan" class="layui-form-label">二校人员</label>
  98.                 <div class="layui-input-inline">
  99.                     <select name="erjiaorenyuan" id="erjiaorenyuan" class="layui-input">
  100.                         <option value=""></option>
  101.                         @if(!empty($admins))
  102.                         @foreach($admins as $admin)
  103.                         <option value="{{$admin['id']}}">{{$admin['real_name']}}</option>
  104.                         @endforeach
  105.                         @endif
  106.                     </select>
  107.                 </div>
  108.             </div>
  109.             <div class="layui-inline">
  110.                 <label for="erjiaokaishishijian" class="layui-form-label" style="width: 100px;">二校开始时间</label>
  111.                 <div class="layui-input-inline">
  112.                     <input type="text" class="layui-input" name="erjiaokaishishijian" id="erjiaokaishishijian">
  113.                 </div>
  114.             </div>
  115.             <div class="layui-inline">
  116.                 <label for="erjiaowanchengshijian" class="layui-form-label" style="width: 100px;">二校完成时间</label>
  117.                 <div class="layui-input-inline">
  118.                     <input type="text" class="layui-input" name="erjiaowanchengshijian" id="erjiaowanchengshijian">
  119.                 </div>
  120.             </div>
  121.         </div>
  122.         <div class="layui-form-item">
  123.             <div class="layui-inline">
  124.                 <label for="sanjiaorenyuan" class="layui-form-label">三校人员</label>
  125.                 <div class="layui-input-inline">
  126.                     <select name="sanjiaorenyuan" id="sanjiaorenyuan" class="layui-input">
  127.                         <option value=""></option>
  128.                         @if(!empty($admins))
  129.                         @foreach($admins as $admin)
  130.                         <option value="{{$admin['id']}}">{{$admin['real_name']}}</option>
  131.                         @endforeach
  132.                         @endif
  133.                     </select>
  134.                 </div>
  135.             </div>
  136.             <div class="layui-inline">
  137.                 <label for="sanjiaokaishishijian" class="layui-form-label" style="width: 100px;">三校开始时间</label>
  138.                 <div class="layui-input-inline">
  139.                     <input type="text" class="layui-input" name="sanjiaokaishishijian" id="sanjiaokaishishijian">
  140.                 </div>
  141.             </div>
  142.             <div class="layui-inline">
  143.                 <label for="sanjiaowanchengshijian" class="layui-form-label" style="width: 100px;">三校完成时间</label>
  144.                 <div class="layui-input-inline">
  145.                     <input type="text" class="layui-input" name="sanjiaowanchengshijian" id="sanjiaowanchengshijian">
  146.                 </div>
  147.             </div>
  148.         </div>
  149.     </div>
  151. </body>
  152. <script>
  153.     layui.use(['layer', 'form', 'laydate'], function() {
  154.         layer = layui.layer;
  155.         form = layui.form;
  156.         $ = layui.jquery;
  158.         var laydate = layui.laydate;
  160.         //执行laydate实例
  161.         var dateItem = ['#yijiaokaishishijian', '#erjiaokaishishijian', '#sanjiaokaishishijian', '#yijiaowanchengshijian', '#erjiaowanchengshijian', '#sanjiaowanchengshijian'];
  162.         dateItem.forEach(function(item, index) {
  163.             laydate.render({
  164.                 elem: item //指定元素
  165.             });
  166.         });
  168.         // 判断按键的编码是不是数字，如果不是，则不返回这个按键值（对中文无效）
  169.         $('#zhipinshuhao').on('keypress', function() {
  170.             if(event.keyCode == 13) {
  171.                 layer.msg(event.keyCode);
  172.             }
  174.             var val = event.target.value.toString();
  175.             if(event.keyCode < 48 || event.keyCode > 57) {
  176.                 event.returnValue = false;
  177.             } else {
  178.                 event.returnValue = true;
  179.             }
  180.         });
  181.     });
  183.     // 只能输入整数的双保险， 不做这个check，则可以输入中文字符
  184.     function check(str) {
  185.         var temp=""
  186.         for(var i=0;i<str.length;i++)
  187.             if(str.charCodeAt(i)>=48&&str.charCodeAt(i)<=57)
  188.                 temp+=str.charAt(i)
  189.         return temp;
  190.     }
  192.     function save() {
  193.         var data = {};
  194.         // token
  195.         data._token = $('input[name="_token"]').val();
  196.         // 制品名称
  197.         data.zhipinmingcheng = $.trim($('#zhipinmingcheng').val());
  198.         // 丛书名
  199.         data.congshuming = $.trim($('#congshuming').val());
  200.         // 书号
  201.         data.zhipinshuhao = $.trim($('#zhipinshuhao').val());
  202.         // 版次
  203.         data.zhipinbanci = $.trim($('#zhipinbanci').val());
  204.         // 印次
  205.         data.zhipinyinci = $.trim($('#zhipinyinci').val());
  206.         // 千字数
  207.         data.qianzishu = $.trim($('#qianzishu').val());
  208.         // 责任校对
  209.         data.zerenjiaodui = $.trim($('#zerenjiaodui').val());
  210.         // 一校人员
  211.         data.yijiaorenyuan = $.trim($('#yijiaorenyuan').val());
  212.         // 一校开始时间
  213.         data.yijiaokaishishijian = $.trim($('#yijiaokaishishijian').val());
  214.         // 一校完成时间
  215.         data.yijiaowanchengshijian = $.trim($('#yijiaowanchengshijian').val());
  216.         // 二校人员
  217.         data.erjiaorenyuan = $.trim($('#erjiaorenyuan').val());
  218.         // 二校开始时间
  219.         data.erjiaokaishishijian = $.trim($('#erjiaokaishishijian').val());
  220.         // 二校完成时间
  221.         data.erjiaowanchengshijian = $.trim($('#erjiaowanchengshijian').val());
  222.         // 三校人员
  223.         data.sanjiaorenyuan = $.trim($('#sanjiaorenyuan').val());
  224.         // 三校开始时间
  225.         data.sanjiaokaishishijian = $.trim($('#sanjiaokaishishijian').val());
  226.         // 三校完成时间
  227.         data.sanjiaowanchengshijian = $.trim($('#sanjiaowanchengshijian').val());
  229.         var checkRes = dataCheck(data);
  230.         if(checkRes.status > 0) {
  231.             return layer.alert(checkRes.message);
  232.         }
  234.         $.post(
  235.             '/reviser/revision/save'
  236.             , data
  237.             , function(res) {
  238.                 if(res.status != undefined && res.status == 0) {
  239.                     layer.msg(res.message, {icon: 1});
  240.                     setTimeout(() => {
  241.                         parent.window.location.reload();
  242.                     }, 1000);
  243.                 } else if(res.status != undefined) {
  244.                     return layer.alert(res.message, {icon: 2});
  245.                 } else {
  246.                     return layer.alert('提交保存失败', {icon: 2});
  247.                 }
  248.             }
  249.             , 'json'
  250.         );
  251.     }
  253.     function dataCheck(data) {
  254.         var res = {
  255.             status: 1
  256.         };
  257.         if(data.zhipinmingcheng == undefined || data.zhipinmingcheng == '') {
  258.             res.message = '图书名称不能为空';
  259.             return res;
  260.         }
  261.         if(data.zhipinshuhao == undefined || data.zhipinshuhao == '') {
  262.             res.message = '书号不能为空';
  263.             return res;
  264.         }
  265.         if(data.zhipinbanci == undefined || data.zhipinbanci == '') {
  266.             res.message = '版次不能为空';
  267.             return res;
  268.         }
  269.         if(data.zhipinbanci <= 0) {
  270.             res.message = '版次不能小于1';
  271.             return res;
  272.         }
  273.         if(data.zhipinyinci == undefined || data.zhipinyinci == '') {
  274.             res.message = '印次不能为空';
  275.             return res;
  276.         }
  277.         if(data.zhipinyinci <= 0) {
  278.             res.message = '印次不能小于1';
  279.             return res;
  280.         }
  281.         if(data.qianzishu == undefined || data.qianzishu == '') {
  282.             res.message = '千字数不能为空';
  283.             return res;
  284.         }
  285.         if(data.qianzishu <= 0) {
  286.             res.message = '千字数必须大于0';
  287.             return res;
  288.         }
  289.         if(data.zerenjiaodui == undefined || data.zerenjiaodui == '') {
  290.             res.message = '责任校对不能为空';
  291.             return res;
  292.         }
  293.         res.status = 0;
  295.         return res;
  296.     }
  297. </script>
  298. </html>
上一条：php中文网grid布局实战下一条：centos7中redis6.0.5部署安装
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多