欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

今日分享一点干货。PHP中课程表的实现。,.php课程表

程序员文章站 2022-05-17 20:24:18
...

今日分享一点干货。PHP中课程表的实现。,.php课程表

首先贴代码,代码贴完再细说:

前段HTML:

 1  div id="studentRead" class="reading" style="z-index:10" >
 2                          div class="class-table">
 3                             div class="class-table-tit clearfix">
 4                                 h3 class="fl">班级课程表h3>
 5                                 a class="fr" id ='studentEditKcb' attr="edit" onclick = "editKcb(this);" style="cursor:pointer;">编辑
 6                                 a>
 7                             div>
 8                                 table border="0" cellspacing="0" cellpadding="0" id = "myTable">
 9                                     tr>
10                                         th width="5%">th>
11                                         th width="19%">周一th>
12                                         th width="19%">周二th>
13                                         th width="19%">周三th>
14                                         th width="19%">周四th>
15                                         th width="19%">周五th>
16                                     tr>
17                                     tr id = "focustr">
18                                         td rowspan="4" class="td-bg">br/>td>
19                                         volist name = "dataListStu" id = "val" offset="0" length='1'>
20                                             volist name = "val" id = "value">
21                                             td>
22                                                 input  id = "focusId" readonly="true" maxlength='7' type="text"  value="{$value}" />
23                                             td>
24                                             volist>
25                                         volist>
26                                     tr>
27                                     volist name = "dataListStu" id = "val" offset="1" length='3'>
28                                         tr>
29                                             volist name = "val" id = "value">
30                                             td>
31                                                 input   readonly="true" maxlength='7' type="text"  value="{$value}" />
32                                             td>
33                                             volist>
34                                         tr>
35                                     volist>
36                                     tr>
37                                         td rowspan="4" class="td-bg">br/>td>
38                                         volist name = "dataListStu" id = "val" offset="4" length='1'>
39                                             volist name = "val" id = "value">
40                                             td>
41                                                 input   readonly="true" maxlength='7' type="text"  value="{$value}" />
42                                             td>
43                                             volist>
44                                         volist>
45                                     tr>
46                                     volist name = "dataListStu" id = "val" offset="5" length='3'>
47                                         tr>
48                                             volist name = "val" id = "value">
49                                             td>
50                                                 input   readonly="true" maxlength='7' type="text"  value="{$value}" />
51                                             td>
52                                             volist>
53                                         tr>
54                                     volist>
55                             table>
56                         div>            
57                  div>

CSS:

1 /*课程表*/ 2 .class-table{ 3 background: #f6fafe; 4 border: 1px solid #e9ecee; 5 -webkit-border-radius: 5px; 6 width: 478px; 7 padding: 10px 20px 20px; 8 -moz-border-radius: 5px; 9 border-radius: 5px; 10 } 11 .class-table-tit{ 12 height: 30px; 13 line-height: 30px; 14 } 15 .class-table-tit h3{ 16 color: #666; 17 font-size: 16px; 18 font-weight: bold; 19 } 20 .class-table-tit a{ 21 font-size: 14px; 22 color: #187aff; 23 } 24 .class-table table{ 25 width: 100%; 26 } 27 .class-table table th{ 28 height: 40px; 29 background: #aedf74; 30 text-align: center; 31 border-right: 1px solid #9dc968; 32 } 33 .class-table table th:first-child{ 34 background: #89cc4a; 35 border-right: 0; 36 } 37 .class-table table td{ 38 height: 30px; 39 border: solid #e3eaf1; 40 border-width: 0 1px 1px 0; 41 text-align: center; 42 font-size: 14px; 43 color: #666; 44 } 45 .class-table table td input{ 46 border: 0; 47 height: 20px; 48 line-height: 20px; 49 width: 70%; 50 background: none; 51 text-align: center; 52 color: #666; 53 } 54 .class-table table td input.activeStu{ 55 background: #66a7ff; 56 color: #fff; 57 } 58 .td-bg{ 59 background: #c4ea96; 60 } View Code

JS部分:

1 var flagkcb = true; 2 //控制课程表编辑和完成。 3 function editKcb(obj){ 4 var editHtml = $(obj).attr('attr'); 5 if(editHtml == 'edit'){ 6 $(".class-table table td input").attr('class','activeStu'); 7 $(".class-table input").attr('readonly',false); 8 $("#studentEditKcb").html('完成'); 9 $(".class-table table td input").attr('class','activeStu'); 10 $("#focustr td:nth-child(2) input").focus(); 11 $(obj).attr('attr','save'); 12 }else{ 13 if(flagkcb){ 14 reloadKCB(); 15 $(obj).attr('attr','edit'); 16 }else{ 17 alert('数据保存中,请勿重复提交!'); 18 } 19 } 20 } 21 22 23 24 25 //获取页面表格内的数据 26 function getTableValue(){ 27 var kecbInput = $(".activeStu"); 28 var i = 0; 29 var j= 0; 30 var data = []; 31 var data2 = []; 32 $.each(kecbInput,function(k,v){ 33 data2[j] = v.value; 34 j++; 35 if((k+1)%5==0){ 36 j = 0; 37 data[i] = data2; 38 data2 = []; 39 i++; 40 } 41 }); 42 return data; 43 } 44 45 //课程表 46 function reloadKCB(){ 47 $("#records").hide(); 48 $("#classba").hide(); 49 $("#classhare").hide(); 50 $("#homework").hide(); 51 $('#studentRead').show(); 52 var data = getTableValue(); 53 //根据ajax加载,若加载后数据为空,则证明该学生没有编辑过课程表,直接显示 54 $.ajax({ 55 type:"POST", 56 url: U('public/Index/savekcb'), 57 data:{"data":data}, 58 dataType:"json", 59 success:function(response){ 60 flagkcb = true; 61 $(".class-table table td input").removeAttr('class','activeStu'); 62 $(".class-table input").attr('readonly',true); 63 $("#studentEditKcb").html('编辑'); 64 }, 65 error:function(msg){ 66 flagkcb = true; 67 alert('保存失败请重试'); 68 // $("#studentRead").show(); 69 // $("#studentRead").html("").html("

加载失败,请重试!

");
70 } 71 }); 72 73 // 74 // } 75 } View Code

后端部分:

1 /** 2 * 学生课程表个人编辑保存 3 */ 4 public function savekcb(){ 5 $saveResult = array('status'=>200,'msg'=>'保存成功'); 6 //拿到的是一个二维数组 7 $data = $_REQUEST['data']; 8 $user=$GLOBALS['ts']['cyuserdata']; 9 //课程表数据转成json格式保存 10 $saveArray = json_encode($data); 11 //空间用户id 12 $uid = $this->uid ; 13 //用户cyuid 14 $saveData = array(); 15 $saveData['cyuid'] = $user['user']['cyuid']; 16 $saveData['uid'] = $uid; 17 $saveData['kcb'] = $saveArray; 18 //创建时间 19 $saveData['createtime'] = date('Y-m-d H:i:s'); 20 $saveData['updatetime'] = date('Y-m-d H:i:s'); 21 22 $isExit = D('StudentKcb')->where("`uid`=$uid")->find(); 23 if($isExit){ 24 unset($saveData['createtime']); 25 $result = D('StudentKcb')->where("`uid`=$uid")->save($saveData); 26 }else{ 27 $result = D('StudentKcb')->add($saveData); 28 } 29 if(!$result){ 30 $saveResult = array('status'=>400,'msg'=>'保存失败'); 31 }else{ 32 $stuKcb = json_decode($result['kcb'],true); 33 S($this->uid."_student_kcb",$stuKcb,60*5); 34 } 35 exit(json_encode($saveResult)); 36 } 37 38 /** 39 * 个人学生空间页面课程表初始化 40 */ 41 private function initkcb(){ 42 $result = S($this->uid."_student_kcb"); 43 if(!$result){ 44 //空间用户id 45 $uid = $this->uid ; 46 $result = D('StudentKcb')->where("`uid`=$uid")->find(); 47 $result = json_decode($result['kcb'],true); 48 if(!$result){ 49 $result = array( 50 0=>array('','','','',''), 51 1=>array('','','','',''), 52 2=>array('','','','',''), 53 3=>array('','','','',''), 54 4=>array('','','','',''), 55 5=>array('','','','',''), 56 6=>array('','','','',''), 57 7=>array('','','','',''), 58 ); 59 } 60 S($this->uid."_student_kcb",$result,60*5); 61 } 62 63 $this->assign('dataListStu',$result); 64 } 65 66 } View Code

开始细说:先来一张效果图吧。编辑前:

     编辑中(点右上角编辑后):

加了一些定位跟背景色的变化。让用户有更好体验,

  第一步: 在接这个需求的时候,首先我在想怎么去获取表格内的数据,我首先想到的是 利用for循环嵌套,而后加判断,把数据往定义好的数组里添加,但是后来一想那样的话会导致

数据正确没错,但是存的数据有问题我打个比方 data[]={

                         data[1]={

                              data[1][1] = 0;

                              ... ...

      }

                   data[2]={       data[2][0]= 1;

                          ... ...

      }

       ... ...

  }

 意思就是我按照行循环的时候, 因为第一行跟第五行 多了一个