1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
|
<?php
include("./_common.php");
header("Content-type:text/html;charset=utf-8");
$sql = "set names utf8";
mysql_query($sql,$connect_web);
?>
<style>
.txt14{font-size: 14px;}
.txt13{font-size: 13px;}
.block{display: block;}
.float_l{float: left;}
.float_r{float: right;}
.align_c{text-align: center;}
.bold{font-weight: bold;}
.mr5{margin-right: 5px !important;}
.table_ttl{background: #EEEEEE;border-bottom: 1px solid #BFBFBF;line-height: 30px;height: 30px;}
.cate.on p, .order.on p, .last.on p{font-weight: 600;color: #000;}
.cate_set_box .text{color: #555555;}
.cate_set_box ul li{width: 100%;cursor: pointer;}
.cate p{padding-left: 20px;font-size: 14px;height: 28px;line-height: 28px;white-space: nowrap;}
.order p{padding-left: 40px;font-size: 13px;height: 20px;line-height: 20px;position: relative;white-space: nowrap;}
.last p{padding-left: 50px;font-size: 12px;height: 20px;line-height: 20px;position: relative;white-space: nowrap;}
/*수정중*/
.order p::before{content: '';position: absolute;top: 5px;left: 32px;width: 5px;height: 5px;border-left: 1px solid #555;border-bottom: 1px solid #555;}
.last p::before{content: '';position: absolute;top: 5px;left: 42px;width: 5px;height: 5px;border-left: 1px solid #555;border-bottom: 1px solid #555;}
.cate_set_btn{display: flex;justify-content: space-between;margin-top: 4px;}
.cate_set_btn li{width: 38px;height: 20px;line-height: 18px;border: 1px solid #D2D2D2;font-size: 12px;}
.set_ul::after{content: '';display: block;clear: both;}
/* .set_li:first-child{margin-top: 55px;} */
.set_li:not(:first-child){margin-top: 36px;}
.set_li:last-child{margin-bottom: 60px;}
.set_li input[type="text"]{height: 32px;border: 1px solid #BFBFBF;border-radius: 0px;}
.set_li p{line-height: 14px;margin-bottom: 12px;}
.cate_color_box::after{content: '';display: block;clear: both;}
#cate_link + label{width: 40px;height: 25px;line-height: 25px;background: #E5E5E5;}
.cate_link_box::after{content: '';display: block;clear: both;}
.only_file_save_box{margin-top: 18px;}
#only_file_save{vertical-align: middle;}
/* #only_file_save + label{margin-top: 18px;font-size: } */
.cate_add, .order_add, .last_add{width: 40px;height: 25px;line-height: 25px;background: #313131;color: #fff !important;border-radius: 4px;}
.cate_update, .cate_del, .order_update, .order_del, .last_update, .last_del{width: 40px;height: 25px;line-height: 25px;background: #E5E5E5;border-radius: 4px;}
/* .colorPickSelector{background: #fff;}
#oncolor, #offcolor{margin-left: 7px;width: 14px;height: 14px;border: 1px solid #333;font-size: 0px;vertical-align:middle} */
label[for="cate_link"]::before{background: none !important;}
/*대분류 설정*/
.cate_set_table, .order_set_table{table-layout: fixed;width: 100%;margin-top: 20px;}
.cate_set_table td, .order_set_table td{padding: 10px;padding-left: 10px !important;box-sizing: border-box;border: 1px solid #dadada;}
.cate_set_table tr td:first-child, .order_set_table tr td:first-child{width: 150px;background: #f5f5f5;color: #2f2f2f;}
.cate_set_table input, .order_set_table input{height: 25px;width: 100%;border: 1px solid #DADADA !important;}
.cate_set_table textarea{height: 80px;border: 1px solid #DADADA;width: 100%;}
.upload_name{width: calc(100% - 78px) !important;height: 25px;box-sizing: border-box;border: 1px solid #DADADA;padding-left: 8px;}
.file_find{display: block;width: 78px;height: 25px;line-height: 25px;background: #DADADA;color: #787878;text-align: center;cursor: pointer;}
/*소분류 설정*/
</style>
<?php
// 카테고리 - 대
$sql1 = "SELECT * FROM mBoard_menual_cate1 AS a ORDER BY idx ASC";
$res1 = mysql_query($sql1,$connect_web);
?>
<div id="wrap" id="container_wrap" style="width: 100%;box-sizing: border-box;overflow: auto;">
<form name='cate_form' method='post' onsubmit='return false;'>
<input type="hidden" name="type" value="cate_save">
<div class="setting_content" style="display: flex;justify-content: space-between;padding: 40px 20px;">
<div class="float_l" style="width: 212px;height: 100%;">
<div class="cate_set_box" style="width: 100%;height: 411px;box-sizing: border-box;border: 1px solid #BFBFBF;">
<h3 class="table_ttl text14 align_c">분류</h3>
<div style="overflow: auto;height: calc(100% - 31px);">
<?php
while($cat1 = mysql_fetch_array($res1)) {
?>
<ul class="<?php echo $cat1['idx']; ?>">
<li class="cate pointer">
<input type="hidden" name="midxs[]" value="<?php echo $cat1['idx']; ?>">
<input type="hidden" name="mtypes[]" value="cat1_upt">
<input type="hidden" name="mnames[]" value="<?php echo $cat1['name']; ?>">
<p class="text"><?php echo $cat1['name']; ?></p>
</li>
<?php
$cat2_sql = "SELECT b.*
FROM mBoard_menual_cate2 AS b
WHERE b.pidx = '{$cat1[idx]}'
ORDER BY b.idx ASC";
$cat2_res = mysql_query($cat2_sql,$connect_web);
while($cat2_info = mysql_fetch_array($cat2_res)) {
?>
<li class="order pointer" id="<?php echo $cat2_info['idx']; ?>">
<input type="hidden" name="sidxs[]" value="<?php echo $cat2_info['idx']; ?>">
<input type="hidden" name="pmidxs[]" value="<?php echo $cat2_info['pidx']; ?>">
<input type="hidden" name="stypes[]" value="cat2_upt">
<input type="hidden" name="snames[]" value="<?php echo $cat2_info['name']; ?>">
<p class="text"><?php echo $cat2_info['name']; ?></p>
</li>
<?php
$cat3_sql = "SELECT c.*
FROM mBoard_menual_cate3 AS c
WHERE c.pidx = '{$cat2_info[idx]}'
ORDER BY c.idx ASC";
$cat3_res = mysql_query($cat3_sql,$connect_web);
while($cat3_info = mysql_fetch_array($cat3_res)) {
?>
<li class="last pointer">
<input type="hidden" name="lidxs[]" value="<?php echo $cat3_info['idx']; ?>">
<input type="hidden" name="spmidxs[]" value="<?php echo $cat3_info['pidx']; ?>">
<input type="hidden" name="ltypes[]" value="cat3_upt">
<input type="hidden" name="lnames[]" value="<?php echo $cat3_info['name']; ?>">
<p class="text"><?php echo $cat3_info['name']; ?></p>
</li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
</div>
</div>
<div class="set_input_list float_l" style="width: calc(100% - 250px);">
<ul class="set_ul">
<li class="set_li width_full">
<span class="bold txt14">대분류 설정</span>
<a class="cate_del block txt13 align_c float_r">삭제</a>
<a class="cate_update block txt13 align_c float_r mr5">수정</a>
<a class="cate_add block txt13 align_c float_r mr5">추가</a>
<table class="cate_set_table">
<tbody>
<tr>
<td nowrap>대분류 명</td>
<td><input type="hidden" name="sel_type_code" value=""><input type="text" value="" name="ordername" id="ordername" class="float_l txt14" style="box-sizing: border-box;padding-left: 10px;"></td>
</tr>
</tbody>
</table>
</li>
<li class="set_li width_full">
<span class="bold txt14">중분류 설정</span>
<a class="order_del block txt13 align_c float_r">삭제</a>
<a class="order_update block txt13 align_c float_r mr5">수정</a>
<a class="order_add block txt13 align_c float_r mr5">추가</a>
<table class="order_set_table">
<tbody>
<tr>
<td>중분류 명</td>
<td><input type="hidden" name="sel_type_code2" value=""><input type="text" value="" name="ordername_sub" id="ordername_sub" class="float_l mr5 txt14" style="box-sizing: border-box;padding-left: 10px;"></td>
</tr>
</tbody>
</table>
</li>
<li class="set_li width_full">
<span class="bold txt14">소분류 설정</span>
<a class="last_del block txt13 align_c float_r">삭제</a>
<a class="last_update block txt13 align_c float_r mr5">수정</a>
<a class="last_add block txt13 align_c float_r mr5">추가</a>
<table class="order_set_table">
<tbody>
<tr>
<td>소분류 명</td>
<td><input type="text" value="" name="ordername_last" id="ordername_last" class="float_l mr5 txt14" style="box-sizing: border-box;padding-left: 10px;"></td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
</div>
</form>
</div>
<script>
$(function(){
$(document).on('click', ".cate_set_box li", function(){ // 분류 선택 및 선택 해제(동적으로 생성된 태그에도 해당 이벤트 적용되야 함)
var num = $(this).parent().attr('class'); //클릭한 분류의 ul 번호
$(".cate_set_box li").removeClass('on');
$(this).addClass('on');
if($(this).hasClass('cate')){
var intext = $(this).children('.text').text();
var cate_id = $(this).closest("ul").attr("class");
$('#ordername_sub').val("");
$('#ordername').val(intext);
$("input[name='sel_type_code']").val(cate_id); // 선택한 카테고리의 아이디
} else if($(this).hasClass('order')){
var intext = $(this).children('.text').text();
var ptext = $(this).closest("ul").find(".cate .text").text();
var cate_id = $(this).attr("id");
var cate_id_ul = $(this).closest("ul").attr("class");
$('#ordername').val(ptext); // 카테고리명
$('#ordername_sub').val(intext); // 주문종류명
$("input[name='sel_type_code']").val(cate_id_ul); // 선택한 카테고리의 아이디
$("input[name='sel_type_code2']").val(cate_id); // 선택한 카테고리의 아이디
} else if($(this).hasClass('last')){
var intext = $(this).children('.text').text();
var ptext = $(this).closest("ul").find(".cate .text").text();
var spmidx = $(this).find("input[name='spmidxs[]']").val();
var otext = $(this).closest("ul").find(".order#"+spmidx+" .text").text();
$('#ordername').val(ptext); // 카테고리명
$('#ordername_sub').val(otext); // 주문종류명
$('#ordername_last').val(intext); // 주문종류명
}
});
$("#ordername_sub").keypress(function(){ // 엔터시
if(event.keyCode==13){
$(".order_add").click();
}
});
$("#ordername_last").keypress(function(){ // 엔터시
if(event.keyCode==13){
$(".last_add").click();
}
});
$('.cate_set_box ul:first-child li:first-child').click(); //초기값
/* 대분류 설정 */
$(".cate_add").click(function(){ //대분류의 단어로 대분류 추가
var intext = $("#ordername").val(); //현재 입력한 카테고리 이름
var link = $("input[name='links[]']").val(); // 링크
var script = $("#description").val(); // 설명
if(intext == "") { alert("추가하실 대분류명을 입력해주세요."); return; }
// 1)추가하려는 카테고리 이름이 이미 존재하는 경우 경고창 뜨고, 아닌 경우 아래 코드 실행(저장 시에 체크함)
// 2)분류추가 내 목록에 카테고리 추가
$(".cate_set_box li").removeClass('on');
var html = "<ul>";
html += "<li class='cate pointer on'>";
html += "<input type='hidden' name='mtypes[]' value='cat1_ins'>";
html += "<input type='hidden' name='mnames[]' value='"+intext+"'>";
html += "<p class='text'>"+intext+"</p>";
html += "</li>";
html += "</ul>";
$('.cate_set_box div').append(html);
$("input[name='sel_type_code']").val(""); // 선택한 카테고리의 아이디
});
$(".cate_update").click(function(){ //분류에 선택되어있는 대분류를 대분류의 단어로 변경
var intext = $("#ordername").val(); //현재 입력된 카테고리 이름
$(".cate_set_box li.cate.on .text").text(intext);
$(".cate_set_box li.cate.on").find("input[name='mtypes[]']").val("cat1_upt");
$(".cate_set_box li.cate.on").find("input[name='mnames[]']").val(intext);
});
$(".cate_del").click(function(){ //분류에 선택되어있는 대분류 삭제
var intext = $("#ordername").val(); // 대분류명 가져오기
if(confirm(intext + ' 대분류를 정말 삭제하시겠습니까?')){
$(".cate_set_box li.cate.on .text").remove(); //목록에 선택된 대분류
$(".cate_set_box li.cate.on").find("input[name='mtypes[]']").val("cat1_del");
$(".cate_set_box li.cate.on").closest("ul").find("li").not("li.cate").remove();
$(".cate_set_box li").removeClass("on");
};
});
/* 카테고리 설정 끝 */
/* 대분류 내 중분류 설정 */
$(".order_add").click(function(){ //중분류의 단어로 중분류 추가
var cate_id = $("input[name='sel_type_code']").val();
var intext = $("#ordername_sub").val();
if(cate_id == "") { alert("추가하실 중분류의 대분류를 먼저 선택해주세요.\n신규 카테고리일 경우, 저장을 먼저 해주시기 바랍니다."); return; }
if(intext == "") { alert("추가하실 중분류를 입력해주세요."); return; }
$(".cate_set_box li").removeClass('on');
var html = "<li class='order pointer on'>";
html += "<input type='hidden' name='pmidxs[]' value='"+cate_id+"'>";
html += "<input type='hidden' name='stypes[]' value='cat2_ins'>";
html += "<input type='hidden' name='snames[]' value='"+intext+"'>";
html += "<p class='text'>"+intext+"</p>";
html += "</li>";
$('.cate_set_box ul.'+cate_id).append(html);
$("#ordername_sub").val("");
$("#ordername_sub").focus();
});
$(".order_update").click(function(){ //분류에 선택되어있는 중분류를 중분류의 단어로 변경
var cate_id = $("input[name='sel_type_code']").val();
var intext = $("#ordername_sub").val();
if(cate_id == "") { alert("추가하실 중분류의 대분류를 먼저 선택해주세요."); return; }
if(intext == "") { alert("수정하실 중분류를 선택해주세요."); return; }
$(".cate_set_box li.order.on").children().text(intext);
$(".cate_set_box li.order.on").find("input[name='stypes[]']").val("cat2_upt");
$(".cate_set_box li.order.on").find("input[name='snames[]']").val(intext);
});
$(".order_del").click(function(){ //분류에 선택되어있는 중분류 삭제
var text = $("#ordername_sub").val();
if(confirm(text + ' 중분류를 정말 삭제하시겠습니까?')){
$(".cate_set_box li.order.on .text").remove(); //목록에 선택된 대분류
$(".cate_set_box li.order.on").find("input[name='stypes[]']").val("cat2_del");
$(".cate_set_box li").removeClass("on");
$("input[name='ordername_sub']").val("");
};
});
/* 대분류 내 중분류 설정 끝 */
/* 중분류 내 소분류 설정 */
$(".last_add").click(function(){ //소분류의 단어로 소분류 추가
var cate_id_ul = $("input[name='sel_type_code']").val();
var cate_id = $("input[name='sel_type_code2']").val();
var intext = $("#ordername_last").val();
if(cate_id == "") { alert("추가하실 소분류의 중분류를 먼저 선택해주세요.\n신규 카테고리일 경우, 저장을 먼저 해주시기 바랍니다."); return; }
if(intext == "") { alert("추가하실 소분류를 입력해주세요."); return; }
$(".cate_set_box li").removeClass('on');
var html = "<li class='last pointer on'>";
html += "<input type='hidden' name='spmidxs[]' value='"+cate_id+"'>";
html += "<input type='hidden' name='ltypes[]' value='cat3_ins'>";
html += "<input type='hidden' name='lnames[]' value='"+intext+"'>";
html += "<p class='text'>"+intext+"</p>";
html += "</li>";
$('.cate_set_box ul.'+cate_id_ul+' li#'+cate_id).append(html);
$("#ordername_last").val("");
$("#ordername_last").focus();
});
$(".last_update").click(function(){ //분류에 선택되어있는 소분류를 소분류의 단어로 변경
var cate_id = $("input[name='sel_type_code2']").val();
var intext = $("#ordername_last").val();
if(cate_id == "") { alert("추가하실 소분류의 중분류를 먼저 선택해주세요."); return; }
if(intext == "") { alert("수정하실 소분류를 선택해주세요."); return; }
$(".cate_set_box li.last.on").children().text(intext);
$(".cate_set_box li.last.on").find("input[name='ltypes[]']").val("cat3_upt");
$(".cate_set_box li.last.on").find("input[name='lnames[]']").val(intext);
});
$(".last_del").click(function(){ //분류에 선택되어있는 소분류 삭제
var text = $("#ordername_last").val();
if(confirm(text + ' 소분류를 정말 삭제하시겠습니까?')){
$(".cate_set_box li.last.on .text").remove(); //목록에 선택된 대분류
$(".cate_set_box li.last.on").find("input[name='ltypes[]']").val("cat3_del");
$(".cate_set_box li").removeClass("on");
$("input[name='ordername_last']").val("");
};
});
/* 대분류 내 소분류 설정 끝 */
});
</script>
|