첫 번째 예 소개 ligerGrid는 ligerui 플러그인 시리즈의 핵심 컨트롤입니다. 사용자는 정렬, 페이징, 다중 헤더, 고정 열 등을 지원하는 아름답고 강력한 테이블을 빠르게 만들 수 있습니다.
로컬 데이터 및 서버 데이터(구성 데이터 또는 URL) 지원 정렬 및 페이징 지원(Javascript 정렬 및 페이징 포함) 열 "표시/숨기기" 지원 여러 테이블 헤더 지원 고정 열 지원 세부 행 지원 요약 행 지원 셀 템플릿 지원 테이블 편집 지원(세 가지 편집 모드, 셀 편집, 행 편집, 세부 편집) 트리 테이블 지원 그룹화 지원 코드 먼저 기본 CSS와 js 파일 소개
효과 데이터 구조테이블 데이터 구조 테이블 데이터에는 두 가지 속성이 있습니다. 하나는 행이고 다른 하나는 합계입니다. 그 중 Rows는 데이터 배열이고 Total은 총 레코드 수입니다. 사실 토탈에서는 로컬 데이터를 사용할 때 이를 제공할 필요가 없습니다. 로컬 데이터를 사용하는 형식은 다음과 같습니다.
id, name 모두 마음대로 커스터마이징할 수 있는 레코드 속성으로, 컬럼 구성 시 해당 컬럼을 구성할 필요는 없고 해당 표시 컬럼만 구성하면 됩니다. 후속 작업에서 이러한 속성을 얻을 수 있습니다. 예를 들어, getSelected() 메소드입니다. 사용자 정의 셀 함수 렌더링. 트리 테이블 데이터 구조 트리 구조 엔지니어는 테이블 데이터를 기반으로 다음과 같은 하위 매개변수를 추가합니다.
데이터를 바인딩하는 두 가지 방법 ligerGrid에는 데이터를 바인딩하는 두 가지 방법이 있는데, 하나는 로컬 데이터를 사용하고, 다른 하나는 서버 데이터를 사용하는 것입니다. 첫 번째 예에서는 데이터 매개변수를 구성했는데 이 방식이 로컬 방식입니다. 또 다른 방법은 URL 매개변수를 구성하고 원격 데이터를 사용하는 것입니다.
열 구성 테이블에 표시되는 열 수, 열 너비, 열 셀에 표시할 내용은 모두 columns 속성에 의해 구성됩니다.
{ display: 'serial number', //헤더 열에 표시되는 텍스트, html 지원 //헤더 내용에 대한 사용자 정의 함수 headerRender: 함수(열) { return "" column.display ""; }, name: 'id', //셀 매핑의 행 데이터 속성 align: 'center ' , //셀 내용 정렬: 왼쪽/가운데/오른쪽 hide: false, //숨길지 여부 width: 100, //열 너비 minWidth: 50, //최소 열 너비 isSort: true, //이 열의 정렬 허용 여부, 기본값은 정렬 허용 isAllowHide: true, //숨김 허용 여부, 허용되면 열에 표시됩니다. [열 표시/숨기기 마우스 오른쪽 버튼 클릭 메뉴] 유형: '문자열', //유형, 정렬에 사용 //사용자 정의 셀 렌더러 렌더: 함수(레코드, 행 인덱스, 값, 열) { //여기서는 그리드 //레코드 행 데이터 //rowindex 행 인덱스 //record[column.name] 에 해당하는 현재 값 값을 가리킵니다.//열 열 information return value; //셀에 표시된 이 HTML 콘텐츠를 반환합니다(일반적으로 값과 행 콘텐츠에 따라 구성됨) }, //열 요약 totalSummary: { align: 'center', //요약 셀 내용 정렬: 왼쪽/가운데/오른쪽 유형: 'count', //요약 유형 sum, max, min, avg, count. 동시에 여러 유형 가능 render: function (e) { //요약 렌더러, html을 반환하여 셀에 로드 //e 요약 개체(sum, max, min, avg, count 포함) return "
사용자 정의 셀 컬럼 이름은 행 데이터에 어떤 셀이 연결되는지 정의하는 속성입니다. 예를 들어, 위 예의 첫 번째 줄에서 이름이 id로 구성되면 "01"로 표시되어야 합니다. 이름으로 구성되면 "department 01"로 표시되어야 합니다. 셀 정렬을 결정하는 align 매개변수도 있습니다. 렌더링이 구성되지 않은 경우 셀에 표시되는 내용은 이름으로 결정됩니다.
{ 이름: 'id' , 표시: '일련번호', 너비: 200 }, { 이름: '이름', 표시: '이름', 너비: 300 }
위 셀은 기본 표시 모드입니다. 이 방법 외에도 포맷터 및 사용자 정의 기능을 사용할 수도 있습니다. 셀 내용 표시 규칙: , 렌더링이 구성된 경우 렌더링 을 사용합니다. 열의 유형 매개변수가 해당 포맷터를 확장하는 경우 렌더링을 위해 포맷터를 사용합니다. 예를 들어 통화 형식을 정의하는 포맷터 가 최종적으로 사용됩니다. 기본 표시 모드 포맷터 는 $.ligerDefaults.Grid.formatters['columntype']을 확장하여 구현됩니다. . 유형 매개변수입니다. 예를 들어 지금 통화 형식을 지정하려면
$.ligerDefaults.Grid.formatters['currency'] = 함수 (숫자, 열) { //현재 값 수 //열 열 정보 if (!num ) return "$0.00"; num = num.toString().replace(/$|,/g, '') if (isNaN(num)) num = "0.00"; >sign = (num == (num = Math.abs(num))); num = Math.floor(num * 100 0.50000000001) cents = num % 100; Floor(num / 100).toString(); if (cents < 10) cents = "0" cents for (var i = 0; i < Math.floor(( num .length - (1 i)) / 3); i ) num = num.substring(0, num.length - (4 * i 3)) ',' num.substring(num.length - (4 * i 3)); return "$" (((sign) ? '' : '-') '' num '.' 센트)
이렇게 하면 열 유형을 통화로 구성하면 됩니다. 이 기능은 셀 내용을 사용자 정의하는 데 사용됩니다
코드 복사 코드는 다음과 같습니다. { 디스플레이: 'UnitPrice', 이름: 'UnitPrice', align: 'right' ,type:'currency' }
렌더링
사용자 정의 셀 기능 사용자 정의 셀 기능은 열의 렌더링을 구성하는 것을 의미합니다. 임의의 HTML을 구성할 수 있습니다.
코드 복사 코드는 다음과 같습니다.vargrid = $("#maingrid" ).ligerGrid ({
열: [
{ 이름: 'id', 표시: '일련번호', 너비: 100, 렌더링: 함수(레코드, 행 인덱스, 값, 열) { //this는 그리드 //레코드 행 데이터 //rowindex 행 인덱스 //record[column.name] //열 열 정보에 해당하는 현재 값을 가리킵니다. return "< ;a href='edit.htm?id=" value "'>Edit"; } }, { 이름: 'id', 표시: '일련번호', 너비: 120, 렌더링: 함수(레코드, 행 인덱스, 값, 열) { return '<입력 유형 ="button" value ="Edit"/>' } }, { 이름: '이름', 표시 : '이름', 너비: 300 } ], data: { 행: Griddata } })
렌더링
셀 편집기 모든 편집기 구성은 $.ligerDefaults.Grid.editors에 정의됩니다(예:
정렬 및 페이징 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
