ax5ui / ax5ui-grid

Javascript UI Component - GRID ( Excel Grid, jqGrid, angularjs grid, jquery grid, SlickGrid, ag-grid gridify)
http://ax5.io/ax5ui-grid/demo/index.html
MIT License
99 stars 36 forks source link

Row 단위의 색상 처리 #80

Closed playok closed 7 years ago

playok commented 7 years ago

좋은 그리드 만들어 주셔서 감사합니다.

혹시 styleClass를 이용해 Cell단위가 아니라 아래와 같이 row 단위로 특정 컬럼의 값에 따른 색상 처리는 가능한지요?

rowcolor_easyui_demo

rowStyler: function(index,row) {
    if (row.listprice < 30){
        return 'background-color:#6293BB;color:#fff;font-weight:bold;';
     }
}

참고 사이트 / SampleDemo

thomasJang commented 7 years ago

image

style만 주면 자유도가 떨어져서 class를 주는 쪽으로 기능을 추가 하였습니다. 캡처를 참고하세요.

firstGrid.setConfig({
                target: $('[data-ax5grid="first-grid"]'),
                sortable: true,
                multiSort: true,
                multipleSelect: false,
                body: {
                    columnHeight: 50,
                    trStyleClass: function(){
                        return (this.item.saleType === "A") ? "RED" : "";
                    },
                    onClick: function () {
                        console.log(this);
                        this.self.select(this.dindex);
                        console.log(this.item);
                    },
                    onDBLClick: function () {
                        console.log("DBLClick", this);
                    },
                    onDataChanged: function () {

                    }
                },
                columns: [
                    {key: "b", label: "필드B", align: "center"},
                    {key: "companyJson.대표자명", label: "대표자명", width: 100, align: "center"},
                    {key: "saleDt", label: "판매일자", width: "*", align: "center", formatter: function formatter() {
                        return ax5.util.date(this.value, {"return":'yyyy/MM/dd'});
                    }},
                    {key: "customer", label: "고객명"},
                    {key: "saleType", label: "판매타입"}
                ]
            });
playok commented 7 years ago

빠른 반영 감사합니다.~^^

playok commented 7 years ago

frozenColumnIndex 속성과 함께 사용시 첨부한 이미지와 같은 현상이 일어납니다. Frozen된 영역과 일반 Grid영역 사이에 마우스가 이동시 엇갈려서 동작하는 현상이 있습니다.

ax5_table_col_lock

thomasJang commented 7 years ago

상황을 재현해 보려고 테스트 해봤는데요. 문제가 발생되지 않네요. 문제가 발생되는 코드를 올려주시면 확인이 가능하겠습니다.

playok commented 7 years ago

확인결과 이미 정의된 CSS 와의 충돌로 발생된 문제였습니다. 번거롭게 해드려서 죄송합니다.