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

今日分享一点干货。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;

　　　　　　　　　　　　　　　　　　　　　　　　　　... ...

　　　　　　}

　　　　　　　... ...

　　}

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