SMART datagrid v1.4 > Examples

Back  Forward

Check Bar  Example

그리드의 각 checked 상태를 가질 수 있다. EditOptions.checkabletrue면 실행 시간에 사용자는 그리드 왼쪽에 표시되는 Check Bar의 check셀들을 마우스로 클릭해서 그리드행들의 checked 상태를 변경할 수 있다. 또, checked와 관련된 많은 api 속성들과 메쏘드들이 존재한다. 

Grid - 1
rows

true로 지정하면 사용자는 한 행만 선택할 수 있고, check 상자의 모양도 radio 버튼 형태로 표시된다. 

CheckBar.draggable을 true로 설정하면 사용자는 각 체크 셀을 일일히 클릭하는 대신 그 위치를 드래그함으로써 선택할 수 있게 된다. ctrl키를 누른 상태에서 드래그를 하면 체크상태가 토글된다. 

Code -1
    grid.checkBar().setExclusive(ev.target.checked);

그리드 행의 Check 상태는 동적 스타일에도 사용할 수 있다.  

Code -2
    grid.body().setCellDynamicStyles([{
        criteria: 'checked',
        styles: { background: '#3000ff00' }
    }]);

Checked된 행의 목록은 GridBase.getCheckedRows 메쏘드로 가져올 수 있다.  

Code -3
    var rows = grdMain.getCheckedRows();
    grdMain.deleteRows(rows, true);

또는 unChecked된 행의 목록은 GridBase.getUnCheckedRows 메쏘드로 가져올 수 있다. 

Code -4
    var rows = grdMain.getUnCheckedRows();

그리드행이 checked 상태인 지 알려 주거나, 지정된 행들을 check, uncheck 하는 api 들 또한 존재한다. 아래 그리드에서 테스트하면 된다. 그리드행의 checked 상태는 데이터셋의 값이 아니라 그리드 수준에서 관리한다. 즉, 두 그리드가 같은 데이터셋에 연결되어 있지만 아래쪽 그리드에서 지정된 checked 상태와 위 그리드의 checked 상태는 별개다. 


Grid - 2
rows

CheckBar.checkAllExpression이나 checkAllCallback을 설정하면 사용자가 "모두 선택"을 클릭할 때 지정된 수식이나 callback에서 true를 리턴한 행들만 check한다. 


Grid - 3
rows

1.4.4 버전부터 CheckBar.checkBoxImageList 에 이미지를 등록하여 CheckBar 셀에 표현되는 모양을 이미지로 대체할수있다. 

Code -5
   grdMain.registerImageList({
        name: "checkbar",  //아래의  checkBoxImageList에서 사용할 임의의 이름 등록
        rootUrl: "/repo/grid/resource/images/",
        items: [
          "default-checkbox.png",            //0
          "check-checkbox.png",              //1 
          "default-inactive-checkbox.png",   //2
          "check-inactive-checkbox.png",     //3
        ]
    });
    grdMain.setOptions({
        checkBar: {
            checkBoxImageList:'checkbar',
            defaultIconIndex :0,                         //기본상태
            checkedIconIndex :1,                     //체크된 상태
            defaultInactiveIconIndex :2,           //비활성화 기본상태
            checkedInactiveIconIndex :3,        //비활성화 체크상태
        }
    });


소스보기 JSP 

See Also
CheckBar
CheckBar.exclusive
EditOptions.checkable
GridBase.checkBar
GridBase.checkRow
GridBase.checkRows
GridBase.checkAll
GridBase.getSelectedRows
GridBase.onRowChecked
GridBase.onRowsChecked
Examples
Checkable Expression & Callback