jqgrid : 그리드 조회, 수정, 추가, 삭제 전부 구현하기(1) - 그리드 조회

시작하기전에 주절거려보자면 자바 스프링만 하던 초짜 신입이 회사때려치고 3년 놀다가
갑자기 회사 입사해서 nodejs를 다루는 상황입..니다.... 
그러므로 처음 아무것도 몰랐던 그마음으로 다시 시작해보..자..! 

 

 

간단한 관리자 웹 페이지를 만드는데. jqgrid를 사용. 메뉴 리스트를 보여주는 화면이다.
리스트 조회까지는 대충 구현이 되어 있는 상태에서. 수정/추가/삭제 구현.

nodejs가 어떻게 돌아가는지도 모르고 jqgrid도 처음보는 라이브러리고.
라떼(?)는 js에 var 밖에 없었는데 const와 let이 생겨벌인 이 험난한 세상..

시작해보자 !

개발환경 : nodejs / mariaDB / JS / jqgrid 

    <div class="main-panel">
        <div class="content-wrapper">
           
            <div class="row col-12 d-flex align-items-center justify-content-end">
              <button class="btn">추가</button>
              <button class="btn">삭제</button>
            </div>
            
            <div class="row ">
              <div class="col-12 grid-margin">
                <div class="card">
                  <div class="card-body">
                    
                    <div class="table-responsive">
                        <table id="dataGrid"></table>
                    </div>
           
                  </div>
                </div>
              </div>
            </div>

        </div>
    </div>

menumast.ejs 에 넣은 html 코드
<table id="dataGrid"></table> 부분에 jqgrid가 생성될것이다.

그럼 이제 메뉴에서 menumast 게시판(이라고부르겠다) 을 클릭했을 때 화면이 뜨면서 메뉴 데이터들이 jqgrid로 뿌려질텐데 DB에서 데이터를 가져와야 하니까 라우터로 가자.

nodejs는 라우터로 코드를 나눠서 관리하는것 같은데 잘은 모르지만 일단 다 구현해 놓고 나니까 자바처럼 컨트롤러 타고 VO에 뭐에 안하고 바로 라우터에서 쿼리 날려버리니까 좀 편리(?)한것 같기도 하고 무튼 일단 router.js 에서 메뉴 데이터를 가져오자.

left 메뉴리스트에서 메뉴 클릭시 get('data/menumast') / progid가 함께 호출되서 화면을 가져온 후에 그리드 데이터를 가지고 오기 위한 url을 통해 post('/data/menumast/getGridData')를 호출하게 된다 (아래에서 url 설정해줄거임) 

const express = require('express');
const router = express.Router();
const db_pool = require( '../modules/database.js');

router.use(express.json());
router.use(express.urlencoded({extended:true}));

router.get('/data/menumast', (req, res) => {
    const progid = req.query.p;
    const sql = " SELECT prog_id, prog_name FROM menumast WHERE prog_id = '"+progid+"' ";
    let mSql = " SELECT sys_gbn, group_code, prog_id, depth_lv, prog_name, prog_url, order_no, view_yn ";

    db_pool.getConnection(async function (err, conn) {
        if (err) { //connction 오류 
            if (conn)
                conn.release();
            return;
        }

        await conn.beginTransaction();
        await conn.query(sql, [], function(err, prog){
            if(err){ 
                conn.rollback();
                console.log(err);
            }else{
                conn.query(mSql, [], function(err, menu){
                    if(err){
                        conn.rollback();
                        console.log(err);
                    }else{
                        conn.commit();
                        res.render('/data/menumast.ejs',{prog:prog[0], menu:menu});
                    }
                })
            }
        });
        conn.release(); //connection pool을 반납 
    });


});

/* Data관리 - MENUMAST grid 리스트 조회 */
router.post('/data/menumast/getGridData', (req, res) => {
    const body = req.body;
    let sysgbn = body.system;
    if(typeof(sysgbn) != 'undefined' && sysgbn != null) sysgbn = sysgbn.toUpperCase();
    let sql = " SELECT sys_gn, group_code, prog_id, depth_lv, prog_name, prog_url, order_no, view_yn ";
    sql += " FROM menumast WHERE sys_gbn= '"+sysgn+"' ORDER BY group_code, order_no ";
    
    console.log(sql);
    
        db_pool.getConnection(async function (err, conn) {
        if (err) { //connction 오류 
            if (conn)
                conn.release();
            return;
        }

        await conn.beginTransaction();
        await conn.query(sql, [], function(err, result){
            if(err){
                conn.rollback();
                console.log(err);
                res.send(err.sqlMessage);
            }else{
                res.send(result);
                conn.commit();
            }
        });
        conn.release(); //connection pool을 반납 
    });
});

 

아 그전에 DB는 public/common.properties에서 설정해주었고 module/database.js 에서 DB info를 가지고 왔다.

const PropertiesReader = require('properties-reader');
const properties = PropertiesReader('./public/common.properties');

const mysql = require('mysql');
var db_info = {
        host: properties.get('com.db.host'),
        port: properties.get('com.db.port'),
        user: properties.get('com.db.user'),
        password: properties.get('com.db.passwd')
        database: properties.get('com.db.name'),
        validationQuery : 'select 1', 
        testWhileIdle : true,
        timeBetweenEvictionRunsMillis : 3600000, 
        connectionLimit : 1000,
        charset: 'utf8mb4'
};

console.log(db_info);

var pool = mysql.createPool(db_info);

module.exports = pool;

 

그럼 이제 데이터 가져왔으니까 화면에 뿌려주려면 <script></script> 안에서 구현을 해 주어야 하는데 jq 그리드를 띄우자 

    var gridColNm = ['','그룹코드','프로그램 ID', '메뉴레벨', '프로그램명','프로그램 URL','정렬순서', '메뉴보임 YN']; 
    var gridColModel = [ 
    	  {name:'chkbox', index:'chkbox', align:'center', width:'3%', edittype:'checkbox', editoptions:{value:'Y:N'}, formatter:'checkbox'},
    	  {name:'group_code', index:'group_code', align:'center', width:'7%',edittype:'text'},
       	  {name:'prog_id', index:'prog_id', align:'center', width:'10%', edittype:'text', key:true},
          {name:'depth_lv', index:'depth_lv', align:'center', width:'5%',  edittype:'text'},
          {name:'prog_name', index:'prog_name', align:'left', width:'25%',  edittype:'text'},
          {name:'prog_url', index:'prog_url', align:'left', width:'30%', edittype:'text'},
          {name:'order_no', index:'order_no', align:'center', width:'5%', edittype:'text'},
          {name:'view_yn', index:'view_yn', align:'center', width:'5%',  edittype:'select', editoptions:{value:{"Y":"Y","N":"N"}}, formatter:'select'}
        ]; 
    
    $("#dataGrid").jqGrid({
        url:'/data/menumast/getGridData',
        datatype:'JSON',
        mtype:'POST',
        postData : {
            system: 'system' //이건 내가 설정해준 값 -> 이값으로 DB에서 조회해오기 때문
        }, 
        loadtext  : "로딩중...",
        height: 500, 
        width: $('.main-panel').width()-60, 
        colNames: gridColNm, 
        colModel: gridColModel, 
        rowNum : 99999, 
        rownumbers : true
      });
    
    $(window).on('resize.jqGrid', function () {
        jQuery("#dataGrid").jqGrid( 'setGridWidth', $(".main-panel").width() - 100 );
    });

    getGridData();

});

function getGridData() {
    $('#dataGrid').setGridParam({
        postData : {system:'system'}
    });
    
    //reload 
    $('#dataGrid').trigger('reloadGrid');
}

 

gridColNm : 그리드 헤더부분 
gridColModel : 그리드 형식 지정 key 지정하면 값 넘길때 id값이 지정한 key 값으로 넘어간다
edittype을 지정해서 체크박스/셀렉트박스 등을 지정할 수 있음

그리고 나서 jqgrid를 아까 지정한 table 태그에 띄운다.
url은 위에서 살펴본 DB값 호출하는 url이고 postData는 파라미터값
rownumbers는 번호를 자동으로 맨 앞에 부여해주는 기능이다

jqgrid 속성을 지정해준 후에 getGridData로 넘어가서 로드해주면 조회 성공!

 

 

 

* jqGrid 관련해서 구글을 미친듯이 뒤졌는데 그중에서도 참고한 포스팅들 목록
http://1004lucifer.blogspot.com/2019/05/jqgrid-cell.html (이분게 찐임..다 나와있으나 나같은 초보자는 이해하기 쉽지 않았음)
https://withsoju.tistory.com/703
https://okky.kr/article/307721
https://backback.tistory.com/92
https://isprogramming.tistory.com/13
https://blog.naver.com/PostView.naver?blogId=aufcl4858&logNo=220988211038&parentCategoryNo=&categoryNo=40&viewDate=&isShowPopularPosts=true&from=search
https://monkeybusiness.tistory.com/25
https://pjsprogram.tistory.com/30
https://hianna.tistory.com/488
https://jjanggun.tistory.com/466