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

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

QA

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

본문

데이터테이블 사용하고 있고 리스트들은 표기하는데 성공하였습니다 근데 문제는 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;
        }
    },    
],
답변을 작성하시기 전에 로그인 해주세요.
전체 612
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT