Wanna be Brilliant Full-Stack Developer

JQGRID #4 본문

Some Memos/JQGRID

JQGRID #4

Flashpacker 2023. 5. 25. 16:27
function stock_out_jqGrid_main() {

    $("#stock_out_grid").jqGrid({
        datatype: "local",
        mtype: 'POST',
        colNames : ['출고번호','출고일자','품번','품명','업체코드','업체','수량','등록자','등록일시'],
        colModel : [
            {name: 'out_no', index: 'out_no',width:100, fixed: true, sortable: false, key: true, hidden:true},
            {name: 'work_date', index: 'work_date', width:100, fixed: true, sortable: false},
            {name: 'part_code', index: 'part_code', width:100, fixed: true, sortable: false},
            {name: 'part_name', index: 'part_name', width:200, fixed: true, sortable: false},
            {name: 'supp_code', index: 'supp_code', width:100, fixed: true, sortable: false,hidden:true},
            {name: 'supp_name', index: 'supp_name', width:100, fixed: true, sortable: false},
            {name: 'out_qty', index: 'out_qty', width:100, fixed: true, sortable: false},
            {name: 'user_code', index: 'user_code', width:100, fixed: true, sortable: false},
            {name: 'create_date', index: 'create_date', width:160, fixed: true, sortable: false}
        ],
        caption: "자재출고 | MES",
        sortable: true,
        autowidth: true,
        height: 570,
        pager: '#stock_out_grid_pager',
        rowNum: 100,
        rowList: [100, 200, 300, 1000],
        shrinkToFit: false,
        viewrecords: true,
        multiselect: true,
        beforeSelectRow: function (rowid, e) {
            var $myGrid = $(this),
                i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
                cm = $myGrid.jqGrid('getGridParam', 'colModel');
            return (cm[i].name === 'cb');
        },
        loadComplete:function(){
            grid_horizon_scroll("#stock_out_grid");
        },
        ondblClickRow: function update_supp(rowid) {
            stock_out_modaload();

            keyword ='U';

            var key = $("#stock_out_grid").getGridParam('selarrrow');
            var out_no = $("#stock_out_grid").jqGrid('getRowData', rowid).out_no;
            var work_date = $("#stock_out_grid").jqGrid('getRowData', rowid).work_date;
            var part_code = $("#stock_out_grid").jqGrid('getRowData', rowid).part_code;
            var part_name = $("#stock_out_grid").jqGrid('getRowData', rowid).part_name;
            var supp_code = $("#stock_out_grid").jqGrid('getRowData', rowid).supp_code;
            var supp_name = $("#stock_out_grid").jqGrid('getRowData', rowid).supp_name;
            var out_qty = $("#stock_out_grid").jqGrid('getRowData', rowid).out_qty;
            var user_code = $("#stock_out_grid").jqGrid('getRowData', rowid).user_code;
            var create_date = $("#stock_out_grid").jqGrid('getRowData', rowid).create_date;
            var gu5 = String.fromCharCode(5);
            var obj_data = {}
            var list=[];

            obj_data.stock_keywrod = stock_keyword;
            obj_data.keyword = keyword;
            obj_data.list = key.join(gu5);
            obj_data.out_no = rowid;

            console.log(obj_data);

            $("#out_no").val(out_no);
            $("#work_date").val(work_date);
            $("#box_part_code").val(part_code).trigger('change');
            $("#part_name").val(part_name);
            $("#model_name").val(model_name);
            $("#supp_code").val(supp_code);
            $("#supp_name").val(supp_name);
            $("#out_qty").val(out_qty);
            $("#stock_out_modal").dialog("open");
        },

    });
    $("#stock_out_grid").jqGrid('navGrid', '#supp_grid_pager', {
        add: false,
        edit: false,
        del: false,
        search: false,
        refresh: false
    });
    $("#stock_out_grid").jqGrid('navButtonAdd', '#supp_grid_pager', {
        caption: "열 조정",
        title: "열 조정",
        buttonicon: "fa fa-list-alt bigger-110 blue column_chooser_icon",
        onClickButton: function() {
            $.extend(true, $.ui.multiselect, {
                defaults: {searchable :false},
                locale: {addAll: '모두 보임', removeAll: '모두 숨김', itemsCount: '사용할 열의 수'},
            });

            $("#stock_out_grid").jqGrid('columnChooser', {
                dialog_opts: {modal: true, resizable: false},
            });
        },
        position : 'last'
    });
}




- `datatype:
 "local"`: jqGrid의 데이터 타입을 로컬로 설정합니다. 이는 그리드에 표시되는 데이터가 로컬 데이터임을 의미합니다.


- `mtype: 'POST'`: jqGrid의 HTTP 요청 방식을 POST로 설정합니다.


- `colNames`와 `colModel`: 그리드의 컬럼 이름과 모델을 설정합니다. 각 컬럼은 출고번호, 출고일자, 품번, 품명, 업체코드, 업체, 수량, 등록자, 등록일시 등을 나타냅니다.


- `caption: "자재출고 | MES"`: 그리드의 제목(caption)을 설정합니다.


- `sortable: true`: 그리드의 컬럼을 정렬할 수 있도록 설정합니다.


- `autowidth: true`: 그리드의 너비를 자동으로 조정하도록 설정합니다.


- `height: 570`: 그리드의 높이를 570px로 설정합니다.


- `pager: '#stock_out_grid_pager'`: 그리드의 페이저(pager)로 `#stock_out_grid_pager`를 사용합니다.


- `rowNum: 100`: 한 페이지에 표시할 행 수를 100으로 설정합니다.
- `rowList: [100, 200, 300, 1000]`: 행 수 선택 옵션을 100, 200, 300, 1000으로 설정합니다.


- `shrinkToFit: false`: 그리드의 너비 조정을 비활성화합니다.
- `viewrecords: true`: 그리드에 레코드 수를 표시합니다.
- `multiselect: true`: 다중 선택을 가능하도록 설정합니다.


- `beforeSelectRow`: 행 선택 전에 호출되는 함수로, 체크박스를 클릭한 경우에만 행 선택이 가능하도록 설정합니다.


- `loadComplete`: 그리드의 데이터 로딩이 완료된 후 호출되는 함수로, `grid_horizon_scroll()` 함수를 호출하여 그리드의 가로 스크롤을 설정합니다.
- `ondblClickRow`: 행을 더블 클릭한 경우 호출되는 함수입니다. 선택된 행의 데이터를 가져와 모달 창에 표시하고, 모달 창을 엽니다.


- `navGrid`: 그리드의 네비게이션 설정을 지정합니다. 추가, 편집, 삭제, 검색, 새로고침 기능을 비활성화합니다.


- `navButtonAdd`: 그리드에 열 조정 버튼을 추가합니다. 클릭 시 `columnChooser`를 호출하여 열을 선택할 수 있는 대화상자를 표시합니다.

'Some Memos > JQGRID' 카테고리의 다른 글

JQGRID #5 getGridParam과 setGridParam 차이  (0) 2023.06.02
JQGRID #3  (0) 2023.05.24
JQGRID 메모  (0) 2023.03.28