今日分享一点干货。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：
![今日分享一点干货。PHP中课程表的实现。，.php课程表_PHP教程]()
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部分：
![今日分享一点干货。PHP中课程表的实现。，.php课程表_PHP教程]()
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
后端部分：
![今日分享一点干货。PHP中课程表的实现。，.php课程表_PHP教程]()
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;
... ...
}
... ...
}
意思就是我按照行循环的时候, 因为第一行跟第五行 多了一个
的存在， 会导致我的下标是从1开始 而不是跟其他行一样从0开始。
后来我想不这样做，我加一个独有的class，就有了 var kecbInput = $(".activeStu"); 这句话。 这句话的意思是获取所有class="activeStu" 的对象的集合。
至于余下的循环写法 如果有看不懂的可以在文章里直接提问，就不细说了。
第二步：写完获取值后，剩下的无非就是传值到后台了，思路是每一个学生有一张属于他自身独有的课程表。还是老方法 利用ajax传值。 在保存数据的时候，将数据保存成json格式进行存 储。
第三步：传值到前台页面并展示， 其实这个地方 ,如果有不少同学说, 这个简单着呢，不就是for循环 利用js 控制显示嘛， 那么就证明你没有掌握php volist 标签的好用之处！
利用volist 可以很轻松的如我贴出来的代码一样 将你想要赋的值 展现出来。
很多东西其实都在贴出来的代码里了，我表达能力不是很好，或者说我对这些东西理解也没到一定的程度。
本来我是想 可以分享一些思路给大家， 但是写着写着发现 ，其实也没什么好说的。 不就这样么。 但是我还是觉得发出来好些吧， 可能有些人需要呢？虽然简单也没花多长时间。但是我相 信不停的分享，可能你的感悟就更深一些。
http://www.bkjia.com/PHPjc/1102847.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1102847.htmlTechArticle今日分享一点干货。PHP中课程表的实现。，.php课程表 首先贴代码，代码贴完再细说： 前段HTML： 1 div id ="studentRead" class ="reading" style ="z-i...
|
收藏
0
1
123
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
