微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 固定表头/文本框只能输入数字
博主信息
博文 58
粉丝 3
评论 0
访问量 76670
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
固定表头/文本框只能输入数字
岂几岂几
原创
1663人浏览过

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

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>
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录