Jquery #7 jqgrid getRowData & addRowData , 'last' ? | Each, ForEach

function ord_reg_add2() { //오른쪽 화살표 누르면 선택한 행 추가(중복 검사)
    var rowid = $("#ord_reg_grid2").jqGrid("getGridParam", "selarrrow");
    var data = $("#ord_reg_grid3").getRowData();
    var duplicateExists = false; // 중복 여부 변수

    // 중복 검사 & 오른쪽 그리드에 데이터 추가
    for (var i = 0; i < rowid.length; i++) {
        var isDuplicate = false;
        for (var j = 0; j < data.length; j++) {
            if (rowid[i] === data[j].part_code) {
                isDuplicate = true;
                break;
            }
        }
        if (!isDuplicate) {
            var data2 = $("#ord_reg_grid2").jqGrid("getRowData", rowid[i]);
            $("#ord_reg_grid3").jqGrid("addRowData", rowid[i], data2, 'last');
        } else {
            duplicateExists = true;
        }
    }

    if (duplicateExists) {
        $("#ord_reg_grid2").jqGrid("resetSelection");
        alert("이미 존재하는 데이터입니다.");
    }

    // 선택 해제
    $("#ord_reg_grid2").jqGrid("resetSelection");
}

1. 변수 및 초기화:
   - `rowid`: `ord_reg_grid2` 그리드에서 선택한 행의 ID 배열
   - `data`: `ord_reg_grid3` 그리드의 데이터 배열
   - `duplicateExists`: 중복 여부를 나타내는 변수. 초기값은 `false`로 설정됩니다.

2. 중복 검사 및 데이터 추가:
   - 첫 번째 반복문(`for`문)은 선택한 행의 ID 배열을 순회합니다.
   - 안쪽의 두 번째 반복문(`for`문)은 `ord_reg_grid3` 그리드의 데이터 배열을 순회하며 중복 검사를 수행합니다.
   - 만약 선택한 행의 ID(`rowid[i]`)와 데이터 배열의 `part_code`가 동일하다면 중복으로 판단하고 `isDuplicate` 변수를 `true`로 설정합니다.
   - 중복이 아닌 경우, `ord_reg_grid2` 그리드에서 해당 행의 데이터를 가져와서 `data2` 변수에 저장합니다. (getRowData)
   - `ord_reg_grid3` 그리드에 `addRowData` 메소드를 사용하여 해당 행의 데이터(`data2`)를 마지막 위치('last')에 추가합니다. (addRowData)

3. 중복 여부 확인 및 처리:
   - 중복이 있는 경우, `duplicateExists` 변수를 `true`로 설정합니다.
   - 선택 해제: `ord_reg_grid2` 그리드의 선택 상태를 초기화합니다.

4. 마무리:
   - 중복이 존재하는 경우, 사용자에게 메시지를 통해 알림을 제공합니다.

`if (!isDuplicate)` 블록에서의 코드 설명:
- 이 부분은 중복 여부를 검사하고 중복이 아닌 경우에만 데이터를 추가하는 부분입니다.
- `!isDuplicate`는 `isDuplicate` 변수가 `false`인 경우를 의미합니다.
- 즉, 선택한 행의 `rowid[i]`와 `ord_reg_grid3` 그리드의 데이터 배열에 있는 `part_code`가 일치하지 않는 경우에만 실행됩니다.
- `$("#ord_reg_grid2").jqGrid("getRowData", rowid[i])`를 통해 `ord_reg_grid2` 그리드에서 해당 행의 데이터를 가져와서 `data2` 변수에 저장합니다.
- 그리고 `$("#ord_reg_grid3").jqGrid("addRowData", rowid[i], data2, 'last')`를 통해 `ord_reg_grid3` 그리드에 새로운 행 데이터(`data2`)를 마지막 위치('last')에 추가합니다.

이를 통해 선택한 행이 중복되지 않을 경우에만 `ord_reg_grid3` 그리드에 데이터가 추가되며, 중복이 있는 경우에는 추가되지 않고 중복 여부를 알리는 메시지가 표시됩니다.
선택한 행의 중복 여부를 확인하여 처리하는 부분이 `ord_reg_add2` 함수의 주요 기능입니다.

 

function ord_reg_del() { //왼쪽 화살표 누르면 선택한 행 제거
    var rowid = $("#ord_reg_grid3").jqGrid("getGridParam","selarrrow");

    for (var i = rowid.length - 1; i >= 0; i--) {
        $("#ord_reg_grid3").delRowData(rowid[i])
    }
    $("#ord_reg_grid3").jqGrid("resetSelection");
}

1. 변수 및 초기화:
   - `rowid`: `ord_reg_grid3` 그리드에서 선택한 행의 ID 배열

2. 선택한 행 제거:
   - 첫 번째 반복문(`for`문)은 선택한 행의 ID 배열을 역순으로 순회합니다. 
(역순으로 순회하는 이유는 배열에서 요소를 제거할 때 순회 중에 인덱스가 변경되는 것을 방지하기 위함입니다.)
   - `$("#ord_reg_grid3").delRowData(rowid[i])`를 통해 `ord_reg_grid3` 그리드에서 해당 행의 데이터를 제거합니다.

3. 선택 해제:
   - `$("#ord_reg_grid3").jqGrid("resetSelection")`을 통해 `ord_reg_grid3` 그리드의 선택 상태를 초기화합니다.

이를 통해 선택한 행이 그리드에서 제거되며, 선택 상태가 초기화됩니다.

`for`문의 역순 순회 설명:
- `for`문의 조건식인 `i >= 0`는 `i`가 0보다 크거나 같을 때까지 반복을 수행한다는 의미입니다.

- `i--`는 반복이 한 번 수행될 때마다 `i` 값을 1씩 감소시킵니다.
- 따라서, 반복은 `rowid` 배열의 마지막 인덱스부터 시작하여 첫 번째 인덱스까지 역순으로 진행됩니다.

 

만약에 두개를 선택하고 왼쪽 화살표를 누르면 rowid.length가 2잖아요 근데 -1을 해야 반복문을 두번 돌려서 두개를 삭제할 수 있다.

rowid.length-1 = 1이 되니  i >= 0이이니까 0이 될때까지 돌리잖아요 그래서 1돌리고 0돌리게 된다.

- 이렇게 역순으로 순회하는 이유는 배열에서 요소를 제거할 때 인덱스 순서가 변경되는데, 정순으로 순회할 경우 제거된 요소 이후의 인덱스들이 변경되어 잘못된 요소가 제거될 수 있기 때문입니다. 역순으로 순회하면 인덱스 변경이 발생하지 않으므로 안전하게 요소를 제거할 수 있습니다.

 

`for`문에서 어떠한 부분을 보고 역순으로 순회하는지는  `for`문의 조건식과 증감식을 확인하여 알 수 있습니다.

조건식: `i >= 0`
- 조건식에서 `i`가 0보다 크거나 같을 때까지 반복한다는 것을 나타냅니다. 따라서 `i` 값이 0이 되면 반복이 종료됩니다.

증감식: `i--`
- 증감식에서 `i` 값을 1씩 감소시킵니다. 이는 매 반복마다 `i`의 값을 감소시키면서 다음 인덱스로 이동하는 역할을 합니다.

위 조건식과 증감식을 종합하면, `for`문은 초기값인 `rowid` 배열의 마지막 인덱스부터 시작하여 0번 인덱스까지 역순으로 반복하게 됩니다. 따라서 `$("#ord_reg_grid3").delRowData(rowid[i])` 코드가 실행될 때는 `rowid` 배열의 마지막 인덱스부터 첫 번째 인덱스까지의 값을 차례로 사용하여 행을 제거하게 됩니다. 이것이 역순으로 순회하는 구현 방식입니다.

이를 통해 선택한 행이 그리드에서 제거되고, 선택 상태가 초기화되는 기능이 구현됩니다.

 

 

---

`for`문, `$.each()` 함수, `Array.prototype.forEach()` 메서드는 JavaScript에서 반복문을 사용하는 방법입니다. 각각의 차이점과 예제를 통해 설명하겠습니다.

1. `for`문:
   - 가장 전통적인 반복문으로, 초기값, 조건식, 증감식을 사용하여 반복 동작을 제어합니다.
   - 배열이나 객체의 요소를 순회하고자 할 때 사용할 수 있습니다.

     var arr = [1, 2, 3, 4, 5];
     for (var i = 0; i < arr.length; i++) {
       console.log(arr[i]);
     }

2. `$.each()` 함수:
   - jQuery 라이브러리에서 제공하는 함수로, 배열이나 객체의 요소를 순회하기 위해 사용됩니다.
   - `$.each()` 함수는 jQuery 객체 또는 배열 또는 일반 객체를 순회할 수 있습니다.
   - 예제:

     var arr = [1, 2, 3, 4, 5];
     $.each(arr, function(index, value) {
       console.log(value);
     });

3. `Array.prototype.forEach()` 메서드:
   - JavaScript 배열에 내장된 메서드로, 배열의 각 요소에 대해 주어진 함수를 실행합니다.
   - `forEach()` 메서드는 콜백 함수를 받아서 배열의 각 요소에 대해 반복 실행합니다.
   - 예제:

     var arr = [1, 2, 3, 4, 5];
     arr.forEach(function(value) {
       console.log(value);
     });

주요 차이점:
- `for`문은 다양한 제어 옵션을 사용할 수 있으며, 인덱스를 직접 다루기 때문에 자유로운 반복 로직을 작성할 수 있습니다.
- `$.each()` 함수와 `forEach()` 메서드는 주어진 함수를 자동으로 요소에 대해 반복하면서 실행하므로 반복 동작을 더 간결하게 표현할 수 있습니다.
- `$.each()` 함수는 jQuery 라이브러리에 종속적이지만, `forEach()` 메서드는 JavaScript의 내장 기능으로 모든 브라우저에서 지원됩니다.

참고로, `$.each()` 함수와 `forEach()` 메서드는 사용 방법이 약간 다를 수 있으니 해당 문서를 참고하시면 좋습니다.