Wanna be Brilliant Full-Stack Developer
JQUERY 및 JS 메모 본문
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 값을 서버로 전달하여 삭제 작업을 수행합니다
'Some Memos > JQUERY & JAVASCRIPT' 카테고리의 다른 글
'==' 와 '==='의 차이점 (1) | 2023.12.14 |
---|---|
Jquery #7 jqgrid getRowData & addRowData , 'last' ? | Each, ForEach (0) | 2023.06.05 |