今日分享一点干货。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 CodeJS部分：
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 //空间用户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;
... ...
}
... ...
}
意思就是我按照行循环的时候, 因为第一行跟第五行 多了一个
后来我想不这样做，我加一个独有的class，就有了 var kecbInput = $(".activeStu"); 这句话。 这句话的意思是获取所有class="activeStu" 的对象的集合。
至于余下的循环写法 如果有看不懂的可以在文章里直接提问，就不细说了。
第二步：写完获取值后，剩下的无非就是传值到后台了，思路是每一个学生有一张属于他自身独有的课程表。还是老方法 利用ajax传值。 在保存数据的时候，将数据保存成json格式进行存 储。
第三步：传值到前台页面并展示， 其实这个地方 ,如果有不少同学说, 这个简单着呢，不就是for循环 利用js 控制显示嘛， 那么就证明你没有掌握php volist 标签的好用之处！
利用volist 可以很轻松的如我贴出来的代码一样 将你想要赋的值 展现出来。
很多东西其实都在贴出来的代码里了，我表达能力不是很好，或者说我对这些东西理解也没到一定的程度。
本来我是想 可以分享一些思路给大家， 但是写着写着发现 ，其实也没什么好说的。 不就这样么。 但是我还是觉得发出来好些吧， 可能有些人需要呢？虽然简单也没花多长时间。但是我相 信不停的分享，可能你的感悟就更深一些。
09-19 04:03