2009-09-29 6 views
1

ASP.NET MVC에서 JavaScript 프레임 워크로 표시하고자하는 3 세트의 표 형식 데이터가 있습니다. 탭에 별도의 격자를 포함시킬 수 있다는 것을 알고 있지만 특히 3 개의 개별 격자가 만들어 졌기 때문에 대형 데이터 세트가 관련되어있을 때 비효율적 인 것처럼 보입니다. 스프레드 시트에서 여러 탭을 사용하여 수행하는 작업을 에뮬레이션하는 JavaScript DataGrid를 찾지 못했습니다. 탭이있는 좋은 JavaScript 그리드는 무엇입니까?

http://developer.yahoo.com/yui/examples/datatable/dt_dynamicfilter_source.html

내가 jQuery로 조금 알고 있어요,하지만 쉽게 어떤 프레임 워크로 전환 할 의향이 : YUI에서이 예제는하지만 가까이 올 수 있습니다. 나는 정말로 데이터를 편집 할 필요가 없다. 어떤 제안?

편집 : 저는 이것이 jQuery에 관한 것이 아닙니다. 의견 중 하나에서 제안한 것처럼 내 시나리오에 대한 세부 정보가 도움이 될 수 있습니다. 수천 개의 레코드를 포함하는 주문 시스템의 표 데이터를 표시하려고합니다. 3 탭을 원합니다 :

  1. 아직 지불되지 않은 주문이 모두 시스템에 입력되었습니다.
  2. 특정 공급 업체의 모든 주문입니다.
  3. 지불 된 모든 주문입니다.

각 범주에는 수천 개의 행이 있으므로 사용자가 페이징을 시작한 경우에만 데이터를로드하려고합니다.

필자는 3 개의 개별 격자가있는 탭 (각 탭 내 하나)이 성능이 좋지 않다고 생각했습니다. 나는 실제로 시도하지는 않았으므로 아마 조기에 최적화하는 것으로 유죄 일 것입니다. 탭 지원 기능이 내장 된 그리드를 찾고 있습니다. 나는 jQuery에 대한 것이 있다고 생각하지 않는다. 아마도 ExtJS?

+0

참조 http://stackoverflow.com/questions/159025/jquery-grid-recommendations –

+0

@Robert. 감사. 예, 나는 그것을 보았습니다. 탭이 내장 된 jQuery 그리드는 보이지 않습니다. – royco

답변

1

Ext JS로 태그를 지정 했으므로 Ext JS를 사용하여 탭에 그리드를 렌더링하는 것이 매우 간단하다는 것을 말씀 드리겠습니다. 또한 지연로드/렌더링을 지원하므로 첫 번째 탭/격자 만 처음에로드되고 다른 탭/격자는 첫 번째 액세스시로드됩니다. 귀하의 특정 요구 사항을 알지 못하면 더 이상 논평하기가 어렵습니다.

EDIT (편집 된 질문에 기반 함) : Ext 그리드는 탭핑을 직접 지원하지 않지만 동일한 효과에 대해 언급 한 TabPanel 내에 포함될 수 있습니다. 그러나 귀하의 설명에 따르면, 그것은 나에게 필터링 시나리오처럼 들립니다. 하나만 표시 될 때 여러 그리드의 오버 헤드가 발생하는 지점이 표시되지 않으며 각각의 목적은 동일한 데이터의 특정보기 (즉, 필터)를 표시하는 것입니다. 필자는 도구 모음이나 필터 사이에 토글을 제공하는 몇 가지 다른 방법을 사용하는 단일 표를 사용하고 Ext의 기본 제공 저장소 필터링/쿼리를 사용하여 필요에 따라보기를 만듭니다. Ext 그리드는 상자 밖에서 페이징을 지원합니다 (클라이언트 또는 서버, 수천 개의 레코드 서버). 큰 데이터 세트의 가상 스크롤 - 페이징을 제공하는 LiveGrid이라는 매우 유명한 플러그인도 있습니다.

다른 프레임 워크에서 Ext를 옹호하지 않아도됩니다. 나는이 문제에 가장 익숙해 져서 문제를 아주 잘 해결할 수 있다고 생각합니다. 나는 너 자신을 위해 그것을 시험해 보길 권할 것이다.

+0

ExtJS Grid를 사용하는 경우 화면 판독기로 페이지를 읽는 사람들이 없기를 바랍니다. EXTJS Grid는 시각적으로 아름답고 훌륭한 기능을 가지고 있지만 HTML 내부는 두렵습니다. – epascarello

+0

@bmoeskau : 원래 게시물에 대한 내 요구 사항에 대한 세부 정보를 추가했습니다. – royco

+0

예, Ext는 복잡한 html을 사용하여 위젯을 렌더링하는 유일한 RIA 프레임 워크입니다. 굉장한 점. –

1

jQuery Grid는 사람들이 많이 사용하는 것입니다. 나는 그것을 사용하고 꽤 좋다.

jqGrid Link

나는 세 개의 탭으로 격자를 그려하지 않을 것입니다. 탭 컨트롤과 함께 단일 그리드를 사용하고 필요에 따라 jQuery를 통해 데이터를로드합니다.

탭을 눌렀을 때 동적으로로드 할 수있는 세 개의 PartialView가있을 수도 있습니다.

+0

그러면 탭을 잃어 버릴 때 하나의 큰 이점을 잃게됩니다. 탭을 전환 할 때 데이터를 다시로드 할 필요가 없습니다. – royco

+0

사실이긴하지만 탭으로 전환 할 때 데이터를로드 할 수 있으며 다음 번에 스위치를 전환하면 데이터를 표시 할 수 있습니다. 그렇게하면 사용자가 요청하는 데이터 만로드됩니다. 탭을 전환 할 때마다 실제로 jQuery 포스트 백을 수행하고 변경 사항을 확인한 다음 변경 사항 만로드합니다. 하나의 그리드에서 모든 탭을 수행 할 때 큰 코드 조각이 될 수있는 것보다는 코드의 작은 부분을 변경할 수 있기 때문에 여전히 부분 뷰 메서드를 사용합니다. – griegs

0

당신은 탭을 만들 JS tab object를 사용할 수 있습니다 사용할 수 있습니다.

그리고 javascript grid framework을 사용하여 그리드를 만들고 데이터를 그리드에 채우십시오.

관련 문제