데이터를 표시하기 위해 Layui의 테이블 구성 요소를 어떻게 사용합니까?-레이이 튜토리얼-php.cn

데이터를 표시하기 위해 Layui의 테이블 구성 요소를 어떻게 사용합니까?

Layui의 테이블 구성 요소는 데이터 형식으로 데이터를 표시하는 간단하면서도 강력한 방법을 제공합니다. 이를 사용하는 핵심에는 HTML을 사용하여 테이블 구조를 설정 한 다음 JavaScript를 사용하여 데이터로 채우는 것이 포함됩니다. 다음은 고장입니다.

먼저 HTML에 Layui CSS 및 JavaScript 파일을 포함해야합니다.

 <code class="html"><link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script></code>

로그인 후 복사

다음으로 HTML에 table 요소를 만듭니다.이 테이블의 컨테이너 역할을합니다. 이 요소는 Layui를 대상으로하는 id 속성이 필요합니다. 선택적으로 몇 가지 기본 테이블 구조를 포함 할 수도 있습니다.

 <code class="html"><table id="demo" lay-filter="test"></table></code>

로그인 후 복사

lay-filter 속성은 중요합니다. 나중에 조작을 위해 테이블 인스턴스를 식별하는 데 사용됩니다.

마지막으로 JavaScript를 사용하여 layui.table.render() 사용하여 테이블 데이터를 렌더링합니다. 이 기능은 객체를 인수로 사용하여 요소 ID ( elem ), 데이터 ( data ), 열 ( cols ) 및 기타 구성과 같은 다양한 옵션을 지정합니다. 예는 다음과 같습니다.

 <code class="javascript">layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo' ,cols: [[ //标题栏{field: 'id', title: 'ID', width:80, sort: true} ,{field: 'username', title: '用户名', width:80} ,{field: 'email', title: '邮箱', width:120} ,{field: 'sex', title: '性别', width:80} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width:170} ]] ,data: [ //假设数据{'id':'1','username':'张三','email':'zhangsan@gmail.com','sex':'男','city':'西安','sign':'hello'} ,{'id':'2','username':'李四','email':'lisi@gmail.com','sex':'女','city':'北京','sign':'hello world'} ] ,page: true //开启分页}); });</code>

로그인 후 복사

이 코드는 지정된 열 및 데이터와 함께 테이블을 렌더링합니다. 샘플 데이터를 실제 데이터로 바꾸는 것을 잊지 마십시오. page: true 옵션은 Pagination을 활성화합니다 (아래에 설명).

Layui의 테이블 구성 요소에서 열을 사용자 정의 할 수 있습니까?

예, Layui의 테이블 구성 요소는 광범위한 열 사용자 정의를 제공합니다. 다음을 포함하여 각 열의 다양한 측면을 제어 할 수 있습니다.

field : 열에 해당하는 데이터 키. 이것이 Layui가 데이터를 열에 매핑하는 방법입니다.
title : 열 헤더 텍스트.
width : 열 너비 (픽셀 또는 백분율).
sort : 이 열의 정렬을 활성화합니다 (true/false).
templet : 셀에 데이터가 표시되는 방식을 사용자 정의하는 함수 또는 문자열 템플릿. 이를 통해 아이콘, 링크 또는 기타 HTML 요소를 사용하는 것을 포함한 복잡한 형식이 가능합니다. 예를 들어, 템플릿을 사용하여 색상 아이콘이있는 사용자의 상태를 표시 할 수 있습니다.
toolbar : 각 행 셀 내에 사용자 정의 버튼이나 동작을 추가 할 수 있습니다. 이는 편집, 삭제 또는 기타 행 특정 작업을 작성하는 데 유용합니다.
edit : 내 셀 편집을 활성화합니다. 이를 통해 사용자는 테이블 내에서 데이터를 직접 수정할 수 있습니다.
type : 'Checkbox'와 같은 다른 열 유형을 지정하여 각 행에 확인란을 추가 할 수 있습니다.

다음은 templet 및 toolbar 보여주는 예입니다.

 <code class="javascript">cols: [[ {field: 'status', title: 'Status', templet: function(d){ return d.status === 1 ? '<span style="color:green;">Active</span>' : '<span style="color:red;">Inactive</span>'; }} ,{field: 'actions', title: 'Actions', toolbar: '#barDemo'} ]]</code>

로그인 후 복사

조건부 색상이있는 상태 열이 추가되고 ID barDemo 있는 템플릿에 사용자 정의 버튼이있는 작업 열이 추가됩니다.

Layui의 테이블 구성 요소로 Pagination을 어떻게 처리합니까?

Layui의 테이블 구성 요소는 페이지 매김을 단순화합니다. Pagination을 활성화하려면 테이블에서 page 옵션을 true 로 설정하십시오. table.render() 함수 :

 <code class="javascript">table.render({ // ... other options ... page: true });</code>

로그인 후 복사

이렇게하면 테이블 하단에 Pagination 컨트롤이 자동으로 추가됩니다. Layui는 각 페이지에 대한 데이터의 페치 및 표시를 처리합니다. 추가 옵션을 지정하여 Pagination을 추가로 사용자 정의 할 수 있습니다.

limit : 페이지 당 행 수.
limits : 사용자가 선택할 수있는 페이지 당 행 수에 대한 다양한 옵션 옵션.
layout : 어떤 페이지 매김 요소가 표시되는지 (예 : 'count', 'prev', 'page', 'next', 'limit', 'skip').
curr : 현재 페이지 번호를 지정합니다. 특정 페이지를로드 할 때 유용합니다.

더 큰 데이터 세트의 경우 일반적으로 현재 페이지 번호 및 limit 기반으로 Backend API의 데이터를 청크로 가져 오려고합니다. 이것은 다음 섹션에서 다루어집니다.

Layui의 테이블 구성 요소를 백엔드 API와 통합하려면 어떻게해야합니까?

Layui의 테이블을 백엔드 API와 통합하려면 AJAX (일반적으로 jQuery의 $.ajax() 또는 브라우저의 내장 fetch() API)를 사용하여 데이터를 가져 오는 다음 해당 데이터를 table.render() 함수로 전달합니다. 일반적으로 현재 페이지 및 제한에 따라 API 통화를 조정해야합니다.

다음은 fetch() 사용하는 예입니다.

 <code class="javascript">layui.use('table', function(){ var table = layui.table; let currentPage = 1; let pageSize = 10; function fetchData(page, limit) { return fetch(`/api/data?page=${page}&limit=${limit}`) .then(response => response.json()) .then(data => { return { data: data.items, // Assuming your API returns an object with 'items' property count: data.totalCount // Assuming your API returns total count }; }); } fetchData(currentPage, pageSize).then(data => { table.render({ elem: '#demo', cols: [[ /* ... your columns ... */ ]], data: data.data, page: { curr: currentPage, limit: pageSize, count: data.count } }); }); });</code>

로그인 후 복사

이 코드는 /api/data 의 데이터를 가져와 페이지 번호를 전달하고 쿼리 매개 변수로 제한합니다. 그런 다음 응답을 사용하여 테이블을 렌더링합니다. 백엔드와 일치하도록 API 엔드 포인트 및 데이터 구조를 조정해야합니다. 또한 페이지가 변경 될 때 데이터를 다시 설정하여 페이지 화 변경을 처리하고 currentPage 업데이트하기 위해 이벤트 리스너를 추가합니다. 오류 처리 및 로딩 표시기는 생산 준비 구현에 중요한 고려 사항입니다.

위 내용은 데이터를 표시하기 위해 Layui의 테이블 구성 요소를 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!