teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

8

リンク

2018/03/14 04:50

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -199,6 +199,6 @@
199
199
  - jsonで返しているので、jsonで受け取るようにする
200
200
   evalJSONなくても[$.postの引数でjson](http://js.studio-kingdom.com/jquery/ajax/post)を指定すれば取れます。
201
201
  - jQueryは削られた機能の関係からこのバージョン(1.4.3)を利用する
202
-  このスクロールプラグインで利用している[msie指定が1.9から使えなくなった](jquery msie)
202
+  このスクロールプラグインで利用している[msie指定が1.9から使えなくなった](https://www.google.co.jp/search?q=jquery+msie&oq=jquery+msie&aqs=chrome.0.69i59j0l5.6927j0j4&sourceid=chrome&ie=UTF-8)
203
203
  - $.postは非同期で実行しているためHTML構築時ではテーブルは存在しない。
204
204
   存在しないタイミングでプラグインを呼び出しては効果がないので、テーブルがhtml上に現れた後にプラグインをそのテーブルに対して行う

7

ミニマムサンプルコード

2018/03/14 04:50

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -115,4 +115,90 @@
115
115
 
116
116
  前回の回答で他の方が「もつれた紐をほどくよりも最初からもつれないように端から巻いた方が絶対早い」「直すよりゼロから作り直したほうが早そう」と言ったコメントをいただいていますが、まさにそれです。
117
117
 
118
- ちょこちょこ目の前のエラーを直すのではなく、必要な機能だけを単体でしっかり作って確認ができてからやっていった方が確実ですし、本質的なところから理解することができます。
118
+ ちょこちょこ目の前のエラーを直すのではなく、必要な機能だけを単体でしっかり作って確認ができてからやっていった方が確実ですし、本質的なところから理解することができます。
119
+
120
+ # ミニマムサンプルコード
121
+
122
+ 本来、最初に作るべきは下記のようなミニマム構成のコードです。
123
+ おそらくある程度作ったものに対して後からこのプラグインを入れようとしたのもあり、
124
+ 元々あったコードもあるかとは思いますが、必ず最小構成で、何の干渉もない状態のもので試した後に、
125
+ 本来のコードに埋め込むようにしていくのが、何よりの近道です。
126
+
127
+ ※動作確認はしてあります。が幅や見栄えなどは別途調整が必要です。
128
+ ```html
129
+ <!DOCTYPE html>
130
+ <html>
131
+ <head>
132
+ <meta charset="UTF-8">
133
+ <title>test(json→tbodyscroll)</title>
134
+ </head>
135
+ <body>
136
+ <button type="button">生成</button>
137
+ <div id="tbldata"></div>
138
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
139
+ <script src="./js/jquery.tbodyscroll.js"></script>
140
+ <script>
141
+ $(function() {
142
+ $("button").click(function(){
143
+ //リスト表示
144
+ $.post(
145
+ "./m.php"
146
+ , function(data) {
147
+ $('[id=tbldata]').html(data.text);
148
+ $("#tbl_list").tbodyScroll({thead_height:"30px",tbody_height:"100px",head_bgcolor: "transparent",foot_bgcolor: "transparent"});
149
+ },
150
+ "json"
151
+ );
152
+ });
153
+ });
154
+ </script>
155
+ </body>
156
+ </html>
157
+ ```
158
+ m.php
159
+ ```php
160
+ <?php
161
+
162
+ $strHTML = <<<EOF
163
+ <table id="tbl_list">
164
+ <thead>
165
+ <tr>
166
+ <th><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th>
167
+ <th>備品<br>タイプ</th>
168
+ <th>備品名</th>
169
+ </tr>
170
+ </thead>
171
+ <tbody>
172
+ EOF;
173
+
174
+ for($i=1;$i<=100;$i++){
175
+ $strHTML .= <<<EOF
176
+ <tr>
177
+ <td>ステータス{$i}</td>
178
+ <td>No.{$i}</td>
179
+ <td>備品名{$i}</td>
180
+ </tr>
181
+ EOF;
182
+ }
183
+
184
+ $strHTML .= <<<EOF
185
+ </tbody>
186
+ </table>
187
+ EOF;
188
+ $output = array (
189
+ 'total_page' => 100,
190
+ 'text' => $strHTML
191
+ );
192
+
193
+ echo json_encode($output);
194
+ ```
195
+
196
+ ポイント:
197
+ - PHPでエラーは起こさない(超大前提)
198
+ - json返す側は必要なhtmlだけ返す(tableのみ)
199
+ - jsonで返しているので、jsonで受け取るようにする
200
+  evalJSONなくても[$.postの引数でjson](http://js.studio-kingdom.com/jquery/ajax/post)を指定すれば取れます。
201
+ - jQueryは削られた機能の関係からこのバージョン(1.4.3)を利用する
202
+  このスクロールプラグインで利用している[msie指定が1.9から使えなくなった](jquery msie)
203
+ - $.postは非同期で実行しているためHTML構築時ではテーブルは存在しない。
204
+  存在しないタイミングでプラグインを呼び出しては効果がないので、テーブルがhtml上に現れた後にプラグインをそのテーブルに対して行う

6

調整

2018/03/14 04:48

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -94,7 +94,11 @@
94
94
  $("#tbl_list").tbodyScroll({thead_height:"30px",tbody_height:"100px",head_bgcolor: "transparent",foot_bgcolor: "transparent"});
95
95
  });
96
96
  ```
97
-
97
+ となると  class="demo" は不要ですね。
98
+ 前回質問で「※demoの部分は任意の名前なので変更しても良いですがその場合はtableに記述する名前も同じにしてください」と書いた部分です。
99
+ ```html
100
+ <table id="tbl_list">
101
+ ```
98
102
  # 他に考えられる要因(あくまで可能性のレベル)
99
103
 
100
104
  - 親(ichiran.php)と子(aa_ichiran_list.php)でjQueryのバージョンが違う。

5

追記

2018/03/14 01:24

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -88,6 +88,12 @@
88
88
  th,td {width: 180px;}
89
89
  </style>
90
90
  ```
91
+ tableにtbl_listというIDつけているのでdemoという明らかにテストっぽいのではなくIDあてたほうがいいんじゃないかなあ。
92
+ ```javascript
93
+ $(document).ready(function() {
94
+ $("#tbl_list").tbodyScroll({thead_height:"30px",tbody_height:"100px",head_bgcolor: "transparent",foot_bgcolor: "transparent"});
95
+ });
96
+ ```
91
97
 
92
98
  # 他に考えられる要因(あくまで可能性のレベル)
93
99
 

4

修正

2018/03/14 01:20

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -45,7 +45,7 @@
45
45
  //ヘッダー部
46
46
  $sort_keisokuki_img = _hs($sort_keisokuki_img);
47
47
  $strHTML = <<<'eof'
48
- <table id="tbl_list" cellspacing="0" cellpadding="0" class="demo">
48
+ <table id="tbl_list" class="demo">
49
49
  <thead>
50
50
  <tr>
51
51
  <th scope="col" class="f-weight"><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th>
@@ -55,6 +55,7 @@
55
55
  </thead>
56
56
  eof;
57
57
  //↑提示のソースはそのままPHP関数が埋め込んであったので少し修正しています。
58
+ // 何度か指摘していますがtableに入れているcellspacing="0" cellpadding="0" は不要かと。CSSで調整してください。
58
59
 
59
60
  ~~~中間部分は省略しています(kei344さん指摘の部分はきちんと直してください)
60
61
 

3

修正

2018/03/14 01:19

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -36,7 +36,9 @@
36
36
  </html>
37
37
  ```
38
38
 
39
- つまりJSONを渡す側は下記だけ返せば良
39
+ つまりJSONを渡す側は下記のように書て、上記簡略化ソースで言えば
40
+ <table></table>に該当する部分だけを返すようにすれば良いです。
41
+
40
42
  ```php
41
43
  ~~DB接続・取得部分は省略しています
42
44
 

2

修正

2018/03/14 01:17

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -10,8 +10,9 @@
10
10
 
11
11
   JSONで受け取るのは表示したいHTMLのみであるべきです。
12
12
  つまり、<html><head>~~~</head><body>XXXXX</body></html>のXXXXXの部分だけ書けば良い。
13
-  入れてしまうと以下のようなHTML(省略)が出力されてしまい、HTMLとしておかしい。
13
+  入れてしまうと以下のようなHTMLが出力されてしまい、HTMLとしておかしい。
14
14
   正しくHTMLが組まれていないので、弊害が起きる可能性もあります。
15
+ ※簡略化しています
15
16
  ```HTML
16
17
  <html>
17
18
  <head>

1

修正

2018/03/14 01:13

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -35,6 +35,41 @@
35
35
  </html>
36
36
  ```
37
37
 
38
+ つまりJSONを渡す側は下記だけ返せば良い。
39
+ ```php
40
+ ~~DB接続・取得部分は省略しています
41
+
42
+ //ヘッダー部
43
+ $sort_keisokuki_img = _hs($sort_keisokuki_img);
44
+ $strHTML = <<<'eof'
45
+ <table id="tbl_list" cellspacing="0" cellpadding="0" class="demo">
46
+ <thead>
47
+ <tr>
48
+ <th scope="col" class="f-weight"><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th>
49
+ <th scope="col" class="f-weight">備品<br>タイプ</th>
50
+ <th scope="col" class="f-weight"><a href="#" id="sort" name="keisokuki" param="{$sort_keisokuki_img}">備品名</a></th>
51
+ </tr>
52
+ </thead>
53
+ eof;
54
+ //↑提示のソースはそのままPHP関数が埋め込んであったので少し修正しています。
55
+
56
+ ~~~中間部分は省略しています(kei344さん指摘の部分はきちんと直してください)
57
+
58
+ $strHTML .= <<<'eof'
59
+ </tbody>
60
+ </table>
61
+ eof;
62
+ //↑提示のソースには</html>がありましたがこれは不要なので除外
63
+
64
+ $output = array (
65
+ 'total_page' => ceil($datanum / $page_disp_kensu),
66
+ 'text' => $strHTML
67
+ );
68
+
69
+ echo json_encode($output);
70
+
71
+ ```
72
+
38
73
  実際にJavaScriptなりCSSなりが効いて動作を行うのは呼び出しもとであるichiran.php側で行われるべき。
39
74
  つまり下記はichiran.phpに書く。
40
75
  ```html
@@ -54,7 +89,7 @@
54
89
 
55
90
  - 親(ichiran.php)と子(aa_ichiran_list.php)でjQueryのバージョンが違う。
56
91
   導入したいプラグインはどちらのバージョンが対応しているか確認して統一すべき
57
- - 親に様々なjQueryプラグインが読み込まれている、干渉しあっている可能性がある。
92
+ - 親に様々なjQueryプラグインが読み込まれているので、干渉しあっている可能性がある。
58
93
   ブラウザの開発ツールのコンソールでエラー出てませんか?
59
94
   →関係ないプラグインの読み込みや記述は全て一度削除し、今回のプラグインが正常に動作するか確認すること
60
95