PureJS 트리 체크박스, 행번호, 에디팅 데이터 확인 방법 문의
페이지 정보
작성자 라레 작성일 2021-09-22 19:20 조회 3,074회 댓글 0건본문
관련링크
안녕하세요
트리의 체크박스, 행번호, 에디팅 데이터 확인 방법 문의드립니다.
자세한 문의사항은 아래와 같습니다.
1. 트리 행번호, 체크박스 삽입 방법
아래와 같이 트리의 체크박스를 0번행에 삽입 할 경우, 트리구조가 체크박스에 삽입됩니다.
정상적으로 트리 행번호 > 체크박스 > 명칭 > 기타 로 셋팅 할 수 있는 방법 문의드립니다.
또한 기존 사용하던 행번호가 적용되지 않아 이도 확인 부탁드리겠습니다.
- ex.1 ) 체크박스 > 명칭 > 기타로 설정할 경우 (트리 기능 비정상)
- ex.2 ) 명칭 > 체크박스 > 기타로 설정할 경우 (트리 기능은 정상)
- 소스 샘플
stockView = new wijmo.collections.CollectionView(result, {
pageSize: 100,
trackChanges: true
});
// 페이지 이동
stockGridPager = new wijmo.input.CollectionViewNavigator('#stockGridPager', {
byPage: true,
headerFormat: '{currentPage:n0} / {pageCount:n0}',
cv: stockView
});
typeCdList = new wijmo.grid.DataMap(getTypeCdList(), 'id', 'name');
stockColumns = [
{ binding: 'name', header: '명칭', isReadOnly: true, width: 150, align:"center"},
{ isReadOnly: true, width: 35, align:"center"},
{ binding: 'id', header: '코드', isReadOnly: true, width: 150, align:"center" },
{ binding: 'level', header: '레벨', isReadOnly: true, visible: false },
{ binding: 'cost', header: '원가', isReadOnly: false, width: 100, align:"center" },
{ binding: 'sellPrice', header: '판매가', isReadOnly: false, width: 100, align:"center" },
{ binding: 'tagQuantity', header: '재고알림수량', isReadOnly: false, width: 150, align:"center"},
{ binding: 'activeYn', header: '활성화', isReadOnly: false, width: 80, align:"center"},
{ binding: 'edit', header: '정보수정', isReadOnly: true, width: 150, align:"center",
cellTemplate: wijmo.grid.cellmaker.CellMaker.makeButton({
text: '<b>수정</b>',
click: (e, ctx) => {
showPop('modify_building');
}
})
}
];
stockGrid = new wijmo.grid.FlexGrid('#stockGrid', {
columns : stockColumns,
itemsSource: stockView,
headersVisibility: 'Column',
childItemsPath: ['item', 'item', 'item'],
autoGenerateColumns: false,
formatItem:function(s,e){
if((e.panel.cellType==1)&&(s.activeEditor)){
if((s.editRange.row==e.row)&&(s.editRange.col==e.col)){
return;
}
}
if (e.panel == s.cells) {
var col = s.columns[e.col];
if (col.binding == 'edit' ) {
//셀 서식
var html;
var level = s.getCellData(e.row, 'level');
if(level != 3){
html = '';
e.cell.textContent = html;
}
}
}
},
loadedRows: function (s, e) {
s.rows.forEach(function (row) {
row.isReadOnly = false;
});
},
cellEditEnding: function (s, e) {
var col = s.columns[e.col];
var inven = s.columns[e.col - 1];
if (col.binding == 'cost' || col.binding == 'sellPrice' || col.binding == 'tagQuantity') {
var value = wijmo.changeType(s.activeEditor.value, wijmo.DataType.Number, col.format);
if( !wijmo.isNumber(value)){
e.cancel = true;
e.stayInEditMode = false;
alert('숫자로만 입력 가능합니다.');
return false;
}
}
}
});
_setUserGridLayout('stockLayout', stockGrid, stockColumns);
//행번호 표시하기
stockGrid.itemFormatter = function (panel, r, c, cell) {
if (panel.cellType == wijmo.grid.CellType.RowHeader) {
cell.textContent = (r + 1).toString();
}
};
// 체크박스 생성
stockSelector = new wijmo.grid.selector.Selector(stockGrid, {
itemChecked: () => {
}
});
stockSelector.column = stockGrid.columns[1];
2. 트리 그리드의 수정 된 데이터를 확인하는 방법 문의
기존 그리드에 사용하던 View.itemsEdited 로 수정 라인이 확인되지 않아. 다른 방법을 사용해야하는지 문의드립니다.
- 소스
stockView = new wijmo.collections.CollectionView(result, {
pageSize: Number($('#stockGridPageCount').val()),
trackChanges: true
});
stockGrid.columns[1].width = 32;
stockGridPager.cv = stockView;
stockGrid.itemsSource = stockView;
}
//수정 아이템 확인
var editItem = stockView.itemsEdited;
3. 트리그리드 bool 데이터 필드 체크박스 표출 방법 확인요청 ( activeYn 필드 )
일반 그리드의 경우, 데이터 타입이 bool 일 경우 별도의 셋팅 없이 체크박스로 표출되었으나,
트리로 변환 시 체크박스로 표출되지 않고 실제 값 (true, false) 로 포출되어 ,체크박스로 표시 가능한 방법이 있는지 문의드립니다.
댓글목록
등록된 댓글이 없습니다.