>  기사  >  웹 프론트엔드  >  Layui의 테이블 메서드 렌더링

Layui의 테이블 메서드 렌더링

尚
앞으로
2020-04-04 17:26:034865검색

Layui의 테이블 메서드 렌더링

layui를 사용하는 경우 전체 lib 파일을 프로젝트로 가져온 다음 해당 페이지에layui.css 및layui.js 파일을 도입해야 합니다.

layui에 내장된 모듈을 사용할 때는layui.use를 사용하여 다음을 인용하세요.

layui.use(['layer' , 'table],function(){
var layer = layui.layer;
var table = layui.table;
})

레이어 사용법은 공식 문서를 직접 읽어보세요. 여기에는 제가 평소에 사용하고 찾기 힘든 것들만 기록해 놓았습니다.

1. 테이블 방식으로 렌더링할 때 프런트엔드에서 자동 증가하는 일련번호를 추가해야 하는 경우가 있는데 어떻게 추가하나요?

table.render({
                elem: '#dataTable',
                url:"getDataOrderList",
                // data: data,
                page:{
                    count:'count',
                    limit:20
                },
                cols: [[
                    {type:'numbers',title:'序号',align:'center'}, // 自增序号
                    {field: 'order_no', title: '订单编号'},
                    {field: 'tel', title: '购买账号'},
                    {field: 'total_price', title: '服务金额',color:"red"},
                    {field: 'pay_time', title: '支付时间'},
                    {title: '服务有效期',toolbar:'#detail'},
                    {field: 'buy_by', title: '开通方式'}
                ]]
            });

또 궁금한게 있는데 수술이 있으면 어떻게 해야하나요? 보기, 편집 등을 좋아하시나요? 위의 렌더링 방법에는 서비스 유효 기간이라는 필드가 있고 도구 모음에 속성이 있습니다. 해당 속성 값은 HTML의 코드입니다.

<table  class="layui-table" id="dataTable" lay-filter="dataTable"></table>

script type="text/html" id="detail"> //id值关联这toobar的属性值
     <a href="javascript:;" style="color: #468aff" lay-event="detail">查看详情</a>
</script>

layui에 대한 자세한 내용은 layui 사용 튜토리얼을 참고하세요. 칼럼.

위 내용은 Layui의 테이블 메서드 렌더링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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