집 > 기사 > 웹 프론트엔드 > layui를 사용하여 테이블 데이터 테이블 렌더링(예)

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

尚앞으로: 2019-11-29 14:00:496606검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css layui html JS table

성명：

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

이전 기사：레이의 날짜 제어 사용법(예)다음 기사：레이의 날짜 제어 사용법(예)