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 데이터피커 이런식으로 한번 검색해보세요
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);
}
};
답변을 작성하시기 전에 로그인 해주세요.