按星期及每天三个时间段供选择-设计效果图及功能
管理员 发布于 6年前   351
选择存储介质 数组/缓存/数据库 (我这选数据库 因为我已在工作项目中使用)
一星期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> </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>
有更好的想法请留言哦
请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
该博客于2020-12-7日,后端基于go语言的beego框架开发
前端页面使用Bootstrap可视化布局系统自动生成
是我仿的原来我的TP5框架写的博客,比较粗糙,底下是入口
侯体宗的博客
文章标签
友情链接