JQGRID #3

function saveStock_out() {

    var obj_data = {}
    var data_list = $(".form-control");
    var list = [];

    var gu5 = String.fromCharCode(5);
    var check = 'Y';

    data_list.each(function (index, item) {
        obj_data[item.name] = $(item).val();
    });

    obj_data.stock_keywrod = stock_keyword;
    obj_data.keyword = keyword;
    obj_data.work_date = obj_data.work_date.replaceAll('-','');
    obj_data.list = list.join(gu5);


    console.log(obj_data);

    if (check == 'Y') {
        if (reason_ck_stock_out(obj_data)) {
            $.ajax({
                url: "/add_stock_out",
                type: "POST",
                data: obj_data,
                success: function (data) {
                    var msg = data.message;
                    console.log(data);
                    if (data.result == "NG") {
                        alert(data.msg);
                    } else {
                        alert(data.msg);
                        check_stock_out();
                        $("#stock_out_grid").trigger('reloadGrid');
                        $("#stock_out_modal").dialog("close");

                    }


                    // $("#dialog1").addClass( "hidden" )
                },
                error: function (request, status, error) {
                    alert("code = " + request.status + " message = " + request.responseText + " error = " + error)
                }
            })
        }
    }

}

1. 변수 및 객체 초기화:
   - `obj_data`: 빈 객체를 생성하여 데이터를 담을 준비를 합니다.
   - `data_list`: `.form-control` 클래스를 가진 요소들을 선택하여 데이터를 추출할 준비를 합니다.
   - `list`: 빈 배열을 생성하여 추후 데이터를 추가할 준비를 합니다.
   - `gu5`: ASCII 코드 5를 문자로 변환한 값으로, 데이터를 구분하기 위한 구분자입니다.
   - `check`: 초기값으로 'Y'를 가지는 변수입니다.

2. 데이터 추출:
   - `data_list.each()`: `data_list`에 포함된 각 요소에 대해 반복합니다.
   - `item.name`을 키로, `$(item).val()`을 값으로 하는 `obj_data` 객체를 구성합니다.

3. 데이터 가공:
   - `obj_data.stock_keyword`, `obj_data.keyword`: 기존 변수 `stock_keyword`와 `keyword` 값을 `obj_data` 객체에 추가합니다.
   - `obj_data.work_date`: `work_date` 값을 `-` 기호를 제거하여 업무 날짜 형식에 맞게 수정합니다.
   - `obj_data.list`: 빈 배열 `list`를 구분자 `gu5`를 사용하여 문자열로 변환한 뒤, `obj_data` 객체에 추가합니다.

4. 조건 확인 및 데이터 저장:
   - `check == 'Y'`: `check` 변수가 'Y'인 경우에만 조건을 수행합니다.
   - `reason_ck_stock_out()`: `obj_data` 객체를 전달하여 유효성을 확인하는 함수를 호출합니다.
   - `$.ajax()`: AJAX를 통해 서버로 데이터를 전송합니다.
     - `url`: "/add_stock_out" 경로로 데이터를 전송합니다.
     - `type`: POST 방식을 사용하여 데이터를 전송합니다.
     - `data`: `obj_data` 객체를 전송합니다.
     - `success`: 서버 응답이 성공적으로 도착한 경우 실행될 콜백 함수를 정의합니다.
     - `error`: 서버 요청이 실패한 경우 실행될 콜백 함수를 정의합니다.

5. 결과 처리:
   - 서버 응답이 성공적으로 도착한 경우:
     - `data.result` 값이 "NG"인 경우 `data.msg` 값을 알림창으로 표시합니다.
     - 그렇지 않은 경우 `data.msg` 값을 알림창으로 표시하고, `check_stock_out()` 함수를 호출하고, 화면을 업데이트합니다.

6. 에러 처리:
   - 서버 요청이 실패한 경우, 오류 메시지를 알림창으로 표시합니다.

이 코드는 주어진 데이터를 서버에 전송하여 저장하는 기능을 수행합니다. 필요한 데이터를 추출하고 가공한 뒤

, 유효성을 확인하여 서버로 전송합니다. 서버 응답에 따라 결과를 처리하고, 실패한 경우 오류를 처리합니다.

 

 

   data_list.each(function (index, item) {
        obj_data[item.name] = $(item).val();
    });

`data_list.each(function (index, item) { ... })`는 `data_list`에 포함된 각 요소에 대해 반복문을 실행하는 jQuery의 메서드입니다. 각 요소에 대해 지정된 콜백 함수가 호출됩니다. 콜백 함수는 두 개의 매개변수를 받습니다: `index`와 `item`.

- `index`: 반복문 실행 중 현재 요소의 인덱스입니다.
- `item`: 현재 반복되고 있는 요소 객체입니다.

따라서 `data_list.each()` 메서드를 통해 반복문이 실행될 때마다 콜백 함수가 호출되고, `item`은 현재 반복되고 있는 요소를 가리킵니다.

콜백 함수 내부의 코드 `obj_data[item.name] = $(item).val();`는 현재 요소의 `name` 속성 값을 키로, 해당 요소의 값(`$(item).val()`)을 값으로 가지는 객체 `obj_data`를 구성합니다. 즉, `obj_data` 객체에 데이터를 추가하는 역할을 합니다.

예를 들어, `data_list`에 `input` 요소들이 포함되어 있다면, `data_list.each()` 메서드는 `input` 요소를 하나씩 순회하면서 각 요소의 `name` 속성과 값(`$(item).val()`)을 `obj_data` 객체에 저장합니다. 이를 통해 사용자의 입력 데이터를 추출하여 `obj_data` 객체에 담을 수 있습니다.

종합적으로, `data_list.each()` 메서드는 `data_list`에 포함된 요소들을 반복하면서 각 요소의 데이터를 추출하여 `obj_data` 객체에 저장하는 역할을 합니다.

 

 

 

// 자재출고 | 유효성 체크
function reason_ck_stock_out(obj_data) {
    var return_ck = true;
    var pattern = /\s/g;

    var fields = [
        {name: '출고일자', value: obj_data.work_date},
        {name: '품번', value: obj_data.part_code},
        {name: '수량', value: obj_data.loc_code},
        {name: '수량', value: obj_data.out_qty}
    ];



    for (var i = 0; i < fields.length; i++) {
        var field = fields[i];
        if (!field.value) {
            alert(field.name + '을(를) 올바르게 입력해주세요.');
            return_ck = false;
            break;
        } else if (field.name == '품명' && pattern.test(field.value)) {
            alert('품명에 스페이스바를 치지 마세요.');
            return_ck = false;
            break;
        }
    }


    return return_ck;
}

위의 코드는 `reason_ck_stock_out`라는 함수를 정의하고 있습니다. 이 함수는 `obj_data`라는 객체를 매개변수로 받으며, 데이터 유효성을 확인하는 기능을 가지고 있습니다. 함수 내부의 동작을 각 코드 블록 별로 설명해드리겠습니다:

1. `var return_ck = true;`:
   - `return_ck` 변수를 선언하고 초기값을 `true`로 설정합니다.
   - 이 변수는 함수의 최종 반환값을 나타내며, 초기에는 유효성 검사를 통과했다고 가정합니다.

2. `var pattern = /\s/g;`:
   - `pattern` 변수를 선언하고 정규 표현식 `/\\s/g`를 할당합니다.
   - 이 정규 표현식은 공백 문자를 나타냅니다.

3. `var fields = [...]`:
   - `fields` 변수를 선언하고 배열로 초기화합니다.
   - 배열의 각 요소는 `name`과 `value`라는 속성을 가지고 있으며, 유효성을 검사할 필드의 이름과 해당 필드의 값을 담고 있습니다.

4. `for (var i = 0; i < fields.length; i++) { ... }`:
   - `fields` 배열을 반복하면서 각 필드의 유효성을 검사합니다.
   - 반복문 내부의 코드 블록은 각 필드에 대해 실행됩니다.

5. `var field = fields[i];`:
   - 현재 반복되고 있는 필드를 `field` 변수에 할당합니다.

6. `if (!field.value) { ... }`:
   - 필드의 값이 없는 경우 실행됩니다.
   - 경고창을 통해 해당 필드의 이름과 "올바르게 입력해주세요." 메시지를 출력합니다.
   - `return_ck` 값을 `false`로 변경합니다.
   - `break;` 문으로 반복문을 종료합니다.

7. `else if (field.name == '품명' && pattern.test(field.value)) { ... }`:
   - 필드의 이름이 "품명"이고, 해당 필드의 값에 공백 문자가 포함되어 있는 경우 실행됩니다.
   - 경고창을 통해 "품명에 스페이스바를 치지 마세요." 메시지를 출력합니다.
   - `return_ck` 값을 `false`로 변경합니다.
   - `break;` 문으로 반복문을 종료합니다.

8. `return return_ck;`:
   - 최종적인 `return_ck` 값을 반환합니다.
   - 이 값은 유효성 검사를 통과한 경우 `true`이며, 그렇지 않은 경우 `false`입니다.

따라서 `reason_ck_stock_out` 함수는 `obj_data` 객체의 필드들을 검사하여 유효성을 판단하고,
최종적으로 유효성 검사 결과를 반환합니다.
이 를 통해 데이터 저장 이전에 필수 필드가 비어있거나 공백 문자를 포함하는지 등을 확인할 수 있습니다.

 

 

function getModalData() {
    $("#box_part_code").change(function() {
        var partCode = $(this).val();


        $.ajax({
            url: "/getPartInfo",
            method: "GET",
            data: { part_code: partCode},
            dataType :'json',
            success: function(data) {
                console.log(data);
                if (data.length > 0) {
                    var partInfo = data[0];
                    $('#part_name').val(partInfo.part_name);
                    $('#model_name').val(partInfo.model_name);
                    $('#supp_name').val(partInfo.supp_name);
                } else {
                    // 데이터를 가져오지 못한 경우 에러 처리
                    console.log("Failed to fetch part information");
                }
            },
            error: function() {
                console.log("Error occurred while fetching part information");
            }
        });
    });
}

위의 코드는 `getModalData`라는 함수를 정의하고 있습니다. 이 함수는 모달 창에서 품번을 선택하면 해당 품번에 대한 정보를 가져와서 화면에 표시하는 기능을 가지고 있습니다. 함수 내부의 동작을 각 코드 블록 별로 설명해드리겠습니다:

1. `$("#box_part_code").change(function() { ... })`:
   - `box_part_code`라는 id를 가진 요소의 `change` 이벤트를 처리하는 함수를 등록합니다.
   - 품번이 변경되었을 때 해당 이벤트가 발생하고, 아래의 코드 블록이 실행됩니다.

2. `var partCode = $(this).val();`:
   - 변경된 품번 값을 가져와 `partCode` 변수에 할당합니다.
   - `$(this).val()`는 `box_part_code` 요소의 현재 선택된 값, 즉 변경된 품번을 가져옵니다.

3. `$.ajax({ ... })`:
   - AJAX 요청을 생성하여 품번에 대한 정보를 서버로부터 비동기적으로 가져옵니다.
   - `url`은 "/getPartInfo"로 설정되어 있으며, 해당 URL에 GET 요청을 보냅니다.
   - `data`는 `{ part_code: partCode }` 형태로 설정되어 있으며, 품번을 매개변수로 서버에 전달합니다.
   - `dataType`은 'json'으로 설정되어 있으며, 서버 응답을 JSON 형식으로 받을 것을 명시합니다.

4. `success: function(data) { ... }`:
   - AJAX 요청이 성공적으로 완료되었을 때 실행되는 콜백 함수입니다.
   - 서버로부터 받은 데이터는 `data` 매개변수로 전달됩니다.
   - `console.log(data);`를 통해 데이터를 출력합니다.

5. `if (data.length > 0) { ... } else { ... }`:
   - 데이터 배열의 길이가 0보다 큰 경우 실행됩니다. 즉, 데이터가 존재하는 경우입니다.
   - `data[0]`를 통해 첫 번째 데이터 객체를 가져옵니다.

   - 가져온 데이터 객체에서 필요한 속성 값을 추출하여 각각의 필드에 설정합니다.
     - `partInfo.part_name`을 `#part_name` 요소의 값으로 설정합니다.
     - `partInfo.model_name`을 `#model_name` 요소의 값으로 설정합니다.
     - `partInfo.supp_name`을 `#supp_name` 요소의 값으로 설정합니다.

6. `else { ... }`:
   - 데이터를 가져오지 못한 경우, 즉 데이터 배열의 길이가 0인 경우 실행됩니다.
   - 콘솔에 "Failed to fetch part information" 메시지를 출력합니다.

7. `error: function() { ... }`:
   - AJAX 요청이 실패한 경우 실행되는 콜

백 함수입니다.
   - 콘솔에 "Error occurred while fetching part information" 메시지를 출력합니다.

위의 코드는 `box_part_code` 요소의 값이 변경될 때마다 AJAX 요청을 통해 해당 품번의 정보를 가져와서 화면에 표시하는 동작을 수행합니다.