EasyUI의 Datagrid는 테이블 형식의 데이터를 표시하고 데이터를 선택, 정렬, 그룹화 및 편집하는 데 풍부한 기능적 지원을 제공합니다. Datagrid는 개발 시간을 줄이고 개발자가 특정 지식을 갖지 못하도록 설계되었습니다. 가볍고 기능이 풍부합니다. 셀 병합, 멀티 컬럼 타이틀, 냉동 열 및 바닥 글은 몇 가지 기능 일뿐입니다.
1. 섹션 4의 내용을 검토하십시오
섹션 4에서는 EasyUI를 사용하여 왼쪽에 메뉴 표시 줄을 만들었고 메뉴 옵션을 클릭하여 오른쪽에 해당 탭이 나타납니다. 이 섹션에서는 Datagrid를 사용하여 오른쪽의 탭 섹션을 완성합니다. 먼저 섹션 4의 마지막 aindex.jsp 파일을 살펴 보겠습니다 (섹션 4의 내용 참조) :
2. Datagrid 컨트롤을 만드는 몇 가지 방법
DataGrid 디스플레이 데이터는 JSON 형식이므로 먼저 배경에서 얻은 데이터를 Jason 형식으로 패키지 한 다음 DataGrid 표시를 표시하기 위해 프론트 데스크로 전달해야합니다. 이 섹션에서는 배경에서 데이터를 얻지 못할 것입니다. 먼저 동일한 형식의 데이터를 포함하는 .json 파일을 준비하십시오. 그런 다음 Datagird 디스플레이를 먼저 디스플레이 기능을 잘 수행 한 다음 배경 데이터를 요청합니다.
아래 그림과 같이 EasyUi 참조 문서의 DataGrid 디스플레이 형식을 먼저 살펴 보겠습니다.
우리는 참조 문서를 따라 내려다보고 DataGrid 공간이 <pable>을 통해 생성되며이를 작성하는 세 가지 방법이 있습니다.
첫 번째 : 기존 테이블 요소에서 Datagrid를 생성하고 HTML에서 열, 행 및 데이터를 정의합니다.
두 번째 유형 : <pable> 태그를 통해 Datagrid 컨트롤을 만듭니다. <th> 태그를 사용하여 테이블 내 열을 정의하십시오.
세 번째 유형 : JavaScript를 사용하여 Datagrid 컨트롤을 만듭니다.
JS를 사용하여 Datagrid 컨트롤을 작성하는 세 번째 유형을 채택합니다. 먼저 JSON 형식 데이터를 저장하는 파일을 준비해야합니다. Webroot/JQuery-Easyui-1.3.5/Demo/Datagrid/에는 여러 JSON 파일이 있습니다. Datagrid_Data1.json을 선택하고 Webroot 디렉토리에 복사하고 매개 변수를 수정하면 나중에이 JSON 파일에 데이터를 표시합니다. 다음과 같이 :
{ "Total": 10, "행": [{ "code": "fi-sw-01", "productName": "koi", "price": 10.00}, { "code": "k9-dl-01", "productname": "dalmation", "price": 12.00}, { "Code": "RP-SN-01", "ProductName": "RattlesNake", "Price": 12.00}, { "Code": "RP-LI-02", "ProductName": "Iguana", "가격": 12.00}, "Code": "FLSH-01", "ProductName" { "code": "fl-dsh-01", "productname": "manx", "price": 12.00}, { "code": "fl-dlh-02", "productname": "persian", "price": 12.00}, { "code": "fl-dlh-02", "productname": "price", ",", ",", "," { "Code": "AV-CB-01", "ProductName": "Amazon Parrot", "Price": 92.00}, { "Code": "AV-CB-03", "ProductName": "Amazon Parrot", "Price": 92.00}]} JSON 데이터 형식은 "key1": value1, "key2": value2임을 알 수 있습니다. 각 값은 배열 일 수 있으며 새로운 Jason 데이터가 배열에 저장됩니다.
JSON 파일을 사용하면 다음에 Datagrid 컨트롤을 설계 할 수 있습니다. 전체 Datagrid는 Query.jsp에서 설계되었습니다. 표시 할 컨텐츠는 Query.jsp의 내용입니다. query.jsp 페이지를 살펴 보겠습니다.
<%@ page language = "java"import = "java.util.*"pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 전환 // en"> <html> <head> <%@ public/head.jspf "%> $ (function () {$ ( '#dg'). datagrid ({// 요청 데이터의 URL 주소는 우리 자신의 URL을 요청하도록 변경됩니다 : 'datagrid_data.json', loadmsg : 'loading ......', QueryParams : {type : '' '}, // width : 300, fittcolumns : true, // halily expand. 수평 스크롤 막대가 없을 때이 매개 변수를 설정하지 않으면이 매개 변수를 설정하지 마십시오. // Zebra Cross Striped 표시 : // 데이터가 많지 않으면 NOWRAP : True, True, // 단일 라인 디스플레이 만 허용되면 전체 디스플레이 기능이 유효하지 않습니다. + "," + row) if (index % 2 == 0) {return 'background-color;'; 너비가 250보다 크면 스크롤 막대가 표시되지만 냉동 열은 스크롤 막대에 있지 않습니다. [{field : 'checkbox', checkbox : true}, {field : 'code', 'width :'숫자 : 200}]], // datagid // field의 컬럼 필드를 구성합니다. 사람들이 열을 볼 수 있도록 표시되는 제목 : [[{field : 'productName', 제목 : '카테고리 이름', 너비 : 100, // 현재 열의 값을 형식화하기 위해 사용하면, 반환은 최종 데이터 포맷터입니다 : 함수 (값, 행, 색인) {return "<pan>" + value + "</span>"; }}, {field : 'price', title : 'price', 'price', width : 100, styler : function (value, row, index) {// 현재 셀의 스타일을 설정하고 반환 된 문자열은 스타일 속성에 직접 전달됩니다. }}}]]}); }); </script> </head> <hod> <table id = "dg"> </table> </body> </html>3. Datagrid Control의 특성
JS를 사용하여 Datagrid 컨트롤을 만들면 <pable> 태그 만 필요하며 주로 JS에서 수행됩니다. Datagrid의 컨트롤은 매우 강력합니다. 여기서 우리는 주로 기본 디스플레이를 수행합니다. 더 많은 다른 기능은 EasyUi의 개발 문서를 참조하십시오. 위의 query.jsp 파일에 대한 분석을 수행하고 있습니다.
우선, Datagrid 컨트롤에는 두 가지 속성이 있습니다. 하나는 Datagrid 속성이고 다른 하나는 열 속성입니다 . 이름에서 알 수 있듯이 Datagrid 속성은 전체 Datagrid 컨트롤에 추가 된 속성이며 열 속성은 특정 열에 대한 것입니다. 각각에는 많은 속성이 있으며, 여기에는 몇 가지 기본적이고 일반적으로 사용되는 속성 만 있습니다.
Datagrid 속성에서 가장 중요한 것은 열 속성으로 여러 열을 생성 할 수있는 배열입니다. 아래 스크린 샷을 참조하십시오.
열 속성의 세부 사항을 살펴 보겠습니다.
열 속성에서 필드는 JSON 데이터의 키에 해당하는 필드 이름을 나타내며, 제목은 사용자에게 표시 할 제목입니다. query.jsp 파일을 참조하십시오. EasyUI 문서를 참조 할 수있는 다른 기본 속성이 있습니다. 열 속성에서 더 중요하고 일반적으로 사용되는 두 가지 특성은 Formatter 및 스타일로, 현재 열의 값을 형성하고 셀 스타일을 설정하는 데 사용됩니다. 주로이 두 속성을 살펴 보겠습니다.
위의 query.jsp의 열 속성 에서이 두 열 속성을 사용하는 방법을 자세히 분석해 봅시다.
{field : 'productName', 제목 : '카테고리 이름', 너비 : 100, // 현재 열의 값을 형식화하는 데 사용되며, 반환은 최종 데이터 형식입니다 : function (value, row, index) {return "<span>" + value + "</span>"; // 마우스를 표시하고 값 값을 표시하도록 설정했습니다. 함수 (값, 행, 인덱스) {// 현재 셀의 스타일을 설정하고 반환 된 문자열은 스타일 속성 // console.info ( "val :" + value + ", 행 :" + row + ", index :" + index) if (value <20)에 직접 전달됩니다. // 값을 빨간색으로 표시}}}그런 다음 Datagrid 컨트롤의 일부 속성을 살펴 보겠습니다.
URL은 표시 할 데이터 소스를 나타냅니다. 여기서 datagrid_data.json으로 설정하면 데이터 소스 가이 JSON 파일이며 Webroot 디렉토리에 배치되어 있음을 의미합니다.
loadmsg는 데이터로드 중에 표시된 정보를 나타냅니다.
QueryParams는 배경에 전달 된 매개 변수를 의미하며 아직 배경과 관련이 없지만 나중에 사용될 JSON 파일 만 표시하기 때문에 여기서 사용할 수 없습니다.
FitColums가 True로 설정된 후, 수평 팽창이 자동으로 수평으로 확장되고 적응 형 그리드의 너비가 조정됩니다. 이런 식으로, 수평 방향으로 스크롤 막대가 없으며 너비를 설정할 필요가 없습니다.
너비 는 너비입니다. 데이터가 너무 길고 표시되지 않으면 스크롤 막대가 수평 방향으로 나타납니다.
줄무늬가 True로 설정된 후 얼룩말 교차점이 표시됨을 의미합니다. 이것은 디스플레이 스타일입니다. 그냥 시도해보십시오.
nowrap 이 true로 설정되면 데이터가 너무 많으면 줄로 포장되지 않으며, 그렇지 않으면 특정 줄에 너무 많은 데이터가있을 때는 추악합니다.
Pagination이 True로 설정되면 페이징 기능이 활성화되었음을 의미합니다.
SingleSelect 가 True로 설정되면 단일 행만 확인할 수 있습니다. 선택 모든 기능은 유효하지 않으며 주로 전면 열의 확인란에 사용됩니다.
Frozencolums는 냉동 열을 설정하는 것이며 Frozencolums에 설정된 열은 크기를 변경하지 않습니다. {field : 'checkbox', checkbox : true}가 설정된 경우 사용자가 선택한 확인란 열입니다. 위의 싱글 셀러가 설정된 경우, 하나만 선택할 수 있습니다.
Rowstyler는 모든 행의 스타일입니다. 두 매개 변수는 행 색인과 행입니다. 위의 내용은 행조차 흰색이고 홀수 행은 노란색입니다.
잠깐만 ... DataGrid 컨트롤의 다른 속성이 있습니다. EasyUi의 기술 문서를 참조 할 수 있으며 여기에서 하나씩 설명하지 않습니다.
4. Datagrid 데이터 표시의 효과
좋아, query.jsp를 완료 한 후에는 tomcat을 다시 시작한 다음 배경을 입력하고 왼쪽의 메뉴 표시 줄에서 카테고리 관리를 클릭하면 오른쪽에 카테고리 관리 탭이 나타나면 지정된 JSON 데이터가 표시됩니다. 이 Jason 데이터는 Webroot 디렉토리에 직접 배치됩니다. 나중에 JSON과 Struts를 통합하여 백그라운드에서 전송 된 JSON 데이터를 동적으로 얻습니다.
(참고 : 결국 전체 프로젝트의 소스 코드 다운로드를 제공 할 것입니다! 모두가 수집하거나 공유 할 수 있습니다).
원본 주소 : http://blog.csdn.net/eson_15/article/details/51322262
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.