Front End

동적으로 columnDefs에 필드 추가해주기

DevHam94 2023. 7. 28. 18:03
for(var i=1;i<=5;i++){
	var type = { visible:false, displayName: '정보 유형'+i, field: 'type'+i, enableCellEdit : false, allowCellFocus : true, cellClass : scope.cellClassSet}
	var count = { visible:false, displayName: '정보 기관수'+i, field: 'count'+i, enableCellEdit : false, allowCellFocus : true, cellClass : scope.cellClassSet}		scope.gridOptions.columnDefs.push(type);
	scope.gridOptions.columnDefs.push(count);
}

자바스크립트에서는 이렇게 scope를 var scope = angular.element(document.getElementById("-uiGrid")).scope(); 이런식으로 추가해준다.

 

혹은 

<c:forEach var="item" items="${itemList}">
		var newColumn = { displayName: "${item.item_name}", width:"10%", field: "${item.item}", enableCellEdit : true, cellClass : "center", allowCellFocus : false,  enableSorting: false, enableColumnMenu: true, enableHiding: false, cellTemplate : '<div class="ui-grid-cell-contents" style="font-size:15px;"><input type="checkbox" style="margin : 0 0 0 0;" name="${item.item}" id="${item.item}" ng-checked="row.entity.${item.item} ==\'Y\'" ng-click="grid.appScope.checkboxClick(\'${theme.item}\', row)"></div>'
		}
		$scope.gridOptions.columnDefs.push(newColumn);
</c:forEach>

controller에서 itemList에 item의 item_name, item등의 정보를 담고 var에 item을 선언해주어 item.item_name처럼 동적으로 컬럼을 넣어줄 수 있다. 다만 필드를 설정해주다보니까. row의 아이디를 주는게 아니라 한 field의 아이디를 주는걸 알아야한다. 

 

이럴때 값을 넣기가 애매할 수 있는데 그럴때는 아래와같은 방법으로 Y라는 값을 cell에 넣을 수 있다. 

$scope.gridOptions.data[index][fieldName] = "Y";