기록

onGridReady: function (api) { this.gridApi = api; this.gridOption = this.girdApi.gridOptionsService.gridOptions; this.gridOption.onCellClicked = function (params) { // 기존 onCellClicked 함수 내용을 수행합니다. onCellClicked(params); // 새로운 내용을 추가합니다. console.log('Cell Clicked!', params); }; }, 1. agGrid의 html 요소 (wapper)에 접근하기 let wapper = api.gridOptionsService.eGridDiv; /* onGridReady(api) { let node = a..

AgGrid의 gridApi는 그리드 인스턴스에 대한 프로그래밍적인 제어를 제공하는 반면, columnApi는 그리드 컬럼에 대한 제어를 제공합니다. gridApi를 사용하여 할 수 있는 작업은 다음과 같습니다. 행 추가/삭제/갱신하기 셀 값 설정하기 열 너비/높이 조정하기 필터링 및 정렬하기 선택된 행/셀 가져오기 그리드 전체 데이터 가져오기 커서 이동하기 그리드 리사이즈하기 columnApi를 사용하여 할 수 있는 작업은 다음과 같습니다. 컬럼 추가/삭제하기 컬럼 순서 변경하기 컬럼 필터링하기 컬럼 그룹핑하기 컬럼 정렬하기 gridOptionsService는 그리드 인스턴스의 속성 값을 가져오거나 변경하는 기능을 제공합니다. 이를 통해 그리드의 기본 동작을 변경하거나 초기값을 설정할 수 있습니다. 예..

afterEditCell afterEditCell은 jqGrid에서 편집하는 각 셀의 편집 후에 호출되며, 사용자가 편집을 완료하고 포커스를 다른 셀로 이동할 때 호출됩니다. afterEditCell 함수는 다음과 같은 인자를 받습니다: rowid: 편집된 셀의 행 ID cellname: 편집된 셀의 열 이름 value: 편집된 값 iRow: 편집된 행의 인덱스 iCol: 편집된 열의 인덱스 예를 들어, 편집된 값을 서버로 저장하거나 특정 유효성 검사를 수행할 수 있습니다. 그리고 grid편집 후 저장할 때 input의 html이 데이터로 저장되는 경우가 있는데 이를 방지하기 위해서도 쓸 수 있습니다. 아래 코드가 이에대한 코드입니다. jQuery("#grid").jqGrid({ datatype: "lo..

grid가 생성된 후에 setGroupHeader 메소드를 사용하여 그룹화 startColumn부터 우측으로 numberOfColumns 수만큼 titleText라는 그룹으로 묶는다 titleText에는 html태그가 포함될 수 있다. $("#grid").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ { startColumnName: 'Col1', numberOfColumns: 5, titleText: ''+Group1+'' }, { startColumnName: 'Col6', numberOfColumns: 3, titleText: 'Group2' } ] }); 삭제 $("#grid").jqGrid('destroyGroupHeader..

1. colModel에 frozen: true 옵션 추가 가장 왼쪽 컬럼부터 이어서 설정해야함. 띄워서 설정할 경우 마지막 컬럼(가장 오른쪽)과 이어진 컬럼만 고정된다. jQuery("#grid").jqGrid({ datatype: "local", colNames: ['Col1', 'Col2', 'Col3'], colModel: [ {name: 'Col1', index: 'Col1', width: 70, frozen:true }, {name: 'Col2', index: 'Col2', width: 70, frozen:true}, {name: 'Col3', index: 'Col3', width: 70 } ], rowNum: 10, rowList: [5, 10, 20], // ... }); 2. setFroz..

1. name과 index jqGrid의 colmodel에서 -name : 서버로 부터 넘어오는 data와 변수명을 맞춰야함. colName을 지정하지 않으면 name으로 생성됨. -index : jqGrid에서 접근할 이름(sort, filter에 기본적으로 사용). 미지정시 name을 따라간다. var colModel = [ {colName : 'col1', name:'col1', index:'col1', align:'center', sortable: true}, {colName : 'col2', name:'col2', index:'col2', align:'left', sortable: true}, ]; *colName 눈에 보이는 필드네임으로 지정하지 않으면 name을 따라가는데 colmodel에 ..

기본적으로 그리드는 헤더를 제외한 데이터row 영역에 scroll이 생기기 때문에 row(데이터) 추가전에는 scroll이 생기지 않아 컬럼헤더가 잘린다. css를 아래와 같이 변경해주면 row추가 전에도 가로스크롤이 생기며 row추가시 세로스크롤과 가로스크롤이 자연스럽게 보이도록 할 수 있다. .ui-jqgrid .ui-jqgrid-bdiv { position: relative; margin: 0em; padding: 0em; overflow-x: auto; overflow-y: auto; border-left: 0px none !important; border-top : 0px none !important; } .ui-jqgrid .ui-jqgrid-bdiv > div { width: fit-cont..

그리드를 생성한 후 아래 처럼 filter 옵션을 추가 할 수 있다 $("#gridId").jqGrid("filterToolbar",{ //options }) 근데 multiselect 옵션을 사용 중 일때 체크한 것이 유지되지 않는다 그래서 검색전에 체크된 row를 저장하고 검색후에 저장된 row를 체크하게 구현함 var tempSelectedTarget = []; let gridId = "GridID"; $("#"+gridId).jqGrid('filterToolbar',{ autosearch: true, stringResult: true, searchOnEnter: true, defaultSearch: "cn", beforeSearch: function (){ //체크된 데이터 임시저장 // var ..

보통 setCell 함수를 이용할 때 $('#Grid').jqGrid('setCell', rowId, cellName, value); 이때 value가 ""이면 cell이 셋팅되지 않는다! 4번째 value파라미터 자리에 아무것도 넣지 않으면 공백으로 세팅됨. $('#Grid').jqGrid('setCell', rowId, cellName, );

addJSONData 한번에 그리드 전체의 데이터를 추가 할 수 있다. $("#GridName")[0].addJSONData(data); 하지만 데이터를 그리드 내부에 저장하는 로직이 들어있지 않아 페이지 이동을 하거나 정렬, 솔트 기능을 사용하면 원래 데이터로 돌아가 버린다. datatype:'local' 인 경우 다른방법 사용할 것 setGridParams 메소드로 data를 업데이트하고 reload $("#GridName").jqGrid("clearGridData"); $("#GridName).jqGrid("setGridParam",{data : data}; $("#GridName").trigger("reloadGrid"); AddRowData 한줄 씩 추가하는 방법 var rowId = $("#G..