侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

按星期及每天三个时间段供选择-设计效果图及功能

技术  /  管理员 发布于 5年前   491
  1. 选择存储介质 数组/缓存/数据库 (我这选数据库 因为我已在工作项目中使用)

  2. 一星期7天 每天分三个时间段上/下/晚 表设计:

CREATE TABLE `time` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `time_name` char(6) NOT NULL COMMENT '时间段 中午/下午/晚上',
 `xingqi_name` char(6) NOT NULL COMMENT '星期',
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=22 DEFAULT CHARSET=utf8 ROW_FORMAT=FIXED COMMENT='时间表';

3.设计功能 关联表设计一个字段存time表的id 比如格式:(3,6,9,12,15,18,21)对应(晚,晚,晚,晚,晚...)

4.效果图:

 blob.png

5.根据效果图 循环time表的数据 每个input 存个属性为time表id 提交的时候把选中的id存入一个数组 异步到后台

 存入关联表字段  

html: 引用前端框架layui  判断选中用in_array() + checked

  <form action="" method="post" class="layui-form layui-form-pane">
    <div class="layui-form-item layui-form-text">
        <label for="desc" class="layui-form-label">
            授课时间
        </label>
                <table style="clear:both; width:100%;" class="tbhju">
                    <colgroup>
                        <col width="16%">
                        <col width="12%">
                        <col width="12%">
                        <col width="12%">
                        <col width="12%">
                        <col width="12%">
                        <col width="12%">
                        <col width="12%">
                    </colgroup>
                    <thead>
                        <tr id="uinp">
                            <th>&nbsp;</th>
                            <th>星期一</th>
                            <th>星期二</th>
                            <th>星期三</th>
                            <th>星期四</th>
                            <th>星期五</th>
                            <th>星期六</th>
                            <th>星期日</th>
                        </tr>
                    </thead>
                    <tbody id="uMw">
                        <tr>
                            <td class="timE">上午</td>
                            <?php  foreach ($showke_time_sw as $t) { ?>
                            <td class="sL"><input class="showke_time" type="checkbox" name="sm_shijian" value="{$t.id}"<?php if (in_array($t['id'], $shouke_times)) { ?>
                              checked
                            <?php } ?> /></td>
                            <?php } ?>
                        </tr>
                        <tr>
                            <td class="timE">下午</td>
                            <?php  foreach ($showke_time_xw as $t) { ?>
                            <td class="sL"><input class="showke_time" type="checkbox" name="sm_shijian" value="{$t.id}"<?php if (in_array($t['id'], $shouke_times)) { ?>
                              checked
                            <?php } ?> /></td>
                            <?php } ?>
                        </tr>
                        <tr>
                            <td class="timE">晚上</td>
                            <?php  foreach ($showke_time_ws as $t) { ?>
                            <td class="sL"><input class="showke_time" type="checkbox" name="sm_shijian" value="{$t.id}"<?php if (in_array($t['id'], $shouke_times)) { ?>
                              checked
                            <?php } ?> /></td>
                            <?php } ?>
                        </tr>
                    </tbody>
                </table>
    </div>
    <div class="layui-form-item">
    <button class="layui-btn" lay-submit="" lay-filter="add">增加</button>
  </form>
  <--jq-->
          <script>
            layui.use(['form','layer','layedit' , 'element'], function(){
                $ = layui.jquery;
              var form = layui.form()
              ,layedit = layui.layedit
              ,element = layui.element()
              ,layer = layui.layer;


              //监听提交
              form.on('submit(add)', function(data){
                //时间
                var sm_shijian = new Array();
                var chenked=$(".showke_time:checked").each(function(){
                   sm_shijian.push($(this).val()); 
                })
                data.field.sm_shijian = sm_shijian;
                //console.log(data);
                //发异步,把数据提交给php
                $.ajax({
                    url: "url",//请求地址
                    type: "post",//请求方式
                    dataType: "json",//返回数据类型
                    data: data.field,//发送的参数
                    })
                    .done(function(response) {
                          if(response.error==0){
                             layer.msg(response.info ,{icon:5});
                          }else{
                            layer.alert(response.info, {icon: 6},function () {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                //关闭当前frame
                                parent.layer.close(index);
                            });
                          }
                      })
                    .fail(function() {
                        alert("ajxs交互失败");
                    })  
                return false;
              });
            });
        </script>

有更好的想法请留言哦


  • 上一条:
    tp5中extend的扩展类引入
    下一条:
    windows+阿里云免费证书实现https访问
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 性能测试工具、HTTP基准测试工具:wrk(0个评论)
    • namesilo域名+香港服务器+acme.sh给网站生成免费ssl证书流程步骤(0个评论)
    • 控制反转IOC设计模式简单的示例代码(0个评论)
    • 来自京东开发者的接口优化的常见方案实战总结(0个评论)
    • 最新访问谷歌Google镜像/学术/搜索_GitHub镜像/下载加速链接2023/2/16持续更新(0个评论)
    • 近期文章
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 在laravel项目中实现密码强度验证功能推荐扩展包:password-strength(0个评论)
    • 在go语言中用filepath.Match()函数以通配符模式匹配字符串示例(0个评论)
    • Laravel Response Classes 响应类使用优化浅析(0个评论)
    • mysql中sql_mode的各模式浅析(0个评论)
    • 百度文心一言今天发布,个人第一批内测体验记录,不好别打我(0个评论)
    • 嘿加密世界让我们谈谈在共识中将中本聪主流化(0个评论)
    • 在go语言中寻找两个切片或数组中的相同元素/共同点/交集并集示例代码(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2016-10
    • 2016-11
    • 2017-07
    • 2017-08
    • 2017-09
    • 2018-01
    • 2018-07
    • 2018-08
    • 2018-09
    • 2018-12
    • 2019-01
    • 2019-02
    • 2019-03
    • 2019-04
    • 2019-05
    • 2019-06
    • 2019-07
    • 2019-08
    • 2019-09
    • 2019-10
    • 2019-11
    • 2019-12
    • 2020-01
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2020-07
    • 2020-08
    • 2020-09
    • 2020-10
    • 2020-11
    • 2021-04
    • 2021-05
    • 2021-06
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-12
    • 2022-01
    • 2022-02
    • 2022-03
    • 2022-04
    • 2022-05
    • 2022-06
    • 2022-07
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客