2012-08-06 14 views
0

왼쪽에 HTML 테이블 열을 정렬하고 싶지만 테이블은 동적으로 wijmo (jquery 라이브러리)의 wijgrid를 사용하여 json에서 UI에오고 있습니다. ..... 테이블의 행을 정렬하는 방법은 알고 있지만 잘 모르겠습니다 wijgrid에서 수정 될 수있는 헤더 열을 정렬하는 방법 (확실하지 않습니다).wijmo ..의 헤더 텍스트를 정렬하는 방법은 무엇입니까?

나는 행 정렬로는 잘 작동하지만 헤더 정렬로는 작동하지 않는 코드 아래에서 시도했다.

내 코드 :

$("#userlist").wijgrid({ 

ensureColumnsPxWidth:true, 

columns: [ 

{headerText: "UserId", dataType:"string",width:"8%", 
                  cellFormatter: function (args) { 

if (args.row.type & $.wijmo.wijgrid.rowType.data) { 

args.$container 
.css("text-align", "center") 

return false; 

} } 
                                     }, 
]              }); 

나에게 해결책을 알려주세요 ..... 감사합니다 티나!

답변

1

데이터 대신 헤더 행 유형을 확인하기 위해 if 문을 변경하십시오. 당신이 모두 헤더와 데이터 행이 중심을하려는 경우 (또는 모두 수표를 꺼내.

if (args.row.type & $.wijmo.wijgrid.rowType.header) { ... } 

나는 그런 다음 모든 셀에 스타일을 렌더링되지 않습니다. 대신하지만 CSS를 사용하는 것이 좋습니다 것입니다. 순수 CSS의 솔루션을 가장 좋은 것입니다 당신은 너무 같은 것을 수행 할 수 있습니다..

Wijmo 적 FlexGrid V5에서
<style type="text/css"> 
    .wijmo-wijgrid .wijmo-wijgrid-headerrow .wijmo-c1basefield 
    { 
     text-align: left; 
    } 
    .wijmo-wijgrid .wijmo-wijgrid-headerrow .wijmo-wijgrid-headertext 
    { 
     padding: 0.5em 0.25em; 
    } 
</style> 
+0

: 대단히 감사합니다 :) 이것은 도움이됩니다 .. Thanks Tina !! – Tina

0

, 당신은 설정에 헤더 스타일을 포함하여 행/열을 itemFormatter 이벤트를 시도해야

// $scope is such your flexgrid object 
$scope.itemFormatter = function(panel, r, c, cell) { 
    var cellBinding = panel.columns[c].binding; 
    if (panel.cellType == wijmo.grid.CellType.ColumnHeader) { 
     cell.style.textAlign = 'center'; 
    } 
} 

위 sugg CSS 사용의 estion도 좋습니다. 다음 예를 따르므로 시도하십시오. http://jsfiddle.net/Wijmo5/j41xLz21/

관련 문제