DatePicker 사용때문에 질문 드립니다.
본문
위에 링크에 스킨을 사용중 입니다.
다름이 아니라 지출결의서 글쓰기의 비고항목에 DatePicker을 적용했는데
항목추가를 하면 추가한 항목은 DatePicker이 안 나옵니다.
추가항목도 나오게 할려면 어떻게 해야하나요?
<script>
var array = <?php echo json_encode($dataA); ?>; // DB 값
var calculate = []; // 계산에 필요한 정보를 담을 배열
var supply = []; // 합게금액
$(document).ready(function() {
/**
* 동적테이블 플러그인 시작.
* @param { string } autoTabId 엔터키 입력시 커서(focus) 자동 이동 적용될 영역의 className 또는 IdNmae
* @param { string } selector 동적테이블의 <tbody>의 className 또는 IdNmae
* @param { string } delBtn 테이블 ROW 삭제버튼의 ClassName
* @param { string } unique 자료의 고유번호 선택자(id_no, wr_id, no, ids... 등등..)
* @param { string } delUrl 자료삭제 URL (행 자료삭제)
* @param { string } autoTabclass 엔터키입력시 자동으로 포커스 이동 가능 ClassName
* @param { Object } dbData (배열값) DB 데이타 배열.
* @param { Array } items (배열값) 동적테이블을 구성하고 있는 요소들의 속성.
* @param { function } delSucess 행 삭제시 추가로 실행될 사용자 함수
*/
rumiTable.rumiLoad({
autoTabId : "#doc_zone",
selector: ".work_item",
delBtn : ".delItemBtn",
unique : ".id_no",
delUrl : cfg.board_skin_url+"/ajax.delete.php?bo_table="+cfg.bo_table,
autoTabclass : "input.insTab",
dbData : array,
items : [
{ selector:'doc_sub', type:'text', number:false },
{ selector:'id_no', type:'text', number:false },
{ selector:'doc_cnt', type:'text', number:true },
{ selector:'doc_unit', type:'text', number:true },
{ selector:'doc_cost', type:'text', number:true },
{ selector:'doc_etc', type:'text', number:false }
],
// row 삭제시 실행될 사용자 함수
delSuccess : function(e){
// 삭제성공시 사용자 추가 함수를 실행할 수 있습니다.
// 선택한 행 삭제후 실행되며, 삭제된 이후의 행이 한단계씩 올라가므로 계산에 필요한 배열을 초기화후 재배열
var tr_cnt = $(".doc_cost").length;
calculate = []; // 계산에 필요한 배열 초기화
for(i=0; i < tr_cnt; i++) {
var val = $(".doc_cost").val() * 1;
if(val > 0) {
calCulate(i);
}
}
}
});
$(".work_item").on("keyup", ".doc_cnt, .doc_unit", function(event) {
var idx = $(this).index('.doc_cnt');
if(idx < 0) {
idx = $(this).index('.doc_unit');
}
calCulate(idx);
});
array_sum(array);
});
/**
* 입력한 금액을 배열에 추가 ( 주의 : 서식파일에 포함되어야 합니다.)
* @param {Number} idx 행번호
*/
function calCulate(idx){
var doc_cnt = $('.doc_cnt').eq(idx).val() * 1;
var doc_unit = $('.doc_unit').eq(idx).val() * 1;
// 입력한 금액을 배열로 담는다.
calculate[idx] = {
doc_cnt : doc_cnt,
doc_unit: doc_unit,
doc_cost: doc_cnt * doc_unit
};
$(".doc_cost").eq(idx).val(doc_cnt * doc_unit);
supply[idx]= calculate[idx].doc_cost; // 필드별 합계
sum_supply = supply_sum(supply); // 소계의 합계
$(".cost_sum").val(number_format(sum_supply));
$(".cost_sum_txt").text(number_format(sum_supply));
}
/************************** DatePicker 추가 ***********************/
$(document).ready(function() {
$(".doc_etc").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
showButtonPanel: true,
yearRange: "c-10:c+5",
minDate: "",
maxDate: "",
beforeShow: function() {
setTimeout(function(){
$('.ui-datepicker').css('z-index', 100);
}, 0);
}
});
});
/************************** DatePicker 추가 ***********************/
</script>
<table>
<colgroup>
<col width="6%" />
<col width="*" />
<col width="7%" />
<col width="12%" />
<col width="12%" />
<col width="20%" />
<col width="5%" />
</colgroup>
<thead>
<tr>
<th>순번</th>
<th>적요</th>
<th>수량</th>
<th>단가</th>
<th>소계</th>
<th>비고</th>
<th>삭제</th>
</tr>
</thead>
<tbody class="work_item">
<tr>
<td class="del_btn"></td>
<td>
<input type="text" name="doc_sub[]" class="doc_sub insTab" value="" />
<input type="hidden" name="id_no[]" class="id_no" value="" />
</td>
<td><input type="text" name="doc_cnt[]" class="doc_cnt insTab td_center" value="" /></td>
<td><input type="text" name="doc_unit[]" class="doc_unit insTab td_center" value="" /></td>
<td><input type="text" name="doc_cost[]" class="doc_cost td_right" value="" readonly /></td>
<td><input type="text" name="doc_etc[]" class="doc_etc insTab" value="" /></td>
<td class="del_btn delItemBtn hand"></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">합계</th>
<th class="tbl_sum"><input type="hidden" name="cost_sum" class="cost_sum" value="" /><span class="cost_sum_txt"></span></th>
<th colspan="2"></th>
</tr>
</tfoot>
</table>
<div class="addItemBtn">
<button type="button" class="add_five" onclick="rumiTable.add_item(5);">입력항목 5개 추가</button>
</div>
답변 2
돔형태로 추가할 경우 제이쿼리를 재호출 시켜줘야합니다
구글에 dom 데이터피커 이런식으로 한번 검색해보세요
현재 코드상 add_item 함수부분이 보이지 않는데
해당 함수에서 추가된 노드마다 .datepicker를 재호출 해주셔야될거에요
말하신 코드를 찾아봤는데 어려워서 잘 모르겠네요... ^^;;
찾은 코드를 댓글로 적어 놨는데 이게 맞나요?
append 시키는부분이 dom으로 노드를 추가하는부분인데
해당 노드안에 datepicker를 부를 input과 class 또는 id를 넣어주실텐데
해당 노드에 .datepicker를 정의해줘서
추가된 노드에도 제이쿼리가 호출되도록 해주셔야됩니다
쉽게 생각하시면
최초에 정의한 데이터피커는 페이지가 호출될때만 실행이 됩니다
그러니 나중에 추가된 노드에는 적용이 안되겠죠?
그 나중에 추가된 노드에도 제이쿼리를 적용시켜줘야한다는 뜻입니다
그렇기때문에 노드를 추가한후 데이터피커를 한번 더 호출시켜보세요
관련된 자료는 구글에 찾아보면 많이 나오니 공부하시길!
알려주시는데로 검색헤서 아래 처럼 datepicker 나오는거 까지는 성공했는데 날짜를 선택하면 첫번째 인풋박스만 계속 변경 되네요 ㅠ
어떻게 방법이 없을까요? 몆일 동안 해봐도 잘 안되네요 ㅠㅠ
var add_item = function(rows) {
//마지막번호 구하기 (마지막줄 td의 텍스트)
var idx = parseInt($(tId+" > tr:last > td:eq(0)").text());
if(!idx) {
idx=0;
var del = "Y"; // 자료가 없을 경우 마지막 줄을 삭제하기 위함.
}
for(i=0; i < rows; i++) {
$(tId).append("<tr>" + $(tId+" > tr:last").html() + "</tr>"); //마지막 tr 을 복사하여 마지막에 추가
$(tId+" > tr:last input, "+tId+" > tr:last select").not("input[type=checkbox]").val(""); // 추가한 줄의 input, select 초기화
$(tId+" > tr:eq("+idx+") > td:eq(0)").text((idx + 1)); // 줄번호 추가.
$(delBtn).eq(idx).attr("onclick","rumiTable.delRow("+idx+")").html("<i class='fa fa-trash-o' aria-hidden='true'></i>");
idx++;
/* 추가 */
$(document).find(".doc_etc").removeClass('hasDatepicker').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
showButtonPanel: true,
yearRange: "c-10:c+5",
minDate: "",
maxDate: "",
beforeShow: function() {
setTimeout(function(){
$('.ui-datepicker').css('z-index', 100);
}, 0);
}
});
/* 추가 */
};
if(del=="Y") {
$(tId+" > tr:last").remove(); // 자료불러올때 마지막 추가로 복사된줄 삭제.
};
// 엔터키로 이동해야되는 요소 배열 생성.(input, select...)
enterTab();
if(numberClass) {
$(numberClass).number(true, 0);
}
};
답변을 작성하시기 전에 로그인 해주세요.
