今日分享一點干貨。PHP中課程表的實現。，.php課程表

今日分享一點干貨。PHP中課程表的實現。，.php課程表

首先貼代碼，代碼貼完再細說：

前段HTML：

 1  <div id="studentRead" class="reading"  >
 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);" >編輯
 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 //空間用戶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;

　　　　　　　　　　　　　　　　　　　　　　　　　　... ...

　　　　　　}

　　　　　　　... ...

　　}

　意思就是我按照行循環的時候, 因為第一行跟第五行 多了一個<td>的存在， 會導致我的下標是從1開始 而不是跟其他行一樣從0開始。

  後來我想不這樣做，我加一個獨有的class，就有了   var kecbInput = $(".activeStu"); 這句話。 這句話的意思是獲取所有class="activeStu" 的對象的集合。

  至於余下的循環寫法 如果有看不懂的可以在文章裡直接提問，就不細說了。

 

  第二步：寫完獲取值後，剩下的無非就是傳值到後台了，思路是每一個學生有一張屬於他自身獨有的課程表。還是老方法 利用ajax傳值。 在保存數據的時候，將數據保存成json格式進行存   儲。

  第三步：傳值到前台頁面並展示， 其實這個地方 ,如果有不少同學說, 這個簡單著呢，不就是for循環 利用js 控制顯示嘛， 那麼就證明你沒有掌握php volist 標簽的好用之處！

  利用volist  可以很輕松的如我貼出來的代碼一樣  將你想要賦的值 展現出來。

  很多東西其實都在貼出來的代碼裡了，我表達能力不是很好，或者說我對這些東西理解也沒到一定的程度。

  本來我是想 可以分享一些思路給大家， 但是寫著寫著發現 ，其實也沒什麼好說的。 不就這樣麼。 但是我還是覺得發出來好些吧， 可能有些人需要呢？雖然簡單也沒花多長時間。但是我相 信不停的分享，可能你的感悟就更深一些。