jquery grid 예제

jquery grid 예제

정렬을 지정하는 jqGrid에는 정렬 이름과 정렬 순서의 두 가지 주요 옵션이 있습니다. sortname의 기본값은 빈 문자열이며, 이는 그리드가 정렬되지 않은 상태에서 표시된다는 것을 의미합니다. 이는 행의 순서가 입력 데이터의 항목 배열에 있는 항목의 순서와 일치한다는 것을 의미합니다. sortname(예: sortname: “invdate”)을 지정하면 그리드는 먼저 입력 데이터의 속성 invdate를 비교하는 데이터를 정렬합니다. 기본적으로 속성의 값은 문자열로 비교됩니다. “2015-10-31″과 같은 ISO 날짜 형식을 사용하면 충분하지만 일반적인 경우에는 잘못될 수 있습니다. 문자열비교는 기본적으로 대/소문자를 구분하지 않지만 사용 무시대문자: false 옵션에 의해 behafior를 변경할 수 있습니다. 기본 정렬 유형인 “text”를 변경하는 미리 정의된 값(“정수”, “숫자” 및 “날짜”)의 열 정렬 유형에 포함할 수 있습니다. sorttype을 함수로 정의하거나 콜백 함수 sortfunc를 지정하여 항목 비교를 최대한 제어할 수 있습니다. 빈

비교적 복잡한 div 및 테이블 구조로 변환된다는 점을 이해하는 것이 중요합니다. 예를 들어 Chrome 개발자 도구를 사용하여 만든 후 그리드를 검사할 수 있습니다: 기본적으로 열 헤더를 클릭하면 정렬 열이 변경되거나 정렬 순서가 반전됩니다.

세StateSort의 사용 : true는 열 헤더를 3-d 클릭하면 그리드가 정렬되지 않도록 동작을 변경합니다. 다음 그리드에서 정렬의 3 상태 동작을 시도할 수 있습니다., 어디 우리가 추가 옵션 sortIconsBeforeText: true, 열 헤더의 텍스트 앞에 정렬 아이콘을 배치. 열 너비가 너무 작아서 컬럼 헤더의 텍스트가 코팅 아이콘과 함께 전체표시되지 않더라도 정렬 아이콘을 표시하는 것을 선호하는 경우 실용적일 수 있습니다. 우리는 옵션 아이콘을 제거 : “fontAwesome”추가 마지막 예에서, iconSet 옵션의 기본값이 iconSet임을 보여주기 위해 : “대신 iconSet : “jQueryUI”) 사용 의 경우 부트 스트랩 CSS. column ship_via의 입력 데이터에는 값 “FE”, “TN” 또는 “DH”가 포함됩니다. 값은 형식 옵션의 값 속성을 기반으로 “페덱스”, “TNT” 또는 “DHL”로 표시됩니다. 데이터의 첫 번째 항목은 conatins 및 ship_via 속성을 하지 않습니다 및 그리드 속성 기본값에 따라 항목에 대 한 “DHL” 표시: 형식 옵션의 “DH” jqGrid에는 다양한 옵션, 콜백 함수 및 이벤트가 있어 그리드의 동작을 완전히 사용자 정의할 수 있습니다.

Share this post