WordPressのテーブル作成するプラグイン WP-Table Reloadedについて教えてください。
作表するときに、日付をカレンダーから持って来たり、プルダウンやラジオボタン等を
このWP-Table Reloadedの中で使う事は可能でしょうか？
テーブルの表が数多くあるため、ダッシュボードのツール類にまとめて管理できる事が
とても便利だと思っていますので、是非このプラグインで実現できると助かります。
よろしくお願いします。
No.1
595
351
1列目(授業のコース)、2列目(受講時間数)、3列目(曜日)、4列目(授業時間)、5列目(受講開始日)、6列目(受講終了日)としています。
※回答のコードでは、曜日と時間、受講開始日と受講終了日という具合に、別の列にしてあります。(曜日・時間を同じ列にしたい場合は、選択肢を適宜追加変更してください。)
※受講期間に関しては、実装の関係で別の列にしたので、同一の列に変更可能かどうかは分かりません。(カレンダーから選択する方法ではなく、他の列と同様プルダウンの選択肢から選択して入力する場合は可能です。)
※その他の選択肢の変更・追加についても適宜行ってください。
1.必要な物を準備します。
・jQuery UIのDatepicker
※「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行目付近)
16
2
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"」を付与して、選択状態で表示されるようにしています。
※コード内でも簡単に説明していますので、確認しながら編集してください。
rouge_2008
2011/10/31 07:19:39
2
ベキ
上記のコードを記入して設置させていただきました。
テーブルの書き方でひとつづつ ずれてしまいましたが、
やり方がなんとかつかめましたのでとても参考にさせていただきました。
有り難うございました。
2011/10/31 13:47:32