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

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

首先贴代码，代码贴完再细说：

前段HTML：

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

로그인 후 복사

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;

　　　　　　　　　　　　　　　　　　　　　　　　　　... ...

　　　　　　}