Wanna be Brilliant Full-Stack Developer

JQUERY 및 JS 메모 본문

Some Memos/JQUERY & JAVASCRIPT

JQUERY 및 JS 메모

Flashpacker 2023. 3. 28. 17:28
function getSelectBox() {
    $("#search_things").append($("<option></option>").val("").text("전체"));
     $(document).ready(function(){
         $.ajax({
             url: "getReasons",
             type: "GET",
             success: function (data) {

                 var selectBox = $('#search_things');
                 $.each(data, function(index, option) {
                     var optionElement = $('<option>')
                         .attr('value', option.reason_code)
                         .text(option.reason_name);
                     selectBox.append(optionElement);
             });
         }
     })

    });
}

jQuery의 each() 메서드는 배열이나 객체의 각 요소에 대해 반복 작업을 수행할 수 있는 반복문 함수입니다.
each() 메서드는 첫 번째 인수로 반복 대상인 배열이나 객체를 받습니다. 이 함수는 두 번째 인수로 콜백 함수를 받습니다. 이 콜백 함수는 인덱스와 값을 매개변수로 받아서 반복문을 수행합니다.

위 예시에서는 each() 메서드를 사용하여 서버에서 가져온 data 배열의 각 요소에 대해 반복 작업을 수행하고 있습니다. each() 메서드에서는 콜백 함수 내부에서 option이라는 매개변수를 사용하여 현재 처리 중인 요소에 접근할 수 있습니다.

각 요소에 대해 반복 작업을 수행하면서, 해당 요소에서 reason_code와 reason_name 프로퍼티 값을 가져와서 <option> 태그 요소를 동적으로 생성합니다. 이 때 attr() 메서드를 사용하여 value 속성과 text() 메서드를 사용하여 내용을 설정합니다.

마지막으로 append() 메서드를 사용하여 생성된 <option> 태그 요소를 selectBox 변수가 참조하는 <select> 태그에 추가합니다. 이를 통해 서버에서 가져온 데이터를 <select> 태그에 동적으로 추가할 수 있습니다.

 

 

function deleteValue1() {
    var gu5 = String.fromCharCode(5);
    var reason_grp_code = $("#jqGrid").getGridParam("selarrrow");
    //var grp_code = reason_grp_code.toString();
    var del_list = [];
    for (var i =0; i< reason_grp_code.length; i++) {
        var rowData = $('#jqGrid').getRowData(reason_grp_code[i])
        del_list.push(rowData.reason_grp_code);
        console.log(del_list)
    }

    if (reason_grp_code.length == 0) {
        alert("삭제할 데이터를 선택해주세요");
        return false;
    } else {
        if (reason_grp_code.length > 0) {
            if (confirm("선택한 데이터를 삭제하시겠습니까?")) {}
            $.ajax({
                url: "delData",
                type: "POST",
                data: {keyword: del_list.join(gu5)},
                success: function (result) {
                    alert("삭제 되었습니다.");


                    $("#jqGrid").trigger('reloadGrid')

                },
                error: function (x, e) {
                    console.log(e)
                }
            });
        }
    }
 

$("#jqGrid").getGridParam("selarrrow")는 jQuery Grid의 getGridParam() 메서드를 사용하여
그리드에서 선택된 모든 행의 ID 값을 반환합니다.
이를 통해 선택된 각 행의 데이터를 추출하여 삭제할 목록을 만들 수 있습니다.

var rowData = $('#jqGrid').getRowData(reason_grp_code[i])는 jQuery Grid의 getRowData() 메서드를 사용하여 그리드의 특정 행의 데이터를 가져옵니다.
이 때 reason_grp_code[i]는 반복문의 인덱스로서 선택된 각 행의 ID 값을 가져옵니다.
이를 통해 선택된 각 행의 데이터에서 reason_grp_code 값을 추출하여 삭제할 목록을 만듭니다.

del_list.push(rowData.reason_grp_code)는 del_list 배열에 현재 처리 중인 행의 reason_grp_code 값을 추가합니다.
이 때 push() 메서드를 사용하여 배열의 마지막에 값을 추가합니다.
이를 통해 선택된 모든 행의 reason_grp_code 값을 담은 배열을 만들어 삭제할 목록으로 사용합니다.

마지막으로 $.ajax()를 사용하여 선택된 행들을 삭제합니다. 이 때, data 속성에 del_list.join(gu5)를 전달하여 gu5 구분자를 사용하여 del_list 배열을 문자열로 변환한 값을 서버로 전달합니다.
이를 통해 선택된 모든 행의 reason_grp_code 값을 서버로 전달하여 삭제 작업을 수행합니다