Tabulator - 다른 열 참조, 집계/합계, 스타일(css) 변경

현재 또는 다른 cell 값을 참조하여 css 설정

• 현재 cell 값을 참조
• 현재 cell 이 위치한 열의 다른 cell(행) 값을 참조

위와 같이 조건을 검사하여서 cell (음영, 테두리 등) 및 TEST 의 style 지정.

function cell_is_useless (cell) {

    var value = cell.getValue();
    var memo = cell.getRow().getData().memo;
    var limit_date = cell.getRow().getData().limit_date;
    
    if (limit_date < $("#today").val()) cell.getElement().style.backgroundColor = "#df5645";

    if (memo == '연장 필요 없음') return "<span style='color: #bbb; text-decoration: line-through;'>" + value + "</span>";
    else return value;

}

var columns = [
    {title:"NO", field:"r_no", width:200, hozAlign:"right"},
    {title:"분류", field:"category", width:100},
    {title:"아이디", field:"site_id", width:100, hozAlign:"center", formatter:cell_is_useless},
    {title:"만기일", field:"limit_date", width:100, hozAlign:"center", formatter:cell_is_useless},
]

 

현재 또는 다른 cell 값을 참조하여 집계

상단 / 하단 집계 옵션인 topCalc / bottomCalc 를 커스터마이징하는 경우, row, column, cell 과 같은 컴포넌트를 사용할 수 없다.

현재 cell(행) 의 모든 열은 values 를 참조하고, 다른 행의 data 를 반복문으로 돌려야 한다.

function calc_rate (values, data, calcParams) {
//values - array of column values
//data - all table data
//calcParams - params passed from the column definition object

    var sum_prod = 0;
    var sum_sale = 0;

    data.forEach(function (row) {

        sum_prod = parseInt(sum_prod) + parseInt(row.prod);
        sum_sale = parseInt(sum_sale) + parseInt(row.sale);

    })

    var result = sum_sale / sum_prod * 100;
    result = result.toFixed(1) + '%';
    
    return 

}

var columns = [
    {title:"브랜드", field:"category", width:100},
    {title:"생산", field:"prod", hozAlign:"right", formatter:"money", formatterParams:{precision:false}, topCalc:"sum", topCalcFormatter:"money", topCalcFormatterParams:{precision:0}},
    {title:"판매", field:"sale", hozAlign:"right", formatter:"money", formatterParams:{precision:false}, topCalc:"sum", topCalcFormatter:"money", topCalcFormatterParams:{precision:0}},
    {title:"소진율", field:"out", hozAlign:"center", topCalc:calc_rate},
]

 

 

참고문헌 및 관련링크

1. Component Objects | Tabulator
2. Column Calculations | Tabulator