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

技术  /  管理员 发布于 6年前   716

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.效果图：

 

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>

有更好的想法请留言哦