...
今日分享一点干货。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 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;
... ...
}
... ...
}
意思就是我按照行循环的时候, 因为第一行跟第五行 多了一个