layui를 사용하여 테이블 데이터 테이블 렌더링(예)-레이이 튜토리얼-php.cn

집

웹 프론트엔드

레이이 튜토리얼

layui를 사용하여 테이블 데이터 테이블 렌더링(예)

尚

Nov 29, 2019 pm 02:00 PM

layuitable

layui를 사용하여 테이블 데이터 테이블 렌더링(예)

table 모듈은 layui 프레임워크의 핵심 구성 요소 중 하나입니다. 이는 테이블에서 일련의 기능과 동적 데이터 작업을 수행하는 데 사용되며 일상 업무와 관련된 거의 모든 요구 사항을 충족합니다.

고정 헤더, 고정 행, 고정 열 왼쪽/열 오른쪽 지원, 드래그하여 열 너비 변경 지원, 정렬 지원, 다중 레벨 헤더 지원, 셀에 대한 사용자 정의 템플릿 지원, 테이블 오버로딩 지원(예: 검색, 조건부 필터링 등), 확인란 지원, 페이징 지원, 셀 편집 및 기타 기능을 지원합니다.

그럼에도 불구하고 코드량과 성능을 조절하면서 수시로 개선하고 사용자 친화적인 기능을 추가할 예정입니다. 테이블 모듈은 Layui의 주요 유지 관리 프로젝트 중 하나이기도 합니다.

layui 렌더링 테이블 데이터 형식 예:

1layui의 css 및 js 파일을 소개합니다

link rel="stylesheet" href="lib/layui/css/layui.css">
<script src="lib/layui/layui.js"></script>

2. 🎜🎜#

<table class="layui-hide" id="test" lay-filter=&#39;test3&#39;></table>

3. table.render() 메소드를 통해 컨테이너를 지정합니다

layui.use(&#39;table&#39;, function(){
            var table = layui.table;
//            var playerName;
//            if(item != undefined) {
//                playerName=item;
//            }
            table.render({
                elem: &#39;#test&#39;  table 容器的选择器或 DOM
                ,url:&#39;http://boss.superlychee.com/rest/web/golfTourManage/getGolfTourPlayerByTourIdAndRounds&#39;
                ,method:&#39;post&#39;
                ,where:{tourId:tourIds,rounds:rounds,playerName:item}
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    {field:&#39;tourPlayerId&#39;, width:80, title: &#39;ID1&#39;, sort: true}
                    ,{field:&#39;playerName&#39;, width:80, title: &#39;姓名&#39;}
                    ,{field:&#39;hole1&#39;,  title: &#39;1&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole2&#39;, title: &#39;2&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole3&#39;, title: &#39;3&#39;,edit: &#39;text&#39;} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:&#39;hole4&#39;, title: &#39;4&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole5&#39;, title: &#39;5&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole6&#39;, title: &#39;6&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole7&#39;, title: &#39;7&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole8&#39;, title: &#39;8&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole9&#39;, title: &#39;9&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole10&#39;, title: &#39;10&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole11&#39;, title: &#39;11&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole12&#39;, title: &#39;12&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole13&#39;, title: &#39;13&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole14&#39;, title: &#39;14&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole15&#39;, title: &#39;15&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole16&#39;, title: &#39;16&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole17&#39;, title: &#39;17&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole18&#39;, title: &#39;18&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;add&#39;, title: &#39;操作&#39;, width:177,toolbar:"#barDemo"}

4 이때 페이지는 거의 다음과 같습니다

#🎜. 🎜#

layui를 사용하여 테이블 데이터 테이블 렌더링(예) 5. 본문은 여기입니다. 테이블 데이터를 렌더링하는 방법은 무엇인가요? 위의 세 번째 부분은 "메서드 렌더링"이라는 렌더링 방법입니다. Layui 공식 웹사이트에서 제공하는 세 가지 렌더링 방법이 있습니다. 여기서는 메서드 렌더링의 장점을 설명하지 않겠습니다. HTML 파일을 그대로 두고 JS 자체에 집중할 수 있습니다. 특히 프로젝트의 잦은 변경 및 릴리스의 경우 편의성이 더욱 분명해집니다.

layui의 URL은 기본적으로 "get" 요청이고 내 URL은 게시 요청이므로 "method" "The"를 추가하는 것을 잊지 마세요. 속성은

6. 발생하기 쉬운 문제입니다. 논리적으로 말하면 이 시점에서 테이블 데이터가 여전히 표시되지 않는 이유는 무엇입니까? 보통은 언니가 배경 데이터 형식을 구성했기 때문입니다

response: {
    statusName: &#39;code&#39; //数据状态的字段名称，默认：code
    ,statusCode: 200 //成功的状态码，默认：0
    ,msgName: &#39;msg&#39; //状态信息的字段名称，默认：msg
    ,countName: &#39;count&#39; //数据总数的字段名称，默认：count
    ,dataName: &#39;data&#39; //数据列表的字段名称，默认：data

효과는 다음과 같습니다:

위 내용은 layui를 사용하여 테이블 데이터 테이블 렌더링(예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 CSDN에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

WebStorm Mac 버전

유용한 JavaScript 개발 도구

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.