집 > 기사 > 웹 프론트엔드 > Layui를 사용하여 테이블 데이터 테이블을 아름답게 만드는 방법

Layui를 사용하여 테이블 데이터 테이블을 아름답게 만드는 방법

王林앞으로: 2020-11-17 16:04:504150검색

먼저 아름다운 렌더링을 살펴보겠습니다.

(학습 동영상 공유: html 동영상 튜토리얼)

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() 메서드를 통해 컨테이너를 지정합니다

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

Layui를 사용하여 테이블 데이터 테이블을 아름답게 만드는 방법

5. 여기, 테이블 데이터 렌더링은 어떻습니까? 위의 세 번째 부분은 "메소드 렌더링"이라는 렌더링 방법입니다.layui 공식 웹사이트에서 제공하는 세 가지 렌더링 방법은 여기서 설명하지 않습니다. 메소드 렌더링의 장점은 HTML 파일에서 벗어나 집중할 수 있다는 것입니다. JS 자체에서. 특히나 프로젝트의 빈번한 변경 및 릴리스의 경우에는 Layui의 기본 URL이 "get" 요청이고 여기서는 Post 요청이므로 Post에 "method" 속성을 추가하는 것을 잊지 마세요.

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.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"}
                ]],
            });
            });

이때는 대개 양식이 나옵니다. 배경에서 제공하는 데이터 형식은layui에서 제공하는 것과 동일하다는 것을 기억하세요. 이것을 보려면 공식 웹 사이트를 방문하십시오. 다음에는 설명이 없습니다.

Layui를 사용하여 테이블 데이터 테이블을 아름답게 만드는 방법

관련 기사