1319720422 WordPressのテーブル作成するプラグイン WP-Table Reloadedについて教えてください。


作表するときに、日付をカレンダーから持って来たり、プルダウンやラジオボタン等を
このWP-Table Reloadedの中で使う事は可能でしょうか?

テーブルの表が数多くあるため、ダッシュボードのツール類にまとめて管理できる事が
とても便利だと思っていますので、是非このプラグインで実現できると助かります。
よろしくお願いします。

回答の条件
  • 1人20回まで
  • 13歳以上
  • 登録:2011/10/27 22:00:24
  • 終了:2011/10/31 13:47:52

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512011/10/31 11:50:15

1列目(授業のコース)、2列目(受講時間数)、3列目(曜日)、4列目(授業時間)、5列目(受講開始日)、6列目(受講終了日)としています。

※回答のコードでは、曜日と時間、受講開始日と受講終了日という具合に、別の列にしてあります。(曜日・時間を同じ列にしたい場合は、選択肢を適宜追加変更してください。)

※受講期間に関しては、実装の関係で別の列にしたので、同一の列に変更可能かどうかは分かりません。(カレンダーから選択する方法ではなく、他の列と同様プルダウンの選択肢から選択して入力する場合は可能です。)

※その他の選択肢の変更・追加についても適宜行ってください。


1.必要な物を準備します。


・jQuery UIのDatepicker

http://jqueryui.com/download

※「UI Core」のすべての項目と「Widgets」の「Datepicker」にチェックを入れた状態にして、バージョン1.8.16をダウンロードします。(Themeは「Smoothness」がWPの管理画面に合うかもしれません。)



2.解凍後、次のファイルをコピーします。


・「development-bundle/demos/datepicker/images/calendar.gif」を「wp-admin/images」内にファイルのみ(※アイコンクリックでカレンダーを表示させたい場合のみコピー)


・「development-bundle/demos/demos.css」を「wp-content/plugins/wp-table-reloaded/admin」内にファイルのみ(※カレンダーの表示を小さくしたい場合のみコピー)


・「development-bundle/ui/minified/jquery.ui.datepicker.min.js」を「wp-content/plugins/wp-table-reloaded/admin」内にファイルのみ


・「development-bundle/themes/smoothness/jquery-ui-1.8.16.custom.css」を「wp-content/plugins/wp-table-reloaded/admin」内にファイルのみ


・「development-bundle/themes/smoothness/images」を「wp-content/plugins/wp-table-reloaded/admin」内にフォルダごと



3.「wp-content/plugins/wp-table-reloaded/controllers/controller-admin.php」を編集します。(1714行目付近)

    function add_manage_page_js() {
        $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '.dev' : '';
        $jsfile = "admin/admin-script{$suffix}.js";
        $js_url = plugins_url( $jsfile, WP_TABLE_RELOADED__FILE__ );
        // 次の2行を追加
        $jsfile2 = "admin/jquery.ui.datepicker.min.js";
        $js_url2 = plugins_url( $jsfile2, WP_TABLE_RELOADED__FILE__ );
        wp_enqueue_script( 'wp-table-reloaded-admin-js', $js_url, array( 'jquery', 'thickbox' ), $this->options['installed_version'], true );
        // 次の1行を追加
        wp_enqueue_script( 'jquery-ui-datepicker-js', $js_url2, array( 'jquery', 'jquery-ui-core', 'jquery-ui-widget', 'wp-table-reloaded-admin-js' ), '1.8.16' );



4.「wp-content/plugins/wp-table-reloaded/controllers/controller-admin.php」を編集します。(1766行目付近)

    function add_manage_page_css() {
        $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '.dev' : '';
        $cssfile = "admin/admin-style{$suffix}.css";
        // 次の2行を追加
        $cssfile2 = "admin/jquery-ui-1.8.16.custom.css";
        $cssfile3 = "admin/demos.css"; // カレンダーの表示を小さくしたい場合のみ
        wp_enqueue_style( 'wp-table-reloaded-admin-css', plugins_url( $cssfile, WP_TABLE_RELOADED__FILE__ ), array(), $this->options['installed_version'] );
        // 次の2行を追加
        wp_enqueue_style( 'jquery-ui-custom', plugins_url( $cssfile2, WP_TABLE_RELOADED__FILE__ ), array(), '1.8.16' );
        wp_enqueue_style( 'jquery-ui-demo', plugins_url( $cssfile3, WP_TABLE_RELOADED__FILE__ ), array(), '1.8.16' ); // カレンダーの表示を小さくしたい場合のみ



5.「wp-content/plugins/wp-table-reloaded/views/view-edit.php」を編集します。


・1箇所目(1行目)

<script type="text/javascript">
	jQuery(function($) {
		// .edit_col_4 および.edit_col_5は列に付与されたクラス名です。項目の列を変更した場合は、ここも変更してください。
		var dates = $( ".edit_col_4 > input:text, .edit_col_5 > input:text" ).datepicker({
			minDate: +1, // 当日選択不可にする場合
			maxDate: '+1y', // 1年後以降を選択不可にする場合
			changeMonth: true,
			dateFormat: "yy/mm/dd", // 日付のフォーマット「2011/11/01」
			showOn: "both", // カレンダー表示のトリガーをアイコンと入力欄フォーカスの両方にする場合
			buttonImage: "images/calendar.gif", // カレンダーアイコンのパス
			buttonImageOnly: true, // ボタンにしないでカレンダーアイコンのみ表示する場合
			buttonText: '日付選択' // カレンダーアイコンにマウスオーバーした時のテキスト
		});
	});
</script>


http://jqueryui.com/demos/datepicker/


・2箇所目(90行目付近)

                        foreach ( $table_row as $col_idx => $cell_content ) {
                            $cell_content = $this->helper->safe_output( $cell_content );
                            $cell_name = "table[data][{$row_idx}][{$col_idx}]";
                            $col_hidden = ( isset( $table['visibility']['columns'][$col_idx] ) && $table['visibility']['columns'][$col_idx] ) ? ' column-hidden' : '';
                            // 以下をコメントアウト(※上記は元からある記述です)
                            // echo "\t<td class=\"edit_col_{$col_idx}{$col_hidden}\"><textarea rows=\"1\" cols=\"20\" name=\"{$cell_name}\">{$cell_content}</textarea></td>\n";
                            // 以降追加します。
                            $selected = array();
                            if($row_idx == 0) {
                                echo "\t<td class=\"edit_col_{$col_idx}{$col_hidden}\"><textarea rows=\"1\" cols=\"8\" name=\"{$cell_name}\">{$cell_content}</textarea></td>\n"; // 項目名の行(編集可能なテキストエリアにしましたが、HTMLタグで固定テキストの記述にしても大丈夫です。)
                            } elseif($col_idx == 0) {
                                // 1列目(授業のコース)
                                if($cell_content == "4週間コース") { $selected[0] = " selected=\"selected\"" ;} elseif($cell_content == "1ヶ月コース") { $selected[1] = " selected=\"selected\"";} elseif($cell_content == "4ヶ月コース") { $selected[2] = " selected=\"selected\"";} elseif($cell_content == "土曜集中コース") { $selected[3] = " selected=\"selected\"";};
                                echo "\t<td class=\"edit_col_{$col_idx}{$col_hidden}\"><select name=\"{$cell_name}\">\n<option value=\"未選択\" selected=\"selected\">未選択</option>\n<option value=\"4週間コース\"$selected[0]>4週間コース</option>\n<option value=\"1ヶ月コース\"$selected[1]>1ヶ月コース</option>\n<option value=\"4ヶ月コース\"$selected[2]>4ヶ月コース</option>\n<option value=\"土曜集中コース\"$selected[3]>土曜集中コース</option>\n</select></td>\n";
                            } elseif($col_idx == 1) {
                                // 2列目(受講時間数)
                                if($cell_content == "1時間") { $selected[0] = " selected=\"selected\"" ;} elseif($cell_content == "2時間") { $selected[1] = " selected=\"selected\"";} elseif($cell_content == "3時間") { $selected[2] = " selected=\"selected\"";} elseif($cell_content == "4時間") { $selected[3] = " selected=\"selected\"";};
                                echo "\t<td class=\"edit_col_{$col_idx}{$col_hidden}\"><select name=\"{$cell_name}\">\n<option value=\"未選択\" selected=\"selected\">未選択</option>\n<option value=\"1時間\"$selected[0]>1時間</option>\n<option value=\"2時間\"$selected[1]>2時間</option>\n<option value=\"3時間\"$selected[2]>3時間</option>\n<option value=\"4時間\"$selected[3]>4時間</option>\n</select></td>\n";
                            } elseif($col_idx == 2) {
                                // 3列目(曜日)
                                if($cell_content == "月") { $selected[0] = " selected=\"selected\"" ;} elseif($cell_content == "火") { $selected[1] = " selected=\"selected\"";} elseif($cell_content == "水") { $selected[2] = " selected=\"selected\"";} elseif($cell_content == "木") { $selected[3] = " selected=\"selected\"";} elseif($cell_content == "金") { $selected[4] = " selected=\"selected\"";} elseif($cell_content == "土") { $selected[5] = " selected=\"selected\"";} elseif($cell_content == "日") { $selected[6] = " selected=\"selected\"";};
                                echo "\t<td class=\"edit_col_{$col_idx}{$col_hidden}\"><input type=\"text\" size=\"6\" value=\"{$cell_content}\"><select name=\"{$cell_name}\">\n<option value=\"未選択\" selected=\"selected\">未選択</option>\n<option value=\"月\"$selected[0]>月</option>\n<option value=\"火\"$selected[1]>火</option>\n<option value=\"水\"$selected[2]>水</option>\n<option value=\"木\"$selected[3]>木</option>\n<option value=\"金\"$selected[4]>金</option>\n<option value=\"土\"$selected[5]>土</option>\n<option value=\"日\"$selected[6]>日</option>\n</select></td>\n";
                            } elseif($col_idx == 3) {
                                // 4列目(授業の時間)
                                if($cell_content == "10:45~12:00") { $selected[0] = " selected=\"selected\"";} elseif($cell_content == "12:30~13:45") { $selected[1] = " selected=\"selected\"" ;} elseif($cell_content == "14:00~15:15") { $selected[2] = " selected=\"selected\"";} elseif($cell_content == "15:30~16:45") { $selected[3] = " selected=\"selected\"";} elseif($cell_content == "17:00~18:15") { $selected[4] = " selected=\"selected\"";} elseif($cell_content == "18:30~19:45") { $selected[5] = " selected=\"selected\"";} elseif($cell_content == "20:00~21:15") { $selected[6] = " selected=\"selected\"";};
                                echo "\t<td class=\"edit_col_{$col_idx}{$col_hidden}\"><input type=\"text\" size=\"6\" value=\"{$cell_content}\"><select name=\"{$cell_name}\">\n<option value=\"未選択\" selected=\"selected\">未選択</option>\n<option value=\"10:45~12:00\"$selected[0]>10:45~12:00</option>\n<option value=\"12:30~13:45\"$selected[1]>12:30~13:45</option>\n<option value=\"14:00~15:15\"$selected[2]>14:00~15:15</option>\n<option value=\"15:30~16:45\"$selected[3]>15:30~16:45</option>\n<option value=\"17:00~18:15\"$selected[4]>17:00~18:15</option>\n<option value=\"18:30~19:45\"$selected[5]>18:30~19:45</option>\n<option value=\"20:00~21:15\"$selected[6]>20:00~21:15</option>\n</select></td>\n";
                            } elseif($col_idx == 4) {
                                // 5列目(受講開始日)
                                echo "\t<td class=\"edit_col_{$col_idx}{$col_hidden}\"><input type=\"text\" id=\"from{$row_idx}\" name=\"{$cell_name}\" size=\"12\" value=\"{$cell_content}\"></td>\n";
                            } elseif($col_idx == 5) {
                                // 6列目(受講終了日)
                                echo "\t<td class=\"edit_col_{$col_idx}{$col_hidden}\"><input type=\"text\" id=\"to{$row_idx}\" name=\"{$cell_name}\" size=\"12\" value=\"{$cell_content}\"></td>\n";
                            } else {
                                // 7列目以降はデフォルトのテキストエリアを出力します。(※使用しないと思いますが一応・・・)
                                echo "\t<td class=\"edit_col_{$col_idx}{$col_hidden}\"><textarea rows=\"1\" cols=\"20\" name=\"{$cell_name}\">{$cell_content}</textarea></td>\n";
                            }
                        // 以降は元からある記述です。
                        }
                        echo "\t<th scope=\"row\">{$output_idx}</th>\n";
                    echo "</tr>\n";
                }



※「$col_idx」で列を判別して、分岐処理による出力をしています。

※保存された値「$cell_content」と選択肢の値を比較して、一致する値に「$selected=" selected=selected"」を付与して、選択状態で表示されるようにしています。

※コード内でも簡単に説明していますので、確認しながら編集してください。

id:Becky_moni

上記のコードを記入して設置させていただきました。

テーブルの書き方でひとつづつ ずれてしまいましたが、

やり方がなんとかつかめましたのでとても参考にさせていただきました。

有り難うございました。

2011/10/31 13:47:32
  • id:rouge_2008
    各列の項目と選択肢を固定しても大丈夫なのでしたら可能です。
    ※すべて同じ項目と選択肢で固定されますので、表ごとに表示する項目や選択肢を変更する事はできません。
    (専門の人に依頼すれば、表ごとに違う項目や選択肢が表示されるようにする事も可能だと思いますが・・・)
  • id:Becky_moni
    rouge_2008さん 回答ありがとうございます。
    選択技は各々固定です。また、表組みは全部で20以上は作る予定でいます。

    たぶんカスタムフィールドを入れ込むのだと思うのですが。
    プラグイン内なのでどのようにやっていいものか検討がついてません。
    お手数ですが、やり方をご教授いただけると助かります。
  • id:rouge_2008
    プラグインのphpファイルを直接カスタマイズします。
    出力するHTMLタグを直接記述しますので、カスタムフィールドは使用しません。
    各列の選択肢は画像を見て適当に決めてありますので、変更・追加など必要に応じて適宜修正して使用してください。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません