今日分享一点干货。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("<p style='padding:20px;'>加载失败，<a href='javascript：topic.init();'>请重试！</a></p>");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         //空间用户id12         $uid =  $this->uid ;13         //用户cyuid14         $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             //空间用户id45             $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;

　　　　　　　　　　　　　　　　　　　　　　　　　　... ...

　　　　　　}

　　　　　　　... ...

　　}

　意思就是我按照行循环的时候, 因为第一行跟第五行多了一个<td>的存在，会导致我的下标是从1开始而不是跟其他行一样从0开始。

后来我想不这样做，我加一个独有的class，就有了 var kecbInput = $(".activeStu"); 这句话。这句话的意思是获取所有class="activeStu" 的对象的集合。

至于余下的循环写法如果有看不懂的可以在文章里直接提问，就不细说了。

第二步：写完获取值后，剩下的无非就是传值到后台了，思路是每一个学生有一张属于他自身独有的课程表。还是老方法利用ajax传值。在保存数据的时候，将数据保存成json格式进行存储。

第三步：传值到前台页面并展示，其实这个地方 ,如果有不少同学说, 这个简单着呢，不就是for循环利用js 控制显示嘛，那么就证明你没有掌握php volist 标签的好用之处！

利用volist 可以很轻松的如我贴出来的代码一样将你想要赋的值展现出来。

很多东西其实都在贴出来的代码里了，我表达能力不是很好，或者说我对这些东西理解也没到一定的程度。

本来我是想可以分享一些思路给大家，但是写着写着发现，其实也没什么好说的。不就这样么。但是我还是觉得发出来好些吧，可能有些人需要呢？虽然简单也没花多长时间。但是我相信不停的分享，可能你的感悟就更深一些。

爱程序网

Tags：今日分享一点干货。PHP中课