기록

화면 설명 기존 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 날짜를 특정한 형식으로 표시할 ..

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, );