質問編集履歴

8

ベストアンサーとの整合性をとるため質問文をもとに戻しました

2018/04/16 10:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,495 +1,31 @@
1
- ###目的
1
+ ###現状
2
2
 
3
- 「jquery-ui.min.js」テーブルの行をドラッグする機能をつけました。
3
+ 「jquery-ui.min.js」と「jquery.cookie.js」によってテーブルの行のcookie保存機能を作りました。
4
4
 
5
5
 
6
6
 
7
- しかし、やたらと重く困っています。
7
+ 一応機能はできたのですが行を多く(300行ほど)するとやたらと重くなり困っています。
8
8
 
9
9
 
10
10
 
11
- ```
11
+ ###目的
12
12
 
13
- ////一気にドラッグ←こいついで重い!
13
+ そこで、「jquery-ui.min.js」から、「行をドラッグで移動する機能」などを削除し「行位置をcookie保存する機能」だけを残したいです。
14
-
15
- (function($){
16
-
17
-
18
-
19
- })(jQuery);
20
-
21
- ```
22
14
 
23
15
 
24
16
 
25
- こちら部分がダメようですがち原因がわかりません
17
+ (ドラッグで移動した行を保存するではく、別の方法行を追加していま。なのでそれ保存できればいいと思い、「jquery-ui.min.js」を採用しただけなので
26
18
 
27
19
 
28
20
 
29
- 次のコード重くなる原因がどこにある?またそれはどう解決ればいか?教示いただけませんでしょうか?(テーブルの行は300行ほどあります…)
21
+ どなたか、「jquery-ui.min.js」ら「行の位置をcookie保存る機能」だけを残す、とう方法を存じありませんでしょうか?
30
22
 
31
23
 
32
24
 
33
- ###現状のコード
25
+ ###補足
34
26
 
35
- チェックボックスよって行表示替わり、表示されるときは常にテーブルの上に表示されるようになってい
27
+ ちなみ、こページ([https://jqueryui.com/download/](https://jqueryui.com/download/))に「jquery-ui.min.js」のカスタムダウンロードりました
36
28
 
37
29
 
38
30
 
39
- 長くなってしまって申し訳ございません。
40
-
41
- ```javascript
42
-
43
- /******************************
44
-
45
- /* jquery.ui.min.jsを使った機能
46
-
47
- *******************************/
48
-
49
-
50
-
51
- ////テーブルの順序をcookie保存
52
-
53
- (function($){
54
-
55
- $(function() {
56
-
57
- $(".sortable").sortable();
58
-
59
- $(".sortable").disableSelection();
60
-
61
- $('body').on("click",'.save',function(){
62
-
63
- var updateArray = $(".sortable").sortable("toArray").join(",");
64
-
65
- $.cookie("sortable", updateArray, {expires: 30});
66
-
67
-
68
-
69
- });
70
-
71
- if($.cookie("sortable")) {
72
-
73
- var cookieValue = $.cookie("sortable").split(",").reverse();
74
-
75
- $.each(
76
-
77
- cookieValue,
78
-
79
- function(index, value) {$('#'+value).prependTo(".sortable");}
80
-
81
- );
82
-
83
- }
84
-
85
- });
86
-
87
- })(jQuery);
88
-
89
-
90
-
91
- ////一気にドラッグ←こいつのせいで重い!
92
-
93
- (function($){
94
-
95
- $('.table1 tbody').selectable({
96
-
97
- cancel: '.sort-handle, .ui-selected',
98
-
99
- }).sortable({
100
-
101
- placeholder: "ui-state-highlight",
102
-
103
- axis: 'y',
104
-
105
- opacity: 0.9,
106
-
107
- items: "> tr",
108
-
109
- handle: 'td, .sort-handle, .ui-selected',
110
-
111
- helper: function(e, item){
112
-
113
- if (!item.hasClass('ui-selected')){
114
-
115
- item.parent().children('.ui-selected').removeClass('ui-selected');
116
-
117
- item.addClass('ui-selected');
118
-
119
- }
120
-
121
- var selected = item.parent().children('.ui-selected').clone();
122
-
123
- ph = item.outerHeight() * selected.length;
124
-
125
- item.data('multidrag', selected).siblings('.ui-selected').remove();
126
-
127
- return $('<tr/>').append(selected);
128
-
129
- },
130
-
131
- cursor: "move",
132
-
133
- start: function(e, ui){
134
-
135
- ui.placeholder.css({'height':ph});
136
-
137
- },
138
-
139
- stop: function(e, ui){
140
-
141
- var selected = ui.item.data('multidrag');
142
-
143
- ui.item.after(selected);
144
-
145
- ui.item.remove();
146
-
147
- selected.removeClass('ui-selected');
148
-
149
- $(selected).children("td").removeClass('ui-selected');
150
-
151
- },
152
-
153
- update: function(e, ui){
154
-
155
- console.log("updated !!");
156
-
157
- }
158
-
159
- });
160
-
161
- })(jQuery);
162
-
163
-
164
-
165
-
166
-
167
- ////テーブル外クリックで選択解除
168
-
169
- (function($){
170
-
171
- $('body').on("click",function(){
172
-
173
- $('tr').removeClass('ui-selected');
174
-
175
- });
176
-
177
- })(jQuery);
178
-
179
-
180
-
181
-
182
-
183
- /******************************
184
-
185
- /* jquery.cookie.jsを使った機能
186
-
187
- *******************************/
188
-
189
-
190
-
191
- ////チェックの有無をcookie保存
192
-
193
- (function($){
194
-
195
- $(function(){
196
-
197
-
198
-
199
- //supportのチェック項目を保存
200
-
201
- if($.cookie("chk_support_selected_value")){
202
-
203
- $.cookie("chk_support_selected_value").split(",").forEach(function(v){
204
-
205
- $('input[name=chk_support][value='+v+']').prop('checked',true);
206
-
207
- });
208
-
209
- }
210
-
211
- $('.save').on("click",function(){
212
-
213
- var v=$('input[name=chk_support]:checked').map(function(){return $(this).val()}).get().join(",");
214
-
215
- if(v===""){
216
-
217
- $.removeCookie("chk_support_selected_value");
218
-
219
- }else{
220
-
221
- $.cookie("chk_support_selected_value",v);
222
-
223
- }
224
-
225
- });
226
-
227
- //support(未指定の場合)のチェック項目を保存
228
-
229
- if($.cookie("chk_support_un_selected_value")){
230
-
231
- $.cookie("chk_support_un_selected_value").split(",").forEach(function(v){
31
+ ここから「Sortable.min.js」だけをダウンロードして使ってみましたが、他のjQueryまで作動してくれなくなってしまったので、別のものだと思うのですが…見当がつきません。
232
-
233
- $('input[name=chk_support_un][value='+v+']').prop('checked',true);
234
-
235
- });
236
-
237
- }
238
-
239
- $('.save').on("click",function(){
240
-
241
- var v=$('input[name=chk_support_un]:checked').map(function(){return $(this).val()}).get().join(",");
242
-
243
- if(v===""){
244
-
245
- $.removeCookie("chk_support_un_selected_value");
246
-
247
- }else{
248
-
249
- $.cookie("chk_support_un_selected_value",v);
250
-
251
- }
252
-
253
- });
254
-
255
-
256
-
257
- //pointのチェック項目を保存
258
-
259
- if($.cookie("chk_point_selected_value")){
260
-
261
- $.cookie("chk_point_selected_value").split(",").forEach(function(v){
262
-
263
- $('input[name=chk_point][value='+v+']').prop('checked',true);
264
-
265
- });
266
-
267
- }
268
-
269
- $('.save').on("click",function(){
270
-
271
- var v=$('input[name=chk_point]:checked').map(function(){return $(this).val()}).get().join(",");
272
-
273
- if(v===""){
274
-
275
- $.removeCookie("chk_point_selected_value");
276
-
277
- }else{
278
-
279
- $.cookie("chk_point_selected_value",v);
280
-
281
- }
282
-
283
- });
284
-
285
-
286
-
287
- //volumeのチェック項目を保存
288
-
289
- if($.cookie("chk_volume_selected_value")){
290
-
291
- $.cookie("chk_volume_selected_value").split(",").forEach(function(v){
292
-
293
- $('input[name=chk_volume][value='+v+']').prop('checked',true);
294
-
295
- });
296
-
297
- }
298
-
299
- $('.fluits_save').on("click",function(){
300
-
301
- var v=$('input[name=chk_volume]:checked').map(function(){return $(this).val()}).get().join(",");
302
-
303
- if(v===""){
304
-
305
- $.removeCookie("chk_volume_selected_value");
306
-
307
- }else{
308
-
309
- $.cookie("chk_volume_selected_value",v);
310
-
311
- }
312
-
313
- });
314
-
315
-
316
-
317
- //fluitsのチェック項目を保存
318
-
319
- if($.cookie("chk_fluits_selected_value")){
320
-
321
- $.cookie("chk_fluits_selected_value").split(",").forEach(function(v){
322
-
323
- $('input[name=chk_fluits][value='+v+']').prop('checked',true);
324
-
325
- });
326
-
327
- }
328
-
329
- $('.save').on("click",function(){
330
-
331
- var v=$('input[name=chk_fluits]:checked').map(function(){return $(this).val()}).get().join(",");
332
-
333
- if(v===""){
334
-
335
- $.removeCookie("chk_fluits_selected_value");
336
-
337
- }else{
338
-
339
- $.cookie("chk_fluits_selected_value",v);
340
-
341
- }
342
-
343
- });
344
-
345
-
346
-
347
- });
348
-
349
- })(jQuery);
350
-
351
-
352
-
353
-
354
-
355
- /*******************************
356
-
357
- /* 初回読み込み時の自動チェック機能
358
-
359
- *******************************/
360
-
361
-
362
-
363
- //保存クリック履歴ないときのチェック
364
-
365
- (function($){
366
-
367
- $(document).ready(function(){
368
-
369
- if($.cookie("access") == undefined) {
370
-
371
- //保存クリック履歴ないときのsupportチェック
372
-
373
- $('#support1').prop("checked", true);
374
-
375
- //保存クリック履歴ないときのpointチェック
376
-
377
- $('#point1').prop("checked", true);
378
-
379
- //保存クリック履歴ないときのvolumeチェック
380
-
381
- $('#volume1').prop("checked", true);
382
-
383
- $('#volume1_un').prop("checked", true);
384
-
385
- //保存クリック履歴ないときのfluitsチェック
386
-
387
- $('#apple, #banana, #grape').prop("checked", true);
388
-
389
- }
390
-
391
- });
392
-
393
-
394
-
395
- //保存クリック履歴有無判別のためのcookie保存
396
-
397
- $('body').on("click",'.save',function(){
398
-
399
- $.cookie("access","hello", { expires: 365 , path: "/" });
400
-
401
- });
402
-
403
-
404
-
405
- })(jQuery);
406
-
407
-
408
-
409
-
410
-
411
- /*******************************
412
-
413
- /* 読み込み時の自動表示機能
414
-
415
- *******************************/
416
-
417
-
418
-
419
- (function($){
420
-
421
- $(document).ready(function () {
422
-
423
-
424
-
425
- //support表示切替
426
-
427
- $('input[name="chk_support"]').each(function(){
428
-
429
- if ($(this).prop("checked") == true) {
430
-
431
- $( '.' + $(this).attr('id') ).css('display', 'table-cell');
432
-
433
- } else {
434
-
435
- $( '.' + $(this).attr('id') ).css('display', 'none');
436
-
437
- }
438
-
439
- });
440
-
441
- $('input[name="chk_support_un"]').each(function(){
442
-
443
- if ($(this).prop("checked") == true) {
444
-
445
- $('.tablerow thead tr th, .tablerow tbody tr td').css('display', 'table-cell');
446
-
447
- }
448
-
449
- });
450
-
451
-
452
-
453
- //point表示切替
454
-
455
- $('input[name="chk_point"]').each(function(){
456
-
457
- if ($(this).prop("checked") == true) {
458
-
459
- $( '.' + $(this).attr('id') ).css('display', 'table-row');
460
-
461
- } else {
462
-
463
- $( '.' + $(this).attr('id') ).css('display', 'none');
464
-
465
- }
466
-
467
- });
468
-
469
-
470
-
471
- //fluits表示切替
472
-
473
- $('input[name="chk_fluits"]').each(function(){
474
-
475
- if ($(this).prop("checked") == true) {
476
-
477
- $( '.' + $(this).attr('id') ).css('display', 'table-row');
478
-
479
- } else {
480
-
481
- $( '.' + $(this).attr('id') ).css('display', 'none');
482
-
483
- }
484
-
485
- });
486
-
487
-
488
-
489
- });
490
-
491
- })(jQuery);
492
-
493
-
494
-
495
- ```

7

誤字

2018/04/16 10:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,39 +1,41 @@
1
- ###現状
2
-
3
- 「jquery-ui.min.js」と「jquery.cookie.js」によってテーブルの行のcookie保存機能を作りました。
4
-
5
-
6
-
7
- 一応機能はできたのですが、行を多く(300行ほど)するとやたらと重くなり困っています。
8
-
9
-
10
-
11
-
12
-
13
1
  ###目的
14
2
 
15
- そこで、「jquery-ui.min.js」から、「行をドラッグで移動する機能」など削除し「行の位置をcookie保存する機能」だを残したいです
3
+ 「jquery-ui.min.js」でテーブルの行をドラッグする機能をした。
4
+
5
+
6
+
16
-
7
+ しかし、やたらと重くて困っています。
8
+
9
+
10
+
17
-
11
+ ```
18
-
12
+
19
- ドラッグで移動した行を保存するではなく、チェックボックスで行を追加してます。なのその状態が保存できればいと思い、「jquery-ui.min.js」を採用しただけなので、ドラッグなどは不要なのです。)
13
+ ////一気にドラッグ←こいついで
14
+
20
-
15
+ (function($){
16
+
21
-
17
+
18
+
22
-
19
+ })(jQuery);
20
+
21
+ ```
22
+
23
+
24
+
25
+ こちらの部分がダメなようですが、いまいち原因がわかりません。
26
+
27
+
28
+
23
- どなたか、「jquery-ui.min.js」ら「行の位置をcookie保存る機能」だけを残す、という方法をご存じありませんでしょうか?
29
+ 次のコード重くなる原因がどこにある?またそれはどう解決ればいいか?ご教示いただけませんでしょうか?(テーブルの行は300行ほどあります…)
24
-
25
-
26
-
30
+
31
+
32
+
27
- ###追記
33
+ ###現状のコード
28
34
 
29
35
  チェックボックスによって行の表示が切り替わり、表示されるときは常にテーブルの上に表示されるようになっています。
30
36
 
31
37
 
32
38
 
33
- その表示切替機能とcookie保存機能のあたりを次に追記いたします。
34
-
35
-
36
-
37
39
  長くなってしまって申し訳ございません。
38
40
 
39
41
  ```javascript
@@ -86,6 +88,96 @@
86
88
 
87
89
 
88
90
 
91
+ ////一気にドラッグ←こいつのせいで重い!
92
+
93
+ (function($){
94
+
95
+ $('.table1 tbody').selectable({
96
+
97
+ cancel: '.sort-handle, .ui-selected',
98
+
99
+ }).sortable({
100
+
101
+ placeholder: "ui-state-highlight",
102
+
103
+ axis: 'y',
104
+
105
+ opacity: 0.9,
106
+
107
+ items: "> tr",
108
+
109
+ handle: 'td, .sort-handle, .ui-selected',
110
+
111
+ helper: function(e, item){
112
+
113
+ if (!item.hasClass('ui-selected')){
114
+
115
+ item.parent().children('.ui-selected').removeClass('ui-selected');
116
+
117
+ item.addClass('ui-selected');
118
+
119
+ }
120
+
121
+ var selected = item.parent().children('.ui-selected').clone();
122
+
123
+ ph = item.outerHeight() * selected.length;
124
+
125
+ item.data('multidrag', selected).siblings('.ui-selected').remove();
126
+
127
+ return $('<tr/>').append(selected);
128
+
129
+ },
130
+
131
+ cursor: "move",
132
+
133
+ start: function(e, ui){
134
+
135
+ ui.placeholder.css({'height':ph});
136
+
137
+ },
138
+
139
+ stop: function(e, ui){
140
+
141
+ var selected = ui.item.data('multidrag');
142
+
143
+ ui.item.after(selected);
144
+
145
+ ui.item.remove();
146
+
147
+ selected.removeClass('ui-selected');
148
+
149
+ $(selected).children("td").removeClass('ui-selected');
150
+
151
+ },
152
+
153
+ update: function(e, ui){
154
+
155
+ console.log("updated !!");
156
+
157
+ }
158
+
159
+ });
160
+
161
+ })(jQuery);
162
+
163
+
164
+
165
+
166
+
167
+ ////テーブル外クリックで選択解除
168
+
169
+ (function($){
170
+
171
+ $('body').on("click",function(){
172
+
173
+ $('tr').removeClass('ui-selected');
174
+
175
+ });
176
+
177
+ })(jQuery);
178
+
179
+
180
+
89
181
 
90
182
 
91
183
  /******************************

6

誤字

2018/04/16 09:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -86,73 +86,171 @@
86
86
 
87
87
 
88
88
 
89
+
90
+
91
+ /******************************
92
+
93
+ /* jquery.cookie.jsを使った機能
94
+
95
+ *******************************/
96
+
97
+
98
+
89
- ////sortableで一気にドラッグ
99
+ ////チェックの有無をcookie保存
90
100
 
91
101
  (function($){
92
102
 
93
- $('.table tbody').selectable({
94
-
95
- cancel: '.sort-handle, .ui-selected',
96
-
97
- }).sortable({
98
-
99
- placeholder: "ui-state-highlight",
100
-
101
- axis: 'y',
102
-
103
- opacity: 0.9,
104
-
105
- items: "> tr",
106
-
107
- handle: 'td, .sort-handle, .ui-selected',
108
-
109
- helper: function(e, item){
110
-
111
- if (!item.hasClass('ui-selected')){
112
-
113
- item.parent().children('.ui-selected').removeClass('ui-selected');
114
-
115
- item.addClass('ui-selected');
116
-
117
- }
118
-
119
- var selected = item.parent().children('.ui-selected').clone();
120
-
121
- ph = item.outerHeight() * selected.length;
122
-
123
- item.data('multidrag', selected).siblings('.ui-selected').remove();
124
-
125
- return $('<tr/>').append(selected);
126
-
127
- },
128
-
129
- cursor: "move",
130
-
131
- start: function(e, ui){
132
-
133
- ui.placeholder.css({'height':ph});
134
-
135
- },
136
-
137
- stop: function(e, ui){
138
-
139
- var selected = ui.item.data('multidrag');
140
-
141
- ui.item.after(selected);
142
-
143
- ui.item.remove();
144
-
145
- selected.removeClass('ui-selected');
146
-
147
- $(selected).children("td").removeClass('ui-selected');
148
-
149
- },
150
-
151
- update: function(e, ui){
152
-
153
- console.log("updated !!");
154
-
155
- }
103
+ $(function(){
104
+
105
+
106
+
107
+ //supportのチェック項目を保存
108
+
109
+ if($.cookie("chk_support_selected_value")){
110
+
111
+ $.cookie("chk_support_selected_value").split(",").forEach(function(v){
112
+
113
+ $('input[name=chk_support][value='+v+']').prop('checked',true);
114
+
115
+ });
116
+
117
+ }
118
+
119
+ $('.save').on("click",function(){
120
+
121
+ var v=$('input[name=chk_support]:checked').map(function(){return $(this).val()}).get().join(",");
122
+
123
+ if(v===""){
124
+
125
+ $.removeCookie("chk_support_selected_value");
126
+
127
+ }else{
128
+
129
+ $.cookie("chk_support_selected_value",v);
130
+
131
+ }
132
+
133
+ });
134
+
135
+ //support(未指定の場合)のチェック項目を保存
136
+
137
+ if($.cookie("chk_support_un_selected_value")){
138
+
139
+ $.cookie("chk_support_un_selected_value").split(",").forEach(function(v){
140
+
141
+ $('input[name=chk_support_un][value='+v+']').prop('checked',true);
142
+
143
+ });
144
+
145
+ }
146
+
147
+ $('.save').on("click",function(){
148
+
149
+ var v=$('input[name=chk_support_un]:checked').map(function(){return $(this).val()}).get().join(",");
150
+
151
+ if(v===""){
152
+
153
+ $.removeCookie("chk_support_un_selected_value");
154
+
155
+ }else{
156
+
157
+ $.cookie("chk_support_un_selected_value",v);
158
+
159
+ }
160
+
161
+ });
162
+
163
+
164
+
165
+ //pointのチェック項目を保存
166
+
167
+ if($.cookie("chk_point_selected_value")){
168
+
169
+ $.cookie("chk_point_selected_value").split(",").forEach(function(v){
170
+
171
+ $('input[name=chk_point][value='+v+']').prop('checked',true);
172
+
173
+ });
174
+
175
+ }
176
+
177
+ $('.save').on("click",function(){
178
+
179
+ var v=$('input[name=chk_point]:checked').map(function(){return $(this).val()}).get().join(",");
180
+
181
+ if(v===""){
182
+
183
+ $.removeCookie("chk_point_selected_value");
184
+
185
+ }else{
186
+
187
+ $.cookie("chk_point_selected_value",v);
188
+
189
+ }
190
+
191
+ });
192
+
193
+
194
+
195
+ //volumeのチェック項目を保存
196
+
197
+ if($.cookie("chk_volume_selected_value")){
198
+
199
+ $.cookie("chk_volume_selected_value").split(",").forEach(function(v){
200
+
201
+ $('input[name=chk_volume][value='+v+']').prop('checked',true);
202
+
203
+ });
204
+
205
+ }
206
+
207
+ $('.fluits_save').on("click",function(){
208
+
209
+ var v=$('input[name=chk_volume]:checked').map(function(){return $(this).val()}).get().join(",");
210
+
211
+ if(v===""){
212
+
213
+ $.removeCookie("chk_volume_selected_value");
214
+
215
+ }else{
216
+
217
+ $.cookie("chk_volume_selected_value",v);
218
+
219
+ }
220
+
221
+ });
222
+
223
+
224
+
225
+ //fluitsのチェック項目を保存
226
+
227
+ if($.cookie("chk_fluits_selected_value")){
228
+
229
+ $.cookie("chk_fluits_selected_value").split(",").forEach(function(v){
230
+
231
+ $('input[name=chk_fluits][value='+v+']').prop('checked',true);
232
+
233
+ });
234
+
235
+ }
236
+
237
+ $('.save').on("click",function(){
238
+
239
+ var v=$('input[name=chk_fluits]:checked').map(function(){return $(this).val()}).get().join(",");
240
+
241
+ if(v===""){
242
+
243
+ $.removeCookie("chk_fluits_selected_value");
244
+
245
+ }else{
246
+
247
+ $.cookie("chk_fluits_selected_value",v);
248
+
249
+ }
250
+
251
+ });
252
+
253
+
156
254
 
157
255
  });
158
256
 
@@ -160,169 +258,141 @@
160
258
 
161
259
 
162
260
 
261
+
262
+
163
- /******************************
263
+ /*******************************
164
-
264
+
165
- /* jquery.cookie.jsを使った機能
265
+ /* 初回読み込み時の自動チェック機能
166
266
 
167
267
  *******************************/
168
268
 
169
269
 
170
270
 
171
- ////チェックの有無をcookie保存
271
+ //保存クリック履歴ないときのチェック
172
272
 
173
273
  (function($){
174
274
 
175
- $(function(){
176
-
177
-
178
-
179
- //supportチェック項目を保存
180
-
181
- if($.cookie("chk_support_selected_value")){
182
-
183
- $.cookie("chk_support_selected_value").split(",").forEach(function(v){
184
-
185
- $('input[name=chk_support][value='+v+']').prop('checked',true);
186
-
187
- });
188
-
189
- }
190
-
191
- $('.save').on("click",function(){
192
-
193
- var v=$('input[name=chk_support]:checked').map(function(){return $(this).val()}).get().join(",");
194
-
195
- if(v===""){
196
-
197
- $.removeCookie("chk_support_selected_value");
198
-
199
- }else{
200
-
201
- $.cookie("chk_support_selected_value",v);
202
-
203
- }
204
-
205
- });
206
-
207
- //support(未指定の場合)のチェック項目を保存
208
-
209
- if($.cookie("chk_support_un_selected_value")){
210
-
211
- $.cookie("chk_support_un_selected_value").split(",").forEach(function(v){
212
-
213
- $('input[name=chk_support_un][value='+v+']').prop('checked',true);
214
-
215
- });
216
-
217
- }
218
-
219
- $('.save').on("click",function(){
220
-
221
- var v=$('input[name=chk_support_un]:checked').map(function(){return $(this).val()}).get().join(",");
222
-
223
- if(v===""){
224
-
225
- $.removeCookie("chk_support_un_selected_value");
226
-
227
- }else{
228
-
229
- $.cookie("chk_support_un_selected_value",v);
230
-
231
- }
232
-
233
- });
234
-
235
-
236
-
237
- //pointのチェック項目を保存
238
-
239
- if($.cookie("chk_point_selected_value")){
240
-
241
- $.cookie("chk_point_selected_value").split(",").forEach(function(v){
242
-
243
- $('input[name=chk_point][value='+v+']').prop('checked',true);
244
-
245
- });
246
-
247
- }
248
-
249
- $('.save').on("click",function(){
250
-
251
- var v=$('input[name=chk_point]:checked').map(function(){return $(this).val()}).get().join(",");
252
-
253
- if(v===""){
254
-
255
- $.removeCookie("chk_point_selected_value");
256
-
257
- }else{
258
-
259
- $.cookie("chk_point_selected_value",v);
260
-
261
- }
262
-
263
- });
264
-
265
-
266
-
267
- //volumeのチェック項目を保存
268
-
269
- if($.cookie("chk_volume_selected_value")){
270
-
271
- $.cookie("chk_volume_selected_value").split(",").forEach(function(v){
272
-
273
- $('input[name=chk_volume][value='+v+']').prop('checked',true);
274
-
275
- });
276
-
277
- }
278
-
279
- $('.fluits_save').on("click",function(){
280
-
281
- var v=$('input[name=chk_volume]:checked').map(function(){return $(this).val()}).get().join(",");
282
-
283
- if(v===""){
284
-
285
- $.removeCookie("chk_volume_selected_value");
286
-
287
- }else{
288
-
289
- $.cookie("chk_volume_selected_value",v);
290
-
291
- }
292
-
293
- });
294
-
295
-
296
-
297
- //fluitsのチェック項目を保存
298
-
299
- if($.cookie("chk_fluits_selected_value")){
300
-
301
- $.cookie("chk_fluits_selected_value").split(",").forEach(function(v){
302
-
303
- $('input[name=chk_fluits][value='+v+']').prop('checked',true);
304
-
305
- });
306
-
307
- }
308
-
309
- $('.save').on("click",function(){
310
-
311
- var v=$('input[name=chk_fluits]:checked').map(function(){return $(this).val()}).get().join(",");
312
-
313
- if(v===""){
314
-
315
- $.removeCookie("chk_fluits_selected_value");
316
-
317
- }else{
318
-
319
- $.cookie("chk_fluits_selected_value",v);
320
-
321
- }
322
-
323
- });
324
-
325
-
275
+ $(document).ready(function(){
276
+
277
+ if($.cookie("access") == undefined) {
278
+
279
+ //保存クリック履歴ないときのsupportチェック
280
+
281
+ $('#support1').prop("checked", true);
282
+
283
+ //保存クリック履歴ないときのpointチェック
284
+
285
+ $('#point1').prop("checked", true);
286
+
287
+ //保存クリック履歴ないときのvolumeチェック
288
+
289
+ $('#volume1').prop("checked", true);
290
+
291
+ $('#volume1_un').prop("checked", true);
292
+
293
+ //保存クリック履歴ないときのfluitsチェック
294
+
295
+ $('#apple, #banana, #grape').prop("checked", true);
296
+
297
+ }
298
+
299
+ });
300
+
301
+
302
+
303
+ //保存クリック履歴有無判別のためのcookie保存
304
+
305
+ $('body').on("click",'.save',function(){
306
+
307
+ $.cookie("access","hello", { expires: 365 , path: "/" });
308
+
309
+ });
310
+
311
+
312
+
313
+ })(jQuery);
314
+
315
+
316
+
317
+
318
+
319
+ /*******************************
320
+
321
+ /* 読み込み時の自動表示機能
322
+
323
+ *******************************/
324
+
325
+
326
+
327
+ (function($){
328
+
329
+ $(document).ready(function () {
330
+
331
+
332
+
333
+ //support表示切替
334
+
335
+ $('input[name="chk_support"]').each(function(){
336
+
337
+ if ($(this).prop("checked") == true) {
338
+
339
+ $( '.' + $(this).attr('id') ).css('display', 'table-cell');
340
+
341
+ } else {
342
+
343
+ $( '.' + $(this).attr('id') ).css('display', 'none');
344
+
345
+ }
346
+
347
+ });
348
+
349
+ $('input[name="chk_support_un"]').each(function(){
350
+
351
+ if ($(this).prop("checked") == true) {
352
+
353
+ $('.tablerow thead tr th, .tablerow tbody tr td').css('display', 'table-cell');
354
+
355
+ }
356
+
357
+ });
358
+
359
+
360
+
361
+ //point表示切替
362
+
363
+ $('input[name="chk_point"]').each(function(){
364
+
365
+ if ($(this).prop("checked") == true) {
366
+
367
+ $( '.' + $(this).attr('id') ).css('display', 'table-row');
368
+
369
+ } else {
370
+
371
+ $( '.' + $(this).attr('id') ).css('display', 'none');
372
+
373
+ }
374
+
375
+ });
376
+
377
+
378
+
379
+ //fluits表示切替
380
+
381
+ $('input[name="chk_fluits"]').each(function(){
382
+
383
+ if ($(this).prop("checked") == true) {
384
+
385
+ $( '.' + $(this).attr('id') ).css('display', 'table-row');
386
+
387
+ } else {
388
+
389
+ $( '.' + $(this).attr('id') ).css('display', 'none');
390
+
391
+ }
392
+
393
+ });
394
+
395
+
326
396
 
327
397
  });
328
398
 
@@ -330,146 +400,4 @@
330
400
 
331
401
 
332
402
 
333
-
334
-
335
- /*******************************
336
-
337
- /* 初回読み込み時の自動チェック機能
338
-
339
- *******************************/
340
-
341
-
342
-
343
- //保存クリック履歴ないときのチェック
344
-
345
- (function($){
346
-
347
- $(document).ready(function(){
348
-
349
- if($.cookie("access") == undefined) {
350
-
351
- //保存クリック履歴ないときのsupportチェック
352
-
353
- $('#support1').prop("checked", true);
354
-
355
- //保存クリック履歴ないときのpointチェック
356
-
357
- $('#point1').prop("checked", true);
358
-
359
- //保存クリック履歴ないときのvolumeチェック
360
-
361
- $('#volume1').prop("checked", true);
362
-
363
- $('#volume1_un').prop("checked", true);
364
-
365
- //保存クリック履歴ないときのfluitsチェック
366
-
367
- $('#apple, #banana, #grape').prop("checked", true);
368
-
369
- }
370
-
371
- });
372
-
373
-
374
-
375
- //保存クリック履歴有無判別のためのcookie保存
376
-
377
- $('body').on("click",'.save',function(){
378
-
379
- $.cookie("access","hello", { expires: 365 , path: "/" });
380
-
381
- });
382
-
383
-
384
-
385
- })(jQuery);
386
-
387
-
388
-
389
-
390
-
391
- /*******************************
392
-
393
- /* 読み込み時の自動表示機能
394
-
395
- *******************************/
396
-
397
-
398
-
399
- (function($){
400
-
401
- $(document).ready(function () {
402
-
403
-
404
-
405
- //support表示切替
406
-
407
- $('input[name="chk_support"]').each(function(){
408
-
409
- if ($(this).prop("checked") == true) {
410
-
411
- $( '.' + $(this).attr('id') ).css('display', 'table-cell');
412
-
413
- } else {
414
-
415
- $( '.' + $(this).attr('id') ).css('display', 'none');
416
-
417
- }
418
-
419
- });
420
-
421
- $('input[name="chk_support_un"]').each(function(){
422
-
423
- if ($(this).prop("checked") == true) {
424
-
425
- $('.tablerow thead tr th, .tablerow tbody tr td').css('display', 'table-cell');
426
-
427
- }
428
-
429
- });
430
-
431
-
432
-
433
- //point表示切替
434
-
435
- $('input[name="chk_point"]').each(function(){
436
-
437
- if ($(this).prop("checked") == true) {
438
-
439
- $( '.' + $(this).attr('id') ).css('display', 'table-row');
440
-
441
- } else {
442
-
443
- $( '.' + $(this).attr('id') ).css('display', 'none');
444
-
445
- }
446
-
447
- });
448
-
449
-
450
-
451
- //fluits表示切替
452
-
453
- $('input[name="chk_fluits"]').each(function(){
454
-
455
- if ($(this).prop("checked") == true) {
456
-
457
- $( '.' + $(this).attr('id') ).css('display', 'table-row');
458
-
459
- } else {
460
-
461
- $( '.' + $(this).attr('id') ).css('display', 'none');
462
-
463
- }
464
-
465
- });
466
-
467
-
468
-
469
- });
470
-
471
- })(jQuery);
472
-
473
-
474
-
475
403
  ```

5

誤字

2018/04/16 09:44

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -86,6 +86,78 @@
86
86
 
87
87
 
88
88
 
89
+ ////sortableで一気にドラッグ
90
+
91
+ (function($){
92
+
93
+ $('.table tbody').selectable({
94
+
95
+ cancel: '.sort-handle, .ui-selected',
96
+
97
+ }).sortable({
98
+
99
+ placeholder: "ui-state-highlight",
100
+
101
+ axis: 'y',
102
+
103
+ opacity: 0.9,
104
+
105
+ items: "> tr",
106
+
107
+ handle: 'td, .sort-handle, .ui-selected',
108
+
109
+ helper: function(e, item){
110
+
111
+ if (!item.hasClass('ui-selected')){
112
+
113
+ item.parent().children('.ui-selected').removeClass('ui-selected');
114
+
115
+ item.addClass('ui-selected');
116
+
117
+ }
118
+
119
+ var selected = item.parent().children('.ui-selected').clone();
120
+
121
+ ph = item.outerHeight() * selected.length;
122
+
123
+ item.data('multidrag', selected).siblings('.ui-selected').remove();
124
+
125
+ return $('<tr/>').append(selected);
126
+
127
+ },
128
+
129
+ cursor: "move",
130
+
131
+ start: function(e, ui){
132
+
133
+ ui.placeholder.css({'height':ph});
134
+
135
+ },
136
+
137
+ stop: function(e, ui){
138
+
139
+ var selected = ui.item.data('multidrag');
140
+
141
+ ui.item.after(selected);
142
+
143
+ ui.item.remove();
144
+
145
+ selected.removeClass('ui-selected');
146
+
147
+ $(selected).children("td").removeClass('ui-selected');
148
+
149
+ },
150
+
151
+ update: function(e, ui){
152
+
153
+ console.log("updated !!");
154
+
155
+ }
156
+
157
+ });
158
+
159
+ })(jQuery);
160
+
89
161
 
90
162
 
91
163
  /******************************

4

誤字

2018/04/16 09:43

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- (ドラッグで移動した行を保存するのではなく、チェックボックスで行を追加しています。なのでその状態が保存できればいいと思い、「jquery-ui.min.js」を採用しただけなので。)
19
+ (ドラッグで移動した行を保存するのではなく、チェックボックスで行を追加しています。なのでその状態が保存できればいいと思い、「jquery-ui.min.js」を採用しただけなので、ドラッグなどは不要なのです。)
20
20
 
21
21
 
22
22
 

3

誤字

2018/04/16 09:37

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- (ドラッグで移動した行を保存するのではなく、別の方法で行を追加しています。なのでそが保存できればいいと思い、「jquery-ui.min.js」を採用しただけなので。)
19
+ (ドラッグで移動した行を保存するのではなく、チェックボックスで行を追加しています。なのでその状態が保存できればいいと思い、「jquery-ui.min.js」を採用しただけなので。)
20
20
 
21
21
 
22
22
 
@@ -24,21 +24,17 @@
24
24
 
25
25
 
26
26
 
27
- ###補足
28
-
29
-
30
-
31
- ちなみに、このページ([https://jqueryui.com/download/](https://jqueryui.com/download/))に「jquery-ui.min.js」のカスタムダウンロードがありました。
32
-
33
-
34
-
35
- ここから「Sortable.min.js」だけをダウンロードして使ってみましたが、他のjQueryまで作動してくれなくなってしまったので、別のものだと思うのですが…見当がつきません。
36
-
37
-
38
-
39
27
  ###追記
40
28
 
29
+ チェックボックスによって行の表示が切り替わり、表示されるときは常にテーブルの上に表示されるようになっています。
30
+
31
+
32
+
33
+ その表示切替機能とcookie保存機能のあたりを次に追記いたします。
34
+
35
+
36
+
41
- 現状のjQueryのcookie保存まわりを追記致します。長くなってしまって申し訳ございません。
37
+ 長くなってしまって申し訳ございません。
42
38
 
43
39
  ```javascript
44
40
 

2

誤字

2018/04/16 09:36

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
 
6
6
 
7
- 一応機能はできたのですが、行を多くするとやたらと重くなり困っています。
7
+ 一応機能はできたのですが、行を多く(300行ほど)するとやたらと重くなり困っています。
8
8
 
9
9
 
10
10
 

1

追記

2018/04/16 09:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -33,3 +33,375 @@
33
33
 
34
34
 
35
35
  ここから「Sortable.min.js」だけをダウンロードして使ってみましたが、他のjQueryまで作動してくれなくなってしまったので、別のものだと思うのですが…見当がつきません。
36
+
37
+
38
+
39
+ ###追記
40
+
41
+ 現状のjQueryのcookie保存まわりを追記致します。長くなってしまって申し訳ございません。
42
+
43
+ ```javascript
44
+
45
+ /******************************
46
+
47
+ /* jquery.ui.min.jsを使った機能
48
+
49
+ *******************************/
50
+
51
+
52
+
53
+ ////テーブルの順序をcookie保存
54
+
55
+ (function($){
56
+
57
+ $(function() {
58
+
59
+ $(".sortable").sortable();
60
+
61
+ $(".sortable").disableSelection();
62
+
63
+ $('body').on("click",'.save',function(){
64
+
65
+ var updateArray = $(".sortable").sortable("toArray").join(",");
66
+
67
+ $.cookie("sortable", updateArray, {expires: 30});
68
+
69
+
70
+
71
+ });
72
+
73
+ if($.cookie("sortable")) {
74
+
75
+ var cookieValue = $.cookie("sortable").split(",").reverse();
76
+
77
+ $.each(
78
+
79
+ cookieValue,
80
+
81
+ function(index, value) {$('#'+value).prependTo(".sortable");}
82
+
83
+ );
84
+
85
+ }
86
+
87
+ });
88
+
89
+ })(jQuery);
90
+
91
+
92
+
93
+
94
+
95
+ /******************************
96
+
97
+ /* jquery.cookie.jsを使った機能
98
+
99
+ *******************************/
100
+
101
+
102
+
103
+ ////チェックの有無をcookie保存
104
+
105
+ (function($){
106
+
107
+ $(function(){
108
+
109
+
110
+
111
+ //supportのチェック項目を保存
112
+
113
+ if($.cookie("chk_support_selected_value")){
114
+
115
+ $.cookie("chk_support_selected_value").split(",").forEach(function(v){
116
+
117
+ $('input[name=chk_support][value='+v+']').prop('checked',true);
118
+
119
+ });
120
+
121
+ }
122
+
123
+ $('.save').on("click",function(){
124
+
125
+ var v=$('input[name=chk_support]:checked').map(function(){return $(this).val()}).get().join(",");
126
+
127
+ if(v===""){
128
+
129
+ $.removeCookie("chk_support_selected_value");
130
+
131
+ }else{
132
+
133
+ $.cookie("chk_support_selected_value",v);
134
+
135
+ }
136
+
137
+ });
138
+
139
+ //support(未指定の場合)のチェック項目を保存
140
+
141
+ if($.cookie("chk_support_un_selected_value")){
142
+
143
+ $.cookie("chk_support_un_selected_value").split(",").forEach(function(v){
144
+
145
+ $('input[name=chk_support_un][value='+v+']').prop('checked',true);
146
+
147
+ });
148
+
149
+ }
150
+
151
+ $('.save').on("click",function(){
152
+
153
+ var v=$('input[name=chk_support_un]:checked').map(function(){return $(this).val()}).get().join(",");
154
+
155
+ if(v===""){
156
+
157
+ $.removeCookie("chk_support_un_selected_value");
158
+
159
+ }else{
160
+
161
+ $.cookie("chk_support_un_selected_value",v);
162
+
163
+ }
164
+
165
+ });
166
+
167
+
168
+
169
+ //pointのチェック項目を保存
170
+
171
+ if($.cookie("chk_point_selected_value")){
172
+
173
+ $.cookie("chk_point_selected_value").split(",").forEach(function(v){
174
+
175
+ $('input[name=chk_point][value='+v+']').prop('checked',true);
176
+
177
+ });
178
+
179
+ }
180
+
181
+ $('.save').on("click",function(){
182
+
183
+ var v=$('input[name=chk_point]:checked').map(function(){return $(this).val()}).get().join(",");
184
+
185
+ if(v===""){
186
+
187
+ $.removeCookie("chk_point_selected_value");
188
+
189
+ }else{
190
+
191
+ $.cookie("chk_point_selected_value",v);
192
+
193
+ }
194
+
195
+ });
196
+
197
+
198
+
199
+ //volumeのチェック項目を保存
200
+
201
+ if($.cookie("chk_volume_selected_value")){
202
+
203
+ $.cookie("chk_volume_selected_value").split(",").forEach(function(v){
204
+
205
+ $('input[name=chk_volume][value='+v+']').prop('checked',true);
206
+
207
+ });
208
+
209
+ }
210
+
211
+ $('.fluits_save').on("click",function(){
212
+
213
+ var v=$('input[name=chk_volume]:checked').map(function(){return $(this).val()}).get().join(",");
214
+
215
+ if(v===""){
216
+
217
+ $.removeCookie("chk_volume_selected_value");
218
+
219
+ }else{
220
+
221
+ $.cookie("chk_volume_selected_value",v);
222
+
223
+ }
224
+
225
+ });
226
+
227
+
228
+
229
+ //fluitsのチェック項目を保存
230
+
231
+ if($.cookie("chk_fluits_selected_value")){
232
+
233
+ $.cookie("chk_fluits_selected_value").split(",").forEach(function(v){
234
+
235
+ $('input[name=chk_fluits][value='+v+']').prop('checked',true);
236
+
237
+ });
238
+
239
+ }
240
+
241
+ $('.save').on("click",function(){
242
+
243
+ var v=$('input[name=chk_fluits]:checked').map(function(){return $(this).val()}).get().join(",");
244
+
245
+ if(v===""){
246
+
247
+ $.removeCookie("chk_fluits_selected_value");
248
+
249
+ }else{
250
+
251
+ $.cookie("chk_fluits_selected_value",v);
252
+
253
+ }
254
+
255
+ });
256
+
257
+
258
+
259
+ });
260
+
261
+ })(jQuery);
262
+
263
+
264
+
265
+
266
+
267
+ /*******************************
268
+
269
+ /* 初回読み込み時の自動チェック機能
270
+
271
+ *******************************/
272
+
273
+
274
+
275
+ //保存クリック履歴ないときのチェック
276
+
277
+ (function($){
278
+
279
+ $(document).ready(function(){
280
+
281
+ if($.cookie("access") == undefined) {
282
+
283
+ //保存クリック履歴ないときのsupportチェック
284
+
285
+ $('#support1').prop("checked", true);
286
+
287
+ //保存クリック履歴ないときのpointチェック
288
+
289
+ $('#point1').prop("checked", true);
290
+
291
+ //保存クリック履歴ないときのvolumeチェック
292
+
293
+ $('#volume1').prop("checked", true);
294
+
295
+ $('#volume1_un').prop("checked", true);
296
+
297
+ //保存クリック履歴ないときのfluitsチェック
298
+
299
+ $('#apple, #banana, #grape').prop("checked", true);
300
+
301
+ }
302
+
303
+ });
304
+
305
+
306
+
307
+ //保存クリック履歴有無判別のためのcookie保存
308
+
309
+ $('body').on("click",'.save',function(){
310
+
311
+ $.cookie("access","hello", { expires: 365 , path: "/" });
312
+
313
+ });
314
+
315
+
316
+
317
+ })(jQuery);
318
+
319
+
320
+
321
+
322
+
323
+ /*******************************
324
+
325
+ /* 読み込み時の自動表示機能
326
+
327
+ *******************************/
328
+
329
+
330
+
331
+ (function($){
332
+
333
+ $(document).ready(function () {
334
+
335
+
336
+
337
+ //support表示切替
338
+
339
+ $('input[name="chk_support"]').each(function(){
340
+
341
+ if ($(this).prop("checked") == true) {
342
+
343
+ $( '.' + $(this).attr('id') ).css('display', 'table-cell');
344
+
345
+ } else {
346
+
347
+ $( '.' + $(this).attr('id') ).css('display', 'none');
348
+
349
+ }
350
+
351
+ });
352
+
353
+ $('input[name="chk_support_un"]').each(function(){
354
+
355
+ if ($(this).prop("checked") == true) {
356
+
357
+ $('.tablerow thead tr th, .tablerow tbody tr td').css('display', 'table-cell');
358
+
359
+ }
360
+
361
+ });
362
+
363
+
364
+
365
+ //point表示切替
366
+
367
+ $('input[name="chk_point"]').each(function(){
368
+
369
+ if ($(this).prop("checked") == true) {
370
+
371
+ $( '.' + $(this).attr('id') ).css('display', 'table-row');
372
+
373
+ } else {
374
+
375
+ $( '.' + $(this).attr('id') ).css('display', 'none');
376
+
377
+ }
378
+
379
+ });
380
+
381
+
382
+
383
+ //fluits表示切替
384
+
385
+ $('input[name="chk_fluits"]').each(function(){
386
+
387
+ if ($(this).prop("checked") == true) {
388
+
389
+ $( '.' + $(this).attr('id') ).css('display', 'table-row');
390
+
391
+ } else {
392
+
393
+ $( '.' + $(this).attr('id') ).css('display', 'none');
394
+
395
+ }
396
+
397
+ });
398
+
399
+
400
+
401
+ });
402
+
403
+ })(jQuery);
404
+
405
+
406
+
407
+ ```