jQuery LigerUI 사용 튜토리얼 양식(1)_jquery
- WBOY원래의
- 2016-05-16 17:56:571343검색
첫 번째 예
소개
ligerGrid는 ligerui 플러그인 시리즈의 핵심 컨트롤입니다. 사용자는 정렬, 페이징, 다중 헤더, 고정 열 등을 지원하는 아름답고 강력한 테이블을 빠르게 만들 수 있습니다.
로컬 데이터 및 서버 데이터(구성 데이터 또는 URL) 지원
정렬 및 페이징 지원(Javascript 정렬 및 페이징 포함)
열 "표시/숨기기" 지원
여러 테이블 헤더 지원
고정 열 지원
세부 행 지원
요약 행 지원
셀 템플릿 지원
테이블 편집 지원(세 가지 편집 모드, 셀 편집, 행 편집, 세부 편집)
트리 테이블 지원
그룹화 지원
코드
먼저 기본 CSS와 js 파일 소개
코드 복사 코드는 다음과 같습니다.
코드를 복사하세요 코드는 다음과 같습니다.
데이터 구조 테이블 데이터 구조
테이블 데이터에는 두 가지 속성이 있습니다. 하나는 행이고 다른 하나는 합계입니다. 그 중 Rows는 데이터 배열이고 Total은 총 레코드 수입니다.
사실 토탈에서는 로컬 데이터를 사용할 때 이를 제공할 필요가 없습니다. 로컬 데이터를 사용하는 형식은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
{
행: [
{ id: '01', name: '부서 01' },
{ id: '02', name: '부서 02' },
{ id : '03', name: '부서 03' },
{ id: '04', name: '부서 04' },
{ id: '05', name: '부서 05' },
{ id: '06', 이름: '06부' },
{ id: '07', 이름: '07부' }
]
}
id, name 모두 마음대로 커스터마이징할 수 있는 레코드 속성으로, 컬럼 구성 시 해당 컬럼을 구성할 필요는 없고 해당 표시 컬럼만 구성하면 됩니다. 후속 작업에서 이러한 속성을 얻을 수 있습니다. 예를 들어, getSelected() 메소드입니다. 사용자 정의 셀 함수 렌더링. 행: [
{ id: '01', name: '부서 01' },
{ id: '02', name: '부서 02' },
{ id : '03', name: '부서 03' },
{ id: '04', name: '부서 04' },
{ id: '05', name: '부서 05' },
{ id: '06', 이름: '06부' },
{ id: '07', 이름: '07부' }
]
}
트리 테이블 데이터 구조
트리 구조 엔지니어는 테이블 데이터를 기반으로 다음과 같은 하위 매개변수를 추가합니다.
코드 복사 코드는 다음과 같습니다.
{
행: [
{ id: '01', 이름: '부서 01', 하위: [
{ id : '0101', name: '0101부' },
{ id: '0102', name: '0102부' },
{ id: '0103', name: '0103부' }
]
},
{ id: '02', 이름: '02부' },
{ id: '03', 이름: '03부' },
{ id: ' 04', name: '부서 04' },
{ id: '05', name: '부서 05' },
{ id: '06', name: '부서 06' },
{ id: '07', name: 'Department 07' }
]
}
데이터를 바인딩하는 두 가지 방법행: [
{ id: '01', 이름: '부서 01', 하위: [
{ id : '0101', name: '0101부' },
{ id: '0102', name: '0102부' },
{ id: '0103', name: '0103부' }
]
},
{ id: '02', 이름: '02부' },
{ id: '03', 이름: '03부' },
{ id: ' 04', name: '부서 04' },
{ id: '05', name: '부서 05' },
{ id: '06', name: '부서 06' },
{ id: '07', name: 'Department 07' }
]
}
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 "
}
},
//셀 편집기
editor: {
유형: ' text'
},
//여러 테이블 헤더 지원
columns: null
},
테이블의 열은 다음과 같은 매우 완전한 인터페이스를 제공합니다. 퍼지는. 콘텐츠 셀이든 헤더 셀이든 콘텐츠, 레이아웃, 크기를 사용자 정의할 수 있습니다.
사용자 정의 헤더
예를 들어 헤더에서 표시를 HTML 조각으로 직접 설정할 수 있습니다.
을 지원하거나 headerRender:
사용자 정의 셀
컬럼 이름은 행 데이터에 어떤 셀이 연결되는지 정의하는 속성입니다. 예를 들어, 위 예의 첫 번째 줄에서 이름이 id로 구성되면 "01"로 표시되어야 합니다. 이름으로 구성되면 "department 01"로 표시되어야 합니다. 셀 정렬을 결정하는 align 매개변수도 있습니다.
렌더링이 구성되지 않은 경우 셀에 표시되는 내용은 이름으로 결정됩니다.
위 셀은 기본 표시 모드입니다. 이 방법 외에도 포맷터 및 사용자 정의 기능을 사용할 수도 있습니다.
셀 내용 표시 규칙:
, 렌더링이 구성된 경우 렌더링
을 사용합니다. 열의 유형 매개변수가 해당 포맷터를 확장하는 경우 렌더링을 위해 포맷터를 사용합니다. 예를 들어 통화 형식을 정의하는 포맷터
가 최종적으로 사용됩니다. 기본 표시 모드
포맷터
는 $.ligerDefaults.Grid.formatters['columntype']을 확장하여 구현됩니다. . 유형 매개변수입니다. 예를 들어 지금 통화 형식을 지정하려면
{
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 "
총 개수:" e.count "
" }
},
//셀 편집기
editor: {
유형: ' text'
},
//여러 테이블 헤더 지원
columns: null
},
테이블의 열은 다음과 같은 매우 완전한 인터페이스를 제공합니다. 퍼지는. 콘텐츠 셀이든 헤더 셀이든 콘텐츠, 레이아웃, 크기를 사용자 정의할 수 있습니다.
사용자 정의 헤더
예를 들어 헤더에서 표시를 HTML 조각으로 직접 설정할 수 있습니다.
코드 복사 코드는 다음과 같습니다.
을 지원하거나 headerRender:
코드 복사 코드는 다음과 같습니다.
//Header content custom function
headerRender: function(column) {
return "< b>" 열.display "";
},
렌더링headerRender: function(column) {
return "< b>" 열.display "";
},
사용자 정의 셀
컬럼 이름은 행 데이터에 어떤 셀이 연결되는지 정의하는 속성입니다. 예를 들어, 위 예의 첫 번째 줄에서 이름이 id로 구성되면 "01"로 표시되어야 합니다. 이름으로 구성되면 "department 01"로 표시되어야 합니다. 셀 정렬을 결정하는 align 매개변수도 있습니다.
렌더링이 구성되지 않은 경우 셀에 표시되는 내용은 이름으로 결정됩니다.
코드 복사 코드는 다음과 같습니다.
{ 이름: 'id' , 표시: '일련번호', 너비: 200 },
{ 이름: '이름', 표시: '이름', 너비: 300 }
{ 이름: '이름', 표시: '이름', 너비: 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 '.' 센트)
이렇게 하면 열 유형을 통화로 구성하면 됩니다. 이 기능은 셀 내용을 사용자 정의하는 데 사용됩니다
렌더링
렌더링
열에 대한 매개변수가 많습니다. 여기에 모두 나열하지는 않겠습니다. 일반적으로 사용되는 몇 가지 매개변수만 소개하겠습니다.
자세한 내용은 API를 참조하세요. : http:// api.ligerui.com
정렬 및 페이징
정렬 및 페이징에도 두 가지 방법이 있습니다. 하나는 로컬 정렬 및 페이징입니다. 하나는 서버 정렬 및 페이징입니다. 여기서는 로컬 메서드만 소개합니다.
기본 상황. 정렬 및 페이징이 활성화되었습니다. 페이징 기능을 취소하려면
코드 복사
效果图
事件和方法
事件
var Grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: 'serial number', width: 200 },
{ name: ' name', display : 'name', width: 300 }
],
data: { Rows: Griddata },
onSelectRow: function (rowdata, rowindex) {
//데이터 행 레코드 행
//0부터 시작하는 행 인덱스
alert(rowdata.name);
}
})
grid.bind('SelectRow', function (rowdata, rowindex) {
//여기서는 모두 그리드를 가리킵니다
//행 레코드는 데이터 행에 대한 것입니다.
//행 인덱스는 0부터 시작합니다.
alert(rowdata.name);
})
方法
예
vargrid = $("#maingrid").ligerGrid({
columns: [
{ 이름: 'id', 표시: '일련번호', 너비: 200 },
{ 이름: '이름', 표시: '이름', 너비: 300 }
]
})
grid .set({ 데이터: { 행: Griddata} })
function selectRow(index) {
grid.select(index)
}
function getSelectRow() {
var 행 = Grid.getSelecteds();
for (var i in Rows) {
alert(rows[i].name)
}
}
$.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 }
})
렌더링
렌더링: 함수(레코드, 행 인덱스, 값, 열) {
//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에 정의됩니다(예:
코드 복사
코드는 다음과 같습니다: editor: { type: 'spinner' }
는 $ .ligerDefaults를 사용합니다. .Grid.editors['spinner'] 빌드할 편집기를 생성합니다.
ligerGrid는 확인란, 텍스트 상자, 날짜, 숫자 조정자, 드롭다운 상자 등의 내장 편집기를 제공합니다.
ligerGrid는 확인란, 텍스트 상자, 날짜, 숫자 조정자, 드롭다운 상자 등의 내장 편집기를 제공합니다.
렌더링
열에 대한 매개변수가 많습니다. 여기에 모두 나열하지는 않겠습니다. 일반적으로 사용되는 몇 가지 매개변수만 소개하겠습니다.
자세한 내용은 API를 참조하세요. : http:// api.ligerui.com
정렬 및 페이징 정렬 및 페이징에도 두 가지 방법이 있습니다. 하나는 로컬 정렬 및 페이징입니다. 하나는 서버 정렬 및 페이징입니다. 여기서는 로컬 메서드만 소개합니다.
기본 상황. 정렬 및 페이징이 활성화되었습니다. 페이징 기능을 취소하려면
코드 복사
코드는 다음과 같습니다. usePager: false
效果图
事件和方法
事件
| 事件名 | 参数 | 描述 |
| onAfterAddRow | (e) | 增加行后事件 |
| onAfterBeginEdit | (e) | 开始编辑后事件 |
| onAfterChangeColumnWidth | (column, newwidth) | 改变列宽度事件 |
| onAfterShowData | (data) | 显示完数据事件 |
| onAfterSubmitEdit | (e) | 提交编辑 事件 |
| onBeforeChangeColumnWidth | (column, newwidth) | 验证 改变列宽度 是否通过 |
| onBeforeCheckAllRow | (checked, grid element) | 选择前事件，可以通过return false阻止操作(复选框 全选/全不选) |
| onBeforeEdit | (e) | 编辑前事件 |
| onBeforeShowData | (data) | 显示数据前事件，可以通过reutrn false阻止操作 |
| onBeforeSubmitEdit | (e) | 验证编辑器结果是否通过 |
| onBeginEdit | (e) | 验证 开始编辑 是否通过 |
| onCancelEdit | (e) | 取消编辑 事件 |
| onChangeSort | () | 改变排序事件 |
| onCheckAllRow | (checked, grid element) | 选择事件(复选框 全选/全不选) |
| onCheckRow | (checked, rowdata, rowindex, rowDomElement) | 选择事件(复选框) |
| onContextmenu | (parm, e) | 右击事件 |
| onDblClickRow | (rowdata, rowindex, rowDomElement) | 双击行事件 |
| onDragCol | (node) | 拖动列事件 |
| onError | () | 错误事件 |
| onLoaded | () | 加载完函数 |
| onLoading | () | 加载时函数 |
| onReload | () | 刷新事件，可以通过return false来阻止操作 |
| onSelectRow | (rowdata, rowindex, rowDomElement) | 选择行事件 |
| onSubmit | () | 提交前事件 |
| onSuccess | () | 成功事件 |
| onToFirst | () | 第一页，可以通过return false来阻止操作 |
| onToggleCol | () | 切换列事件 |
| onToLast | () | 最后一页，可以通过return false来阻止操作 |
| onToNext | () | 下一页，可以通过return false来阻止操作 |
| onToPrev | () | 上一页，可以通过return false来阻止操作 |
| onUnSelectRow | (rowdata, rowindex, rowDomElement) | 取消选择行事件 |
예제
코드 복사 코드는 다음과 같습니다.
var Grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: 'serial number', width: 200 },
{ name: ' name', display : 'name', width: 300 }
],
data: { Rows: Griddata },
onSelectRow: function (rowdata, rowindex) {
//데이터 행 레코드 행
//0부터 시작하는 행 인덱스
alert(rowdata.name);
}
})
grid.bind('SelectRow', function (rowdata, rowindex) {
//여기서는 모두 그리드를 가리킵니다
//행 레코드는 데이터 행에 대한 것입니다.
//행 인덱스는 0부터 시작합니다.
alert(rowdata.name);
})
方法
| 方法 | 参数 | 描述 |
| addEditRow | (rowdata) |
|
| addRow | (rowdata, rowParm, isBefore, parentRow) |
|
| addRows | (rowdataArr) |
|
| appendRow | (rowData, targetRow, nearRow, isBefore) |
|
| beginEdit | (rowParm) |
|
| cancelEdit | (rowParm) |
|
| changeHeaderText | (columnparm, headerText) |
|
| changePage | (ctype) |
|
| changeSort | (columnName, sortOrder) |
|
| collapse | (targetRow) |
|
| collapseDetail | (rowParm) |
|
| deleteRow | (rowParm) |
|
| deleteSelectedRow | () |
|
| demotion | (targetRow) |
|
| endEdit | (rowParm) |
|
| expand | (targetRow) |
|
| extendDetail | (rowParm) |
|
| formatRecord | (record) |
|
| getAdded | () |
|
| getCheckedRowObjs | () |
|
| getCheckedRows | () |
|
| getChidren | (rowParm) |
|
| getColumn | (columnpam) |
|
| getColumns | (columnLevel) |
|
| getColumnType | (columnname) |
|
| getData | (status, removeStatus) |
|
| getDeleted | () |
|
| getParent | (rowParm) |
|
| getRowObj | (rowParm) |
|
| getSelected | () |
|
| getSelectedRow | () |
|
| getSelectedRowObj | () |
|
| getSelectedRowObjs | () |
|
| getSelectedRows | () |
|
| getSelecteds | () |
|
| getUpdated | () |
|
| hasChildren | (rowParm) |
|
| isLeaf | (rowParm) |
|
| isTotalSummary | () |
|
| loadData | (loadDataParm) |
|
| loadServerData | (param, clause) |
|
| reRender | (e) |
|
| setColumnWidth | (columnparm, value) |
|
| setOptions | (parms) |
|
| SubmitEdit | (rowParm) |
|
| toggle | (targetRow) |
|
| toggleCol | (columnparm, visible) |
|
| updateCell | (cell, value, rowParm) |
|
| updateRow | (newRowData, rowDom) |
|
| 업그레이드 | (targetRow) |
|
코드 복사 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
vargrid = $("#maingrid").ligerGrid({
columns: [
{ 이름: 'id', 표시: '일련번호', 너비: 200 },
{ 이름: '이름', 표시: '이름', 너비: 300 }
]
})
grid .set({ 데이터: { 행: Griddata} })
function selectRow(index) {
grid.select(index)
}
function getSelectRow() {
var 행 = Grid.getSelecteds();
for (var i in Rows) {
alert(rows[i].name)
}
}
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.