Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 固定表头/文本框只能输入数字
Blogger Information
Blog 57
fans 3
comment 0
visits 60513
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
固定表头/文本框只能输入数字
岂几岂几
Original
1271 people have browsed it

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

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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post