최고의 동적 JavaScript / JQuery 그리드 [닫힌]


87

JavaScript, JQuery 및 HTML로 작업하고 있습니다. 내 프로젝트의 UI는 완전히 동적입니다. 다음 기능을 지원하는 동적 JavaScript / JQuery Grid를 찾고 있습니다.

누구든지 다음 기능을 지원하는 좋은 오픈 소스 그리드가 있다고 말할 수 있습니까?

  1. 런타임에 그리드의 인스턴스를 만들고 DOM에 추가 할 수 있어야합니다.
  2. 열 템플릿 (텍스트 상자, 선택, 체크 박스 또는 입력 또는 간단한 텍스트) 지원
  3. 실시간으로 새 열 템플릿 설정 또는 기존 열 템플릿 교체를 지원합니다.
  4. 열 아래에있는 입력 컨트롤 (예 : 텍스트 상자, 확인란 ..)이 거의 활성화 되지 않고 비활성화 될 수 있습니다 .
  5. 실시간으로 setData ()를 지원합니다.
  6. 사용자가 입력 데이터를 변경하면 이벤트를 지원합니다.
  7. 행 선택을 지원해야합니다.
  8. 전체 그리드를 렌더링하지 않고 실시간으로 행을 추가하거나 행을 삭제합니다.
  9. 페이징을 지원합니다.
  10. 실시간으로 모든 열을 기준으로 정렬을 지원합니다.
  11. 사용자가 실시간으로 데이터를 정렬하면 이벤트가 발생합니다.
  12. 그리드 UI는 실현 가능한 열을 지원해야합니다.
  13. 자동 크기 조정 가능 (상위 요소의 크기에 따라 그리드의 크기를 자동으로 조정할 수 있으면 좋습니다)
  14. 확실히 좋은 문서가 있습니다.

7
직접 작성하십시오. 이러한 모든 기능을 원하면 직접 수행해야합니다. 맞춤형 솔루션은 항상 최고의 솔루션입니다.
Raynos 2011

28
항상 최선의 해결책인지는 잘 모르겠습니다. 내 말은
-InnoDB를

2
@Roynos, 나는 몇 가지 사항을 직접 작성했지만 정렬, 크기 조정 ... 등과 같은 모든 기능을 구현하는 데 많은 시간을 투자해야하므로 그리드 컨트롤을 찾고 있습니다. 나는 여전히 모든 그리드를 하나씩 평가하고 있습니다.
Somnath 2011

22
@Raynos 말도 안돼. 가장 좋은 솔루션은 최저 비용으로 작동하는 솔루션입니다. 이미 완료된 경우 왜 빌드합니까?
리처드

@RichardDesLonde 당신이 맞습니다. 내 옵션은 기존 최상의 솔루션을 선택하고 요구 사항에 따라 확장하는 것입니다.
Somnath

답변:


42

유용한 정보는 다음과 같습니다.

비어 있는:

지불 :

내 생각에 가장 좋은 항목은 Flexigrid와 jQuery Grid입니다.


지금까지 jQuery Grid를 좋아하기 시작했습니다. trirand.com/blog/jqgrid/jqgrid.html 하지만 여전히 잘 모르겠습니다. ... 최신 상태로 유지
Somnath

@Somnath-jQuery 그리드가 가장 만족 스러웠습니까? 비슷한 요구 사항이 있고 DataTables를 평가했지만 행을 추가하고 정렬 순서의 일부가되는 것이 제대로 작동하지 않습니다.
MattW

@MattW 예 저는 jQuery Grid를 좋아합니다. 데이터 추가는 정말 쉽습니다. 또한 플래그를 설정하여 모든 열을 정렬 할 수 있습니다. 내 요구 사항 목록이 정말 컸습니다. 그러나 내가 직접 만드는 것은 거의 없으며 몇 가지 경우에는 jQuery Grid를 사용하고 있습니다. 시원하고 쉬운 API도 얻었습니다. 이 시점에서 나는 jQuery Grid에 만족합니다. 좋습니다.
Somnath

@Somnath 그래서, 마침내 당신은 어느 것을 골랐습니까? I header DataTable도 좋은 옵션입니다. 어느 것이 가장 빠릅니까? 그리고 어느 것이 그룹화를 지원합니까?
Vivek Vardhan 2014 년


38

http://datatables.net/ 시도해 수 있습니다.

DataTables는 jQuery Javascript 라이브러리 용 플러그인입니다. 점진적 향상의 기반을 기반으로하는 매우 유연한 도구로, 모든 HTML 테이블에 고급 상호 작용 제어를 추가합니다. 주요 특징들:

  • 가변 길이 페이지 매김
  • 즉석 필터링
  • 데이터 유형 감지를 통한 다중 열 정렬
  • 열 너비의 스마트 처리
  • 거의 모든 데이터 소스의 데이터 표시
  • DOM, Javascript 배열, Ajax 파일 및 서버 측 처리 (PHP, C #, Perl, Ruby, AIR, Gears 등)
  • 테이블 뷰포트의 스크롤 옵션
  • 완전히 국제화 가능
  • jQuery UI ThemeRoller 지원
  • 견고 함-2600 개 이상의 단위 테스트로 뒷받침
  • 다양한 플러그인 inc. TableTools, FixedColumns, KeyTable 등
  • 무료입니다!
  • 상태 저장
  • 숨겨진 열
  • 테이블의 동적 생성
  • Ajax 데이터 자동로드
  • 커스텀 DOM 포지셔닝
  • 단일 열 필터링
  • 대체 페이지 매김 유형
  • 비파괴 DOM 상호 작용
  • 열 강조 표시 정렬
  • 고급 데이터 소스 옵션
  • 광범위한 플러그인 지원
  • 정렬, 유형 감지, API 함수, 페이지 매김 및 필터링
  • CSS로 완전히 테마 가능
  • 견고한 문서
  • 110 개 이상의 사전 빌드 된 예제
  • Adobe AIR에 대한 완벽한 지원

3
주요 기능에 대해 적절한 형식을 지정하십시오. 복사 / 붙여 넣기 만 사용하지 마십시오. 복사 / 붙여 넣기 후 한 번 읽어야하나요?

"비파괴 DOM 상호 작용"은 무엇을 의미합니까? 이것이 왜 새롭거나 특징인지, 그것이 무엇을 다루고 보장하는지 이해하는 데 어려움을 겪습니다.
John Zabroski

1
@John 더 이상 링크 된 페이지에 언급되지 않지만 웹에서 해당 문장을 검색하면 "v1.4의 가장 큰 변화는 비파괴 DOM 상호 작용입니다. 이것이 의미하는 바는 DataTables가 덮어 쓰지 않는다는 것입니다. 기능을 수행하기 위해 테이블 ​​요소 (진정한 점진적 향상!) 대신 요소를 이동합니다 .v1.3에서는 각 그리기에서 tbody에 필요한 HTML을 동적으로 생성하기 전에는 더 이상 그렇지 않습니다. 즉각적인 이점은 원래 테이블의 모든 속성 (클래스 등)이 보존되어 있다는 것이다 [...] "
CodeCaster

5
그것은 자유 소프트웨어가 아니라고 생각합니다.
David

4
이 멋진 DataTables 그리드는 편집 할 수없는 것 같습니다. 필요한 경우 편집 가능한 버전에 대한 비용을 지불해야합니다. editor.datatables.net/purchase/index
yetanothercoder 2015

8

동적 JQuery Grid에 대한 내 제안은 다음과 같습니다.

http://reconstrukt.com/ingrid/

https://github.com/mleibman/SlickGrid

http://www.datatables.net/index

가장 좋은 것은 :

DataTables 는 jQuery Javascript 라이브러리 용 플러그인입니다. 점진적 향상의 기반을 기반으로하는 매우 유연한 도구로, 모든 HTML 테이블에 고급 상호 작용 컨트롤을 추가합니다.

가변 길이 페이지 매김

즉석 필터링

데이터 유형 감지를 통한 다중 열 정렬

열 너비의 스마트 처리

거의 모든 데이터 소스의 데이터 표시

DOM, Javascript 배열, Ajax 파일 및 서버 측 처리 (PHP, C #, Perl, Ruby, AIR, Gears 등)

테이블 뷰포트의 스크롤 옵션

완전히 국제화 가능

jQuery UI ThemeRoller 지원

견고 함-2600 개 이상의 단위 테스트로 뒷받침

다양한 플러그인 inc. TableTools, FixedColumns, KeyTable 등

테이블의 동적 생성

Ajax 데이터 자동로드

커스텀 DOM 포지셔닝

단일 열 필터링

대체 페이지 매김 유형

비파괴 DOM 상호 작용

열 강조 표시 정렬

고급 데이터 소스 옵션

광범위한 플러그인 지원

정렬, 유형 감지, API 함수, 페이지 매김 및 필터링

CSS로 완전히 테마 가능

견고한 문서

110 개 이상의 사전 빌드 된 예제

Adobe AIR에 대한 완벽한 지원


5

agiletoolkit.org를 살펴보십시오. 2,4,6,7,9,10 및 12를 즉시 지원하는 CRUD 사용이 간편합니다 (데이터를 추가, 삭제할 때 그리드를 방어하기 위해 Ajax를 사용하고 jquery.

나는 몇 가지 예를 게시 할 것이지만 지금은 iPad에 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.