체크바와 관계된 팁

체크바에 체크를 한 경우 행의 색을 지정하는 예제 입니다.

  gridView.setRowStyleCallback(function(grid, item, fixed) {
    if (item.checked) {
      return 'orange-color'
    }
  })

체크바에 체크한 행들의 정보를 가져오는 예제 입니다.

  var rowDatas = [];
  var rows = gridView.getCheckedRows();
 
  for (var i in rows) {
    var data = dataProvider.getJsonRow(rows[i]);
    rowDatas.push(data);
  }
 
  alert(JSON.stringify(rowDatas));

체크바에 체크한 행들을 삭제하는 예제 입니다.

아래 예제는 행 상태만 deleted 변경해주지만 실제로 그리드에서도 삭제되길 원한다면 아래와 같이 설정하면 됩니다.

  dataProvider.softDeleting = true;

  //체크된 행 가져오기
  var rows = gridView.getCheckedRows();
  //행 삭제하기
  dataProvider.removeRows(rows);
  //체크 해제하기
  gridView.checkRows(rows, false);

자식노드의 선택 여부에 따른 그룹 헤더 체크 예제 입니다.

그리드뷰 그룹핑 예제

아래 예제는 행 상태만 deleted 변경해주지만 실제로 그리드에서도 삭제되길 원한다면 아래와 같이 설정하면 됩니다.

  gridView.checkBar.headThreeStates = true
  gridView.checkBar.showGroupFooter = false

 gridView.onItemChecked = (grid, itemIndex, checked) => {
    const model = grid.getModel(itemIndex)
    grid.getDescendantModels(model)?.forEach((model) => grid.checkModel(model, checked, false, false))
 
    let p = grid.getModel(model.itemIndex)
 
    while ((p = grid.getParentModel(p, true))) {
      let checkCnt = 0
      let indeterminateCnt = 0
      const children = grid.getChildModels(p, true).filter(model => {
        if (model.type !== "footer") {
          return model;
        }
      })
 
      for (const child of children) {
        grid.isCheckedModel(child) && checkCnt++
        grid.isIndeterminateModel(child) && indeterminateCnt++
      }
 
      if (checkCnt === 0) { 
        // 전체 체크 안됨.
        grid.checkModel(p, false, false, false)
        if (indeterminateCnt > 0) {
          grid.indeterminateModel(p, true)
        }
      } else if (checkCnt === children.length) {
        // 전체 체크됨.
        grid.checkModel(p, true, false, false)
      } else {
        // 일부만 체크된 경우.
        grid.indeterminateModel(p, true)
      }
    }
  }

트리뷰 예제

treeView.onItemChecked = (tree, itemIndex, checked) => {
  const model = tree.getModel(itemIndex);
  tree.getDescendantModels(model).forEach(model => tree.checkRow(model.dataRow, checked, false, false));
  let p = tree.getModelOfRow(model.dataRow);
 
  // 규칙을 생각해 보자. checked하고는 크게 상관없다.
  while (p = tree.getParentModel(p, true)) {
    let checkCnt = 0;
    let indeterminateCnt = 0;
    const children = tree.getChildModels(p, true);
    for (const child of children) {
      tree.isCheckedRow(child.dataRow) && checkCnt++;
      tree.isIndeterminateRow(child.dataRow) && indeterminateCnt++;
    }
    if (checkCnt === 0) {
      // 전체 체크 안됨.
      if (p.dataRow < 0) {
        // 특정 header에 check를 하는 경우.
        tree.columnByName("treeName").checked = false;
      } else {
        tree.checkRow(p.dataRow, false, false, false);
      }
 
      if (indeterminateCnt > 0) {
        tree.indeterminateRow(p.dataRow, true)
      }
    } else if (checkCnt === children.length) {
      // 전체 체크됨.
      if (p.dataRow < 0) {
        tree.columnByName("treeName").checked = true;
      } else {
        tree.checkRow(p.dataRow, true, false, false);
      }
    } else {
      // 일부만 체크된 경우.
      tree.indeterminateRow(p.dataRow, true)
    }
  }
}

Group Footer 표시여부 조작하기 상태바와 관계된 팁