제이쿼리 데이터테이블 select option 추가

제이쿼리 데이터테이블 select option 추가

QA

제이쿼리 데이터테이블 select option 추가

답변 1

본문

데이터테이블 사용하고 있고 리스트들은 표기하는데 성공하였습니다 근데 문제는 DB에있는 값에 따라 select option 상태를변경하고싶습니다


'columns':[
            { data : null,
              render : function(data, type, row){ //render = data에서 변화를 줄때 사용하는 함수
                return ++ i;
              }
            },
            { data: 'wr_subject'},
            { data: 'wr_1'},
            { data: 'wr_2'},
            { data: 'wr_3'},
            { data: 'wr_4'},
            { data: null},
            { data: 'wr_6'},
            { data: 'wr_id',
                render : function(data,type,row){
                var btn = ``;
                btn += `<button type="button" class="btn btn-primary back_blue">수정</button>`
                return btn;
                }
            },    
 
            ],

저 data:null 자리에 select option기능을 넣어주고싶은데 어떻게 해야할지 모르겠습니다ㅠㅠㅠ 밑에 btn처럼 해야하는건지... 방법좀 알려주세요

이 질문에 댓글 쓰기 :

답변 1

대략적으로 다음과 같이 해 볼 수 있을 것 같습니다.

 

select 옵션을 추가하고 해당 옵션의 상태를 DB에 있는 값에 따라 선택하려면 columns 옵션 내에서 render 함수를 사용하여 각 셀의 내용을 변경 하면 될 것 같네요.

참고하셔서 원하시는 로직으로 구현 하시면 되지 않을까 합니다.

 


'columns': [
    { 
        data: null,
        render: function (data, type, row, meta) {
            return meta.row + 1;
        }
    },
    { data: 'wr_subject' },
    { data: 'wr_1' },
    { 
        data: 'wr_3', 
        render: function(data, type, row) {
            var options = ['Option 1', 'Option 2', 'Option 3']; // 옵션 목록
            var select = '<select>';
            
            for (var i = 0; i < options.length; i++) {
                var selected = (data === options[i]) ? 'selected' : '';
                select += '<option ' + selected + '>' + options[i] + '</option>';
            }
            
            select += '</select>';
            return select;
        }
    },
    { data: 'wr_4' },
    { data: 'wr_6' },
    { data: null },
    { 
        data: 'wr_id',
        render: function(data, type, row) {
            var btn = '<button type="button" class="btn btn-primary back_blue">수정</button>';
            return btn;
        }
    },    
],
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 612
© SIRSOFT
현재 페이지 제일 처음으로