선우아범의 놀이터

/**
* x 가 row.
* x.cssClass만 주고 컬럼 레벨에 cssClass를 주지 않으면 wj-cell 에 적용된 색이 row 전체로 표시됨.
* tag.use_yn 는 Binding ID
*/
GridAPI.GridManager.GetGridById('TagGrid').provider.loadedRows.addHandler(function(grid){
    grid.rows.forEach(function(x) {
         console.log(x.grid.getColumn('tag.use_yn'))
         console.log(x)
         console.log(x.dataItem.tag.use_yn)
         if (x.dataItem.tag.use_yn == 'Y') {
             x.cssClass = "custom-BG-blue"
             x.grid.getColumn('tag.use_yn').cssClass="bgColor"
         } else {
             x.cssClass = "custom-BG-red"
             x.grid.getColumn('tag.use_yn').cssClass="bgColor"
         }
    })
})

// 스타일 예시

.custom-BG-red.bgColor.wj-cell{
  background-color: red;
}

.custom-BG-blue.bgColor.wj-cell{
    background-color: blue;
}

.custom-BG-red.wj-cell{
  background-color: red;
}

.custom-BG-blue.wj-cell{
    background-color: blue;
}

let gridObj = GridAPI.GridManager.GetGridById("MainGrid");
gridObj.provider.cells.hostElement.addEventListener('click', function(e){
    let click = gridObj.provider.selection;
    console.log(click);// CellRange {_row: 5, _col: 8, _row2: 5, _col2: 8}
    // 이런식으로 데이터를 확인할 수 있다.
    console.log(gridObj.dataSource._ds[click._row])
});

sass 형태로 컴파일러없이 웹으로. 

https://www.sassmeister.com/

$gridstack-columns: 24;
.grid-stack.grid-stack-24 > .grid-stack-item {
    min-width: (100 / $gridstack-columns);

    @for $i from 1 through $gridstack-columns {
        &[gs-w='#{$i}'] { width: (100 / $gridstack-columns) * $i; }
        &[gs-x='#{$i}'] { left: (100 / $gridstack-columns) * $i; }
        &[gs-min-w='#{$i}'] { min-width: (100 / $gridstack-columns) * $i; }
        &[gs-max-w='#{$i}'] { max-width: (100 / $gridstack-columns) * $i; }
    }    
}