가로 스크롤이있는 dgrid

많은 열이 포함 된 테이블에 데이터를 표시하는 dgrid가 있습니다. dgrid의 기본 레이아웃은 페이지에서 모든 열을 볼 수있게합니다. 즉, 열이 축소되어 각 열의 전체 머리글이나 데이터를 볼 수 없습니다. 나는 모든 열을 표시 하 고 싶습니다가로 스크롤이있는 dgrid

Table with default layout

는 그 안에 포함 된 모든 데이터와 헤더 정보를 볼 수 확대했다. 그런 다음 모든 열을 보려면 옆으로 스크롤하려면 가로 스크롤 막대가 필요합니다. dgrid-row-table의 기본 레이아웃을 table-layout: fixed에서 table-layout: auto으로 변경하여이 작업을 수행 할 수 있었지만 그때 열이 정렬되지 않았습니다.

Table with full columns that don't line up

많은 기둥과 가로 스크롤와 dgrid/OnDemandGrid를 사용하는 방법이 있나요?

출처

2013-01-24 Brian

내 솔루션은 dgrid/OnDemandGrid를 사용하지 않지만 여전히 작동합니다.

1/같이 용기 그리드 입력 :

<div id="container"> 
    <div id="grid" style="width:100%;height:100%"></div> 
</div>

2/세트의 폭, 높이 및 CSS 스크롤 :

#container{ 
    height: 200px; 
    width: 800px; 
    overflow: auto; 
}

3/모눈의 구조가 넣어 요소 "자동"을 "폭"

var gridLayout = [ 
        { 
         defaultCell: { width: 8, editable: false, type: cells._Widget, styles: 'text-align: right;' }, 
         cells: [ 
           { name: "ID"    , field: "id"   , width: "auto" }, 
           { name: "Reg."    , field: "reg"   , width: "auto", editable: true }, 
           { name: "Type"    , field: "type"   , width: "auto" } 
        ];

,691 (예)

행의 크기가 완전히 커져서 가장 큰 콘텐츠가 표시되고 div 컨테이너가 스크롤됩니다.

희망이 있으면 도움이 될 것입니다.

출처

2013-01-25 13:03:23 tufekoi

이 dgrid 함께 할 수있는 예를 볼 수 있습니다. 아래 내 대답을 참조하십시오 –

dGrid는 기본적으로 지원합니다. dgrid의 너비를 설정하고 각 열에 대해 최소값을 설정하기 만하면됩니다. 컬럼의 폭이 dgrid의 폭보다 큰 경우 수평 스크롤 :

JS 바이올린 http://jsfiddle.net/e9jad/7/

.dgrid-grid { 
    width: 100% 
} 
.dgrid-cell { 
    width: 400px; 
}

을 dgrid의 높이가 당신이 할 수있다, 그래서 기본적으로 30em로 설정되어 명심 이것을 변경하고 싶거나 스크롤이 컨트롤의 맨 아래에있을 수 있습니다.

또한 당신은 도장 테스트 http://dojofoundation.org/packages/dgrid/js/dgrid/test/widths.html

출처

2014-03-31 08:30:29

당신은 피들에 CSS 문서를 언급합니다 - 링크를 포함 할 수 있습니까? 나는 내 dgrid에 자동 높이를 얻으려고 노력하고있어, 그것은 나를 미친 운전! – streetlight

@streetlight이 경우는 가로 스크롤입니다. 자동 높이의 경우 http://www.sitepen.com/blog/2012/05/03/css-styling-of-dgrid/을 참조하십시오. –

가로 스크롤이있는 dgrid

답변

관련 문제