기록

화면 설명 기존 grid의 데이터를 한번에 들고오는데 데이터 양이 많을 때 시간이 너무 오래걸림. => 한 페이지씩 들고오도록 하는데 전체 페이지 수를 표시해야 함. 아래 그림에서 textBox는 실제 입력받는 변수x, 눈에 보이도록 임의로 textBox사용함. 화면 설정 select(조회)버튼 클릭하면 1. count쿼리 실행 => 결과값 totalLowCount에 바인딩, totalLowCount가 change 될 때 totalPageNum도 다시 계산 2. onePageSelect쿼리 실행 => 그리드에 바인딩 3. 그리드 text 설정 (Page {} of {} 부분에 수동으로 값 넣어 줌) *한 화면에서 여러 그리드를 쓸 경우 $("#gridpager1_center .ui-pg-input") $..

getRowData getRowData 함수는 현재 페이지에 표시된 행들의 데이터만을 가져옵니다. hidden 컬럼의 데이터는 가져오지 않습니다. 그리드에 표시된 컬럼 순서 그대로(colModel과 같은 순서) 가져옵니다. var data = $("#"+gridId).jqGrid("getRowData"); //모든 데이터를 들고오는 코드 let grid = $("#" + gridId); let currPage = grid.jqGrid('getGridParam', 'page'); let lastPage = grid.jqGrid('getGridParam', 'lastpage'); var allData = []; for(let i = 1; i

formatter jqGrid의 formatter는 표시된 데이터의 형식을 사용자 지정하는 데 사용되는 기능입니다. 주로 데이터를 특정한 형식으로 변환하거나 특정한 스타일을 적용하는 데에 활용됩니다. formatter 종류 1. 'integer' 및 'number' formatter 정수 또는 부동 소수점 숫자를 특정 형식으로 표시할 때 사용됩니다. 예를 들어 천 단위 구분기호를 추가하거나 소수점 이하 자릿수를 지정할 수 있습니다. { name: 'price', index: 'price', formatter: 'number', formatoptions: { decimalPlaces: 2, thousandsSeparator: ',' } } 2. 'date' formatter 날짜를 특정한 형식으로 표시할 ..

- 문제 agGrid에서 columnDefs를 아래와 같을 때 "VALUE" 필트의 editable 속성은 true인데 edit이 되지 않는 문제가 발생했습니다. let columnDefs = [ { "field": "NAME", "headerName": "NAME", "width": 200, "sortable": true, "filter": true, "flex": 1, "minWidth": 100, "resizable": true, "editable": false, "cellEditor": "", "cellEditorParams": "", "valueFormatter": "", "pinned": null, "cellStyle": "", "rowDrag": "", "colId": "NAME", "row..

api 가져오기 그리드가 생성 될 때 배열에 저장해뒀다가 사용 onGridReady: function (api) { this.agGrids = [] this.agGrids.push({key: api}); } onGridReady: function (api) { this.agGrids = {} this.agGrids.[key] = api; } set Data api.setRowData([]); get Data //한 줄 api.getRowNode(id); //모두 getAllRows(api); getAllRows(api) { let rowData = []; api.forEachNode(node => rowData.push(node.data)); return rowData; } //선택된 것 api.getS..

//jqGrid let selectedRowID = $("#id").jqGrid("getGridParam", "selrow"); let selectedRowIDs = $("#id").jqGrid("getGridParam", "selarrrow"); let selectedRowData = $("#id").jqGrid("getRowData", selectedRowID); //auiGrid let selectedRows = AUIGrid.getCheckedRowItems("#id"); let selectedRowItem = selectedRows[0].item; //jqGrid let colModel = $("#id").jqGrid("getGridParam", "colModel") /* colModel = [..

https://www.auisoft.net/demo/auigrid/index.html HTML5 자바스크립트 그리드 AUIGrid HTML5 자바스크립트 그리드(javascript grid) - AUIGrid www.auisoft.net 설치 1. 위의 링크에서 Free 버전 다운로드 버튼 클릭 2. grid를 선택하고 나머지 정보 입력 회사명, 이름, 이메일이 중요하지는 않습니다. 다 작성하고 확인을 누르면 파일이 다운로드 됩니다. 3. 필요한 파일만 프로젝트의 webapp > resources 밑(또는 라이브러리 파일을 관리하는 하위 폴더)에 넣어줍니다. AUIGrid : 기본 gird 생성 js파일, 이미지, css 파일 export_server_samples : PDF & Excel Downloa..

onSelectionChanged와 onRowSelected는 모두 ag-Grid에서 row selection 관련 이벤트를 처리하기 위한 콜백 함수입니다. 두 함수는 파라미터가 다르므로 필요한 데이터에 따라 선택하여 사용하면 될 것 같습니다. 1. onSelectionChanged api.getSelectedNodes() 및 api.getSelectedRows() 메서드를 사용하여 선택한 노드/행 데이터의 새 목록을 가져옵니다. api.getSelectedNodes() 메서드는 선택된 모든 row의 Node 객체를 반환합니다. api.getSelectedRows() 메서드는 선택된 모든 row의 데이터 객체를 반환합니다. // gridOptions 객체 설정 var gridOptions = { onSe..

ag-Grid에서 rowSelection 속성을 multiple 또는 single로 설정하여 다중 또는 단일 선택을 활성화할 수 있습니다. 팝업창에 rowSelection속성이 multiple인 그리드가 있고, 팝업을 닫을 때 선택했던 row를 저장해뒀다가 다시 팝업을 열 때 저장된 데이터를 그리드에서 선택되도록 하려고 합니다. ag-Grid에서 row를 동적으로 선택하기 위해서는 다음과 같은 두 가지 방법을 사용할 수 있습니다. 1. selectNode api.selectNode(node, tryMulti): 지정된 노드를 선택하고 선택한 상태로 변경합니다. node: 선택할 노드입니다. tryMulti (선택적): true로 설정하면 노드를 다중 선택할 수 있습니다. 예를 들어, 특정 인덱스의 노드를..

agCellEditor 기본 input default 값으로 editable을 true로 주고 cellEditor을 설정하지 않았을 때 나타난다. let colDef = [ { field: 'columnID', headerName: 'columnID', editable: true, cellEditor: 'agCellEditor', cellEditorParams: {} }, { field: 'type', headerName: 'type' } ]; agSelectCellEditor 무료 버전인 ag-grid-community에서 사용할 수 있는 select 옵션입니다. let colDef = [ { field: 'columnID', headerName: 'columnID', editable: true, ce..