var array = [{"id_no":1,"appDate":"2021-07-30","subject":"최고급 고양이 모래 일반형 무향","standard":"리터","qty":10,"unitPrice":10000,"sumPrice":100000},{"id_no":2,"appDate":"2021-07-30","subject":"베토나이트 고양이 모래","standard":"리터","qty":2,"unitPrice":50000,"sumPrice":100000},{"id_no":3,"appDate":"2021-07-30","subject":"고양이 두부 모래","standard":"리터","qty":2,"unitPrice":100000,"sumPrice":200000},{"id_no":4,"appDate":"2021-07-30","subject":"고양이 관절 보호 영양제","standard":"개","qty":10,"unitPrice":5000,"sumPrice":50000},{"id_no":5,"appDate":"2021-07-30","subject":"고양이 모래 활성탄","standard":"리터","qty":5,"unitPrice":40000,"sumPrice":200000}]; // DB 데이타
var calculate = []; // 계산에 필요한 정보를 담을 배열
var supply = []; // 합게금액
$(document).ready(function(){
/**
* 동적테이블 rumiTable
* @param { string } autoTabId 엔터키 입력시 커서(focus) 자동 이동 적용될 영역의 className 또는 IdNmae
* @param { string } selector 동적테이블의 의 CLASS 또는 ID
* @param { string } delBtn 테이블 ROW 삭제버튼의 ClassName
* @param { string } delText 테이블 ROW 에 표시할 삭제 TEXT
* @param { string } unique 자료의 고유번호 class 선택자 (id_no, wr_id, no, ids... 등등..)
* @param { string } delUrl 자료삭제 URL (행 자료삭제)
* @param { integer } initRow 초기 테이블 TR 수
* @param { integer } addRow 자료 수정시 자료 TR외 빈 TR 추가 수
* @param { string } autoTabclass 엔터키입력시 자동으로 포커스 이동 가능 ClassName
* @param { Object } dbData (배열값) DB 데이타 배열.
* @param { Array } items (배열값) 동적테이블을 구성하고 있는 요소들의 속성.
* - selector : 각 항목의 class
* - type : input, select, checkbox, radio
* - number : false, true ( true 이면 숫자에 3자리마다 콤마 표시 )
* @param { function } addRowafter 행이 추가될때마다 실행될 사용자 함수
* @param { function } delSucess 행 삭제시 추가로 실행될 사용자 함수
*/
rumiTable.rumiLoad({
autoTabId : '#work-item',
selector: '#work-item-tbl',
delBtn : '.delItemBtn',
delText : '',
unique : '.id_no',
delUrl : 'rumiTable.php',
initRow : 10,
addRow : 3,
autoTabclass : '.autoTab',
dbData : array,
items : [
{ selector: 'id_no', type: 'input', number: false },
{ selector: 'appDate', type: 'input', number: false },
{ selector: 'subject', type: 'input', number: false },
{ selector: 'standard', type: 'select', number: false },
{ selector: 'qty', type: 'input', number: true },
{ selector: 'unitPrice', type: 'input', number: true },
{ selector: 'sumPrice', type: 'input', number: true }
],
addRowafter : function(idx) {
// 작업입력칸이 한개 추가된후 실행되는 함수입니다. (5칸 추가시 5번 실행됨)
initLoadCalendar(); // 달력사용
},
delSuccess : function(idx) { // 단일 row 삭제시 실행될 사용자 함수
// 삭제성공시 사용자 추가 함수를 실행할 수 있습니다.
// 선택한 행 삭제후 실행되며, 삭제된 이후의 행이 한단계씩 올라가므로 계산에 필요한 배열을 초기화후 재배열
calculate = []; // 계산 관련배열 초기화
supply = []
var elems = document.querySelectorAll('.sumPrice');
var values = [].map.call(elems, function(obj, ix) {
calCulate(ix);
});
}
});
// 숫자 입력시 자동계산하기
$('#work-item').on('keyup', '.td-cal', function(e) {
var cls = e.currentTarget.classList || e.srcElement.classList || e.target.classList;
var idx = $(this).index('.'+cls[0]);
calCulate(idx)
});
array_sum(array);
});
/**
* 입력한 금액을 배열에 추가 ( 주의 : 서식파일에 포함되어야 합니다.)
* @param {Number} idx 행번호
*/
function calCulate(idx){
var subject = $('.subject').eq(idx).val();
var qty = $('.qty').eq(idx).val() * 1;
var unitPrice = $('.unitPrice').eq(idx).val() * 1;
var sumPrice = $('.qty').eq(idx).val() * $('.unitPrice').eq(idx).val();
calculate[idx] = {
qty: ( subject ? qty : 0 ), // 수량
unitPrice: ( subject ? unitPrice : 0 ), // 단가
sumPrice: ( subject ? sumPrice : 0 )// 공급가액
};
$('.sumPrice').eq(idx).val( (subject) ? sumPrice : '' ); // 수량 * 단가를 공급가액에 입력
supply[idx]= calculate[idx].sumPrice; // 공급가액만 합계배열에 추가
sum_supply = supply_sum(supply); // 공급가액의 합계
$('.total_amount').val(number_format(sum_supply));
$('.total-amount-txt').text(number_format(sum_supply));
}
/**
* 자료수정시 - 최초 1회 실행하여 테이블의 계산을 진행한다.
* @param {Array} arr db Data 배열
*/
function array_sum(arr) {
for(var idx in arr) {
calCulate(idx);
}
}
/**
* 합계 산출
* @param {Array} arr 특정 요소의 금액이 들어 있는 배열
*/
function supply_sum(arr){
return arr.reduce(function(a, b) {
return a + b;
}, 0);
}
/**
* 달력을 사용할 INPUT class에 'frm-calendar'을 추가하세요.
*/
function initLoadCalendar() {
// 달력적용할 input의 'ID'를 초기화
$(document).find('.frm-calendar').attr('id','');
// 달력적용할 input의 클랙스를 제거후 datepicker를 재 적용.
$(document).find('.frm-calendar').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);
}
});
}