今日は役立つ情報をいくつか共有させてください。 PHPによるカリキュラムの実施。 ,.phpカリキュラム

今日は役立つ情報をいくつか共有させてください。 PHPによるカリキュラムの実施。 ,.phpカリキュラム_PHPチュートリアル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-07-12 08:58:40

オリジナル

3208 人が閲覧しました

今日は役立つ情報を共有します。 PHPによるカリキュラムの実施。 , .php コーススケジュール

まずコードを投稿し、コードが投稿された後に詳細を説明します:

フロントHTML:

リーリー

CSS:

今日は役立つ情報をいくつか共有させてください。 PHPによるカリキュラムの実施。 ,.phpカリキュラム_PHPチュートリアル

1 /*コーススケジュール*/ 2 .クラステーブル{ 3 背景: #f6fafe; 4 ボーダー: 1px ソリッド #e9ecee; 5 -webkit-border-radius: 5px; 6 幅: 478px; 7 パディング: 10px 20px 20px; 8 -moz-border-radius: 5px; 9 境界半径: 5px; 10 } 11 .クラステーブルシジュウカラ{ 12 高さ: 30px; 13 行の高さ: 30px; 14 } 15 .class-table-tit h3{ 16 カラー: #666; 17 フォントサイズ: 16px; 18 font-weight: 太字; 19 } 20 .class-table-tit a{ 21 フォントサイズ: 14px; 22 カラー: #187aff; 23 } 24 .class-table テーブル{ 25 幅: 100%; 26 } 27 .class-table テーブル th{ 28 高さ: 40px; 29 背景: #aedf74; 30 text-align: center; 31 ボーダー右: 1px ソリッド #9dc968; 32 } 33 .class-table テーブル th:first-child{ 34 背景: #89cc4a; 35 境界線右: 0; 36 } 37 .class-table テーブル td{ 38 高さ: 30px; 39 ボーダー:実線 #e3eaf1; 40 ボーダー幅: 0 1px 1px 0; 41 text-align: center; 42 フォントサイズ: 14px; 43 カラー: #666; 44 } 45 .class-table テーブル td 入力{ 46 ボーダー: 0; 47 高さ: 20px; 48 行の高さ: 20px; 49 幅: 70%; 50 背景:なし; 51 text-align: center; 52 カラー: #666; 53 } 54 .class-table table td input.activeStu{ 55 背景: #66a7ff; 56 カラー: #fff; 57 } 58 .td-bg{ 59 背景: #c4ea96; 60 } コードを表示

JS 部分:

1 var flagkcb = true; 2 // コーススケジュールの編集と完了を管理します。 3 関数 editKcb(obj){ 4 var editHtml = $(obj).attr('attr'); 5 if(editHtml == '編集'){ 6 $(".class-table table td input").attr('class','activeStu'); 7 $(".class-table input").attr('readonly',false); 8 $("#studentEditKcb").html('Complete'); 9 $(".class-table table td input").attr('class','activeStu'); 10 $("#focustr td:nth-child(2) input").focus(); 11 $(obj).attr('attr','save'); 12 }他{ 13 if(flagkcb){ 14 reloadKCB(); 15 $(obj).attr('attr','edit'); 16 }他{ 17alert('データは保存中です。再送信しないでください!'); 18 } 19 } 20 } 21 22 23 24 25 //ページ上のテーブルのデータを取得します 26 関数 getTableValue(){ 27 var kecbInput = $(".activeStu"); 28 var i = 0; 29 var j= 0; 30 var データ = []; 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データ[i] =データ2; 38データ2 = []; 39 i++; 40 } 41 }); 42 データを返す; 43 } 44 45 //コーススケジュール 46 関数 reloadKCB(){ 47 $("#レコード").hide(); 48 $("#classba").hide(); 49 $("#classshare").hide(); 50 $("#宿題").hide(); 51 $('#studentRead').show(); 52 var データ = getTableValue(); 53 // ajaxに従ってロードします。ロード後にデータが空の場合、学生がコーススケジュールを編集していないことが証明され、直接表示されます 54 $.ajax({ 55 タイプ:「POST」、 56 URL: U('public/Index/savekcb'), 57データ:{"データ":データ}、 58 データ型: "json"、 59成功:関数(応答){ 60 flagkcb = true; 61 $(".class-table table td input").removeAttr('class','activeStu'); 62 $(".class-table input").attr('readonly',true); 63 $("#studentEditKcb").html('編集'); 64 }、 65エラー:関数(msg){ 66 flagkcb = true; 67alert('保存に失敗しました。もう一度お試しください'); 68 // $("#studentRead").show(); 69 // $("#studentRead").html("").html("

読み込みに失敗しました。もう一度お試しください。

"); 70 } 71 }); 72 73 // 74 // } 75 } コードを表示

バックエンド部分:

1 /** 2 * 生徒のカリキュラムの個人的な編集と保存 3 */ 4 public function savekcb(){ 5 $saveResult = array('status'=>200,'msg'=>'正常に保存されました'); 6 // 得られたのは 2 次元配列です 7 $data = $_REQUEST['データ']; 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 }他{ 27 $result = D('StudentKcb')->add($saveData); 28 } 29 if(!$結果){ 30 $saveResult = array('status'=>400,'msg'=>'保存に失敗しました'); 31 }他{ 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 プライベート関数 initkcb(){ 42 $result = S($this->uid."_student_kcb"); 43 if(!$結果){ 44 //スペースユーザーID 45 $uid = $this->uid ; 46 $result = D('StudentKcb')->where("`uid`=$uid")->find(); 47 $result = json_decode($result['kcb'],true); 48 if(!$結果){ 49 $result = 配列( 50 0=>配列('','','','',''), 51 1=>配列('','','','',''), 52 2=>配列('','','','',''), 53 3=>配列('','','','',''), 54 4=>配列('','','','',''), 55 5=>配列('','','','',''), 56 6=>配列('','','','',''), 57 7=>配列('','','','',''), 58 ); 59 } 60 S($this->uid."_student_kcb",$result,60*5); 61 } 62 63 $this->assign('dataListStu',$result); 64 } 65 66 } コードを表示

詳細から始めましょう: まずレンダリングを見てみましょう。編集前:

編集（編集するには右上隅をクリック）:

位置と背景色の変更を追加しました。ユーザーのエクスペリエンスを向上させましょう

ステップ 1: このリクエストを受け取ったとき、私はまずテーブル内のデータを取得する方法を考えました。最初に考えたのは、ネストされた for ループを使用し、その後データをテーブルに移動するための判定を追加することでした。定義された配列を追加しましたが、その後どうなるかを考えました

データは正しいですが、保存されたデータに問題があります。例を示します: data[]={

data[1]={

data[1][1] = 0;

… ...

}

data[2]={ data[2][0]= 1;

… ...

}

… ...

}

これは、行ごとにループすると、最初と 5 行目に余分ながあるため、添字は他の行のように 0 から始まるのではなく、1 から始まることを意味します。

その後、これを行わないことにし、独自のクラスを追加し、var kecbInput = $(".activeStu"); という文を取得しました。この文は、class="activeStu" を持つすべてのオブジェクトのコレクションを取得することを意味します。

ループの残りの書き方については、分からない場合は記事内で直接質問してください。詳しくは説明しません。

2 番目のステップ : 値を作成して取得した後は、その値をバックグラウンドに渡すだけです。これは、各学生が独自のコーススケジュールを持っているということです。これは、依然として ajax を使用して値を渡す古い方法です。データを保存する際は、json形式で保存してください。

3 番目のステップ : フロントページに値を渡し、それを表示します。実際、多くの生徒が、これは単純で、表示を制御するために js を使用する for ループに過ぎないと言うなら、それは証明です。 php volist ラベルの有用性をマスターしていない!

volistを使用すると、投稿したコードのように割り当てたい値を簡単に表示できます。

実際に投稿したコードには私の表現能力が低い、もしくは理解できていない部分が多々あります。

もともと、いくつかのアイデアを皆さんと共有したかったのですが、書いて発見した後、実際には言うことが何もありません。それでおしまい。でも、それでも必要な人もいるかもしれないので、投稿したほうがいいと思います。簡単な作業ではありましたが、それほど時間はかかりませんでした。しかし、共有し続ければ、より理解が深まるのではないかと思います。