넥사크로 그리드 기본값 - negsakeulo geulideu gibongabs

Question

그리드에 값 넣기

화면 구성이나 특별한 요구에 대응할 수 있도록 셀 단위, 행 단위 혹은 여러 행을 동시에 DataProvider에 직접 변경 할 수 있거나 추가할 수 있습니다.

목차 Show

그리드에 값 넣기
넥사크로 데이터 셋
넥사크로 그리드

그리드 값을 넣기 위한 함수들

아래는 dataProvider의 값을 넣기 위한 함수들이 있습니다.

setValue(row, field, value)
updateRow(row, values)
updateRows(row, rows, start, count, rowEvents)

그리드에 값 넣기

데이터 셀(한 행의 한 필드)의 값을 변경할 수 있습니다.

var current = gridView.getCurrent();
var row = current.dataRow;
var field = current.fieldIndex;

var value = "Cell (" + field + ", " + row + ")";
dataProvider.setValue(row, field, value);

지정한 데이터행의 모든 필드 값들을 수정할 수 있습니다.
values는 Json, Array형태 또는 Array of Array형태로 전달합니다.

var row = gridView.getCurrent().dataRow;
var values = {
  id: "1111",
  userid: "userid1",
  company: "company1",
  first_name: undefined,
  last_name: undefined,
  gender: undefined,
  email: undefined,
  birthday: undefined,
  pay: undefined
};

dataProvider.updateRow(row, values);

지정한 데이터행의 필드 값들을 수정합니다.
undefined로 지정하거나 명시되지 않은 경우 기존의 값을 유지합니다.

var row = gridView.getCurrent().dataRow;
var values = {
  id: "1111",
  userid: "userid1",
  company: "company1",
  first_name: undefined,
  last_name: undefined,
  gender: undefined,
  email: undefined,
  birthday: undefined,
  pay: undefined
};
dataProvider.updateStrictRow(row, values);

지정한 데이터 행으로부터 한 행 이상의 값을 수정합니다.
row로 설정한 행 위치부터 rows에 저장된 배열의 시작위치(start)와 행의 개수(count)만큼의 데이터로 한 행 이상 값을 수정합니다.

var row = gridView.getCurrent().dataRow;
var rows = [
  [
    "1234",
    "userid3",
    "company3",
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined
  ], // Array
  {
    id: "5678",
    userid: "userid4",
    company: "company4",
    first_name: undefined,
    last_name: undefined,
    gender: undefined,
    email: undefined,
    birthday: undefined,
    pay: undefined
  }, // Object
  {
    id: "1357",
    userid: "userid5",
    company: "company5",
    first_name: undefined,
    last_name: undefined,
    gender: undefined,
    email: undefined,
    birthday: undefined,
    pay: undefined
  },
  {
    id: "2468",
    userid: "userid6",
    company: "company6",
    first_name: undefined,
    last_name: undefined,
    gender: undefined,
    email: undefined,
    birthday: undefined,
    pay: undefined
  }
];

dataProvider.updateRows(row, rows, 0, 2, false);

지정한 데이터 행으로부터 한 행 이상의 값을 수정합니다.
row로 설정한 행 위치부터 rows에 저장된 배열의 시작위치(start)와 행의 개수(count)만큼의 데이터로 한 행 이상 값을 수정합니다.
undefined로 지정하거나 명시되지 않은 경우 기존의 값을 유지합니다.

var row = gridView.getCurrent().dataRow;
var rows = [
  [
    "1234",
    "userid3",
    "company3",
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined
  ], // Array
  {
    id: "5678",
    userid: "userid4",
    company: "company4",
    first_name: undefined,
    last_name: undefined,
    gender: undefined,
    email: undefined,
    birthday: undefined,
    pay: undefined
  }, // Object
  {
    id: "1357",
    userid: "userid5",
    company: "company5",
    first_name: undefined,
    last_name: undefined,
    gender: undefined,
    email: undefined,
    birthday: undefined,
    pay: undefined
  },
  {
    id: "2468",
    userid: "userid6",
    company: "company6",
    first_name: undefined,
    last_name: undefined,
    gender: undefined,
    email: undefined,
    birthday: undefined,
    pay: undefined
  }
];

dataProvider.updateStrictRows(row, rows, 0, 3, false);

주의사항

DataProvider의 데이터 함수를 호출하는 시점에 그리드가 편집 중이라면 "Clinet is editing" 에러가 발생하게 됩니다.
사용자 편집과 DataProvider 함수 호출을 동시에 진행할 수 없습니다.
반드시 gridView.commit(), gridView.cancel() 호출로 먼저 사용자 편집을 완료한 후 dataProvider 함수를 호출해야 합니다.

※콤보가 검색조건일 경우를 기준으로 함

1. select문에서 목록에 '전체'값을 함께 불러온다.

'전체' 가 맨 위로 와야 하기 때문에 code값은 모든 코드 중 가장 작아야 한다.

콤보가 검색조건이므로 검색 select문에서 전체값을 제하는 것도 잊지 말자.

xml 파일

   <!--목록 불러오기 -->
   <select id="fruitList" parameterType="hmap" resultType="egovMap">
      SELECT '00' AS FRUIT_CD
          , '전체' AS FRUIT_NM
      FROM DUAL
         
      UNION ALL
        
        SELECT FRUIT_CD
             , FRUIT_NM
         FROM FRUIT
   </select>

2. 기본값으로 세팅해준다.

※해당 글에서는 넥사크로를 사용하고 있다. jsp나 js를 사용하면 더 쉽다.

화면 load 시 '전체'값과 모든 Fruit 값이 조회되었을 것이므로,

set_index()를 이용해 전체 값을 기본값으로 세팅한다.

this.divFood.form.cboFruit.set_index(0);

넥사크로 데이터 셋

넥사크로는 기본적으로 데이터셋을 그리드에 연결해주면 데이터셋이 변경될때마다
바인딩하고있는 그리드의 내용 또한 변경된 것이 반영된다.

데이터셋이란? 데이타를 테이블 형태로 저장하는 오브젝트입니다.
라고 나와있다. 내 생각에는 데이터셋이 자바의 리스트 같은 느낌이다.
데이터셋에 내가 생각하는 클래스형태(VO)의 데이터를 추가,삭제,변경할 수 있다.
-------------------------------
자주쓸거 같은 데이터셋의 Property

밑에 속성은 this.데이터셋.속성으로 값을 가져오거나
this.데이터셋.set_속성 으로 셋팅할 수 있다. 속성명은 kebab케이스를 따르고있고
모두 프로퍼티 그대로 써야한다.
-------------------------------
colcount : 현재 데이터셋의 열 계수 값을 갖는 속성.
colinfos : 데이터셋의 열 정보객체를 목록으로 갖고 있는 속성.
filterstr : 데이터셋을 필터링할 조건식을 설정하는 속성.
rowcount : 현재 데이터셋의 레코드 개수를 갖는 속성

============================================
메소드

addColumn : 데이터셋에 열(Column)을 추가하는 메소드.
ex : this.ds.addColumn("column00","string");

addRow : 데이터셋의 마지막에 새로운 행(Row)를 추가하는 메소드.
ex : this.ds.addRow(); 

copyData : 지정한 데이터셋의 행데이터를 복사하는 메소드.
ex : this.ds.copyData(ds01,true);
2번째 인자는 필터링된 행만을 복사할지 여부. default는 false

filter : 데이터셋에서 조건식을 만족하는 행만 보이게하는 메소드

ex: this.ds.filter("dept_cd='A1'");
을 수행하면 dept_cd가 A1인 로우만 뽑아온다.

필터링조건을 초기화하려면 ""를 넣어주면된다.

findRow : 데이터셋의 지정한 열에서 입력된 값과 일치하는 
데이터를 갖는 첫번째행의 위치를 찾는 메소드.

ex: this.ds.findRow("column00","100");
이면 "column00"이 "100"인 행중 첫번째 행을 가져옴.
3,4번째인자는 int형태로 행의 시작위치, 끝위치+1이다.

넥사크로 그리드

그리드는 데이터셋의 내용을 격자모양(테이블)로 표현하는 컴포넌트이다.

그리드는 항상 데이터셋과 바인딩해서 사용한다.
따라서 데이터셋이 변하면 그리드에 반영되고 그리드가 변하면 데이터셋에 반영된다.(양방향 바인딩)

----------------------------
자주 쓸거같은 grid의 property

---------------------------
currentcell : 그리드의 현재 선택된 셀의 인덱스를 갖는 속성.
currentcol : 그리드에서 현재 선택한 열 인덱스를 갖는 속성.
currentrow : 그리드에서 현재 선택된 행의 인덱스를 갖는 속성.

===========================
메소드

getCellPos : 현재 선택된 셀에서 열의 인덱스 값을 가져오는 메소드.
getCellText : 해당 셀에 표시되는 텍스트 값을 가져오는 메소드.
getCellValue : 해당 셀의 text 속성에 바인드되거나 설정된 값을 가져오는 메소드.

==========================
이벤트
e의 속성

col : 클릭한 셀이 속한 밴드 내에서의 컬럼 인덱스 값을 나타내는 속성
row : 클릭한 셀에 해당하는 Dataset의 RowPosition 값을 나타내는 속성

넥사크로 그리드 초기화 넥사크로 그리드 summary 넥사크로 그리드 포맷 넥사크로 findrowexpr