layui의 테이블 모듈은 중요한 부분으로, 기본 매개변수 측면에서 최대한 친근하게, 즉 지나치게 복잡한 구성을 피하면서 기능의 전제를 보장합니다.
기본 매개변수는 일반적으로 다음 시나리오에 나타납니다.
Scene 1: 다음 레이- 내용 기억하세요: 값은 작은따옴표 안에 있어야 합니다.
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>
시나리오 2: 다음 메서드의 키 값은 기본 매개변수 항목입니다.
table.render({ height: 300 ,url: '/api/data' });
추가 시나리오: 다음 옵션은 기본 매개변수 항목이 포함된 객체입니다.
> table.init('filter', options); //转化静态表格 > var tableObj = table.render({}); tableObj.reload(options); //重载表格
기본 요소가 무엇인지 살펴볼까요?
1. elem - 바인딩 요소는 table.render()의 렌더링 방법에만 적용 가능한 원본 테이블 컨테이너를 지정합니다.
HTML: <table id="test"></table> JS: table.render({ //其它参数在此省略 elem: '#test' //或 elem: document.getElementById('test') 等 });#🎜 🎜#2, 많은 값을 포함하고 2차원 배열인 테이블 헤더를 설정합니다. 테이블의 "메서드 수준 렌더링"을 사용하는 경우 이 매개변수를 사용하여 테이블을 설정해야 합니다. 예:
JS: table.render({ cols: [[ //标题栏 {checkbox: true} ,{field: 'id', title: 'ID', width: 80} ,{field: 'username', title: '用户名', width: 120} ]] }); 它等价于: <table class="layui-table" lay-data="{基础参数}" lay-filter="test"> <thead> <tr> <th lay-data="{checkbox:true}"></th> <th lay-data="{field:'id', width:80}">ID</th> <th lay-data="{field:'username', width:180}">用户名</th> </tr> </thead> </table>다음은 보조 헤더의 예입니다.
JS: table.render({ cols: [[ //标题栏 {field: 'username', title: '联系人', width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数 ,{field: 'amount', title: '金额', width: 80, rowspan: 2} ,{align: 'center', title: '地址', colspan: 3} //colspan即横跨的单元格数,这种情况下不用设置field和width ], [ {field: 'province', title: '省', width: 80} ,{field: 'city', title: '市', width: 120} ,{field: 'county', title: '详细', width: 300} ]] }); 它等价于: <table class="layui-table" lay-data="{基础参数}"> <thead> <tr> <th lay-data="{field:'username', width:80}" rowspan="2">联系人</th> <th lay-data="{field:'amount', width:120}" rowspan="2">金额</th> <th lay-data="{align:'center'}" colspan="3">地址</th> </tr> <tr> <th lay-data="{field:'province', width:80}">省</th> <th lay-data="{field:'city', width:120}">市</th> <th lay-data="{field:'county', width:300}">详细</th> </tr> </thead> </table>테이블 모듈은 Infinitus 헤더를 지원한다는 점에 유의하세요. 위와 같이 계속 확장할 수 있습니다. . 핵심은 rowspan과 colspan의 두 매개변수에 있습니다
다음 단계는 헤더의 일부 매개변수 설정입니다 #🎜 🎜#
f35d6e602fd7d0f0edfa6f7d103c1b57 필드: 필드 이름 설정table.render({
cols: [[
{field: 'id'} //其它参数在此省略
,{field: 'username'}
]]
});
等价于:
<th lay-data="{field:'id'}"></th>
<th lay-data="{field:'username'}"></th>
# 🎜🎜 #
table.render({ cols: [[ {title: '邮箱'} //其它参数在此省略 ,{title: '签名'} ]] }); 等价于: <th lay-data="{}">邮箱</th> (PS:也可以把标题写在lay-data里面,即 title:'邮箱') <th lay-data="{}">签名</th>5bdf4c78156c7953567bb5a0aef2fc53 너비: 열 너비 를 설정합니다. 열 너비 설정은 일반적으로 필요하며(체크박스 열, 도구 모음 등과 같은 "특수 열" 제외) 이는 테이블의 전체적인 아름다움과 관련이 있습니다.
table.render({ cols: [[ {width: 80} //其它参数在此省略 ,{width: 120} ]] }); 等价于: <th lay-data="{width:80}"></th> <th lay-data="{width:120}"></th>23889872c2e8594e0f446a471a78ec4c 체크박스: 체크박스를 설정합니다. true로 설정하면 이 열의 내용이 체크박스라는 의미이며 일반적으로 첫 번째 열에 배치됩니다.
table.render({ cols: [[ {checkbox: true} //其它参数在此省略 ,{field: 'id', title:'ID', width: 100} ]] }); 等价于: <th lay-data="{checkbox:true}"></th> <th lay-data="{field:'id', width:100}">ID</th>여기서 LAY_CHECKED는 체크박스와 함께 사용된다는 점에 유의하세요. true로 설정하면 기본적으로 모든 체크박스가 선택된다는 의미입니다.
table.render({ cols: [[ {checkbox: true, LAY_CHECKED: true} //其它参数在此省略 ,{field: 'id', title:'ID', width: 100} ]] }); 等价于: <th lay-data="{checkbox:true, LAY_CHECKED: true}"></th> <th lay-data="{field:'id', width:100}">ID</th>
43ad812d3a971134e40facaca816c822 공백: 간격 열을 설정합니다.
true로 설정하면 내용 없이 15px 너비의 열을 정의합니다.table.render({ cols: [[ //其它参数在此省略 {space: true} ,{field: 'id', title:'ID', width: 100} ]] }); 等价于: <th lay-data="{space:true}"></th> <th lay-data="{field:'id', width:100}">ID</th>efbfa0de8737dc86eae413541a49df20 sort: 정렬이 필요한지 여부입니다. true로 설정하면 해당 테이블 헤더에 정렬 아이콘이 표시되어 해당 열에 대한 정렬 기능이 활성화됩니다.
참고: 숫자 및 일반 문자와 같은 값이 존재하는 열에 대해서는 사전식 비교를 입력하므로 정렬을 활성화하지 않는 것이 좋습니다. 예를 들어 'Xianxin' > '2' > '100', 이는 원하는 결과가 아닐 수도 있지만 사전 정렬 알고리즘(ASCII 코드 비교)은 이와 같습니다. 시퀀스 지식.
table.render({ cols: [[ {sort:true} //其它参数在此省略 ,{field:'id', title:'ID', width:100} ]] }); 等价于: <th lay-data="{sort:true}"></th> <th lay-data="{field:'id', width:100}">ID</th>
40107655ec554331c1c6222ab67a141c 고정: 고정 열이 필요한지 여부입니다.
true 또는 'right'를 설정하면 해당 열이 왼쪽이나 오른쪽으로 고정되며 스크롤 바와 함께 스크롤되지 않습니다.table.render({ cols: [[ {fixed:true} //其它参数在此省略 ,{field:'id', title:'ID', width:100} ,{field:'username', title:'姓名', width:120, fixed:'right'} //固定列在右 ]] }); 等价于: <th lay-data="{sort:true}"></th> <th lay-data="{field:'id', width:100}">ID</th> <th lay-data="{field:'username', width:120, fixed:'right'}">姓名</th>37cd6113a8c348d99fa846f2c6fcea98 편집: 편집 허용 여부. true로 설정하면 해당 열의 셀 편집이 허용됩니다. 현재는 type="text" 입력 편집만 지원됩니다.
table.render({ cols: [[ {edit:'text'} //其它参数在此省略 ,{field:'id', title:'ID', width:100} ]] }); 等价于: <th lay-data="{edit:'text'}"></th> <th lay-data="{field:'id', width:100}">ID</th>c161494dba5e0dd0fb25d890c74e408d 템플릿: 맞춤 템플릿. 기본적으로 셀의 내용은 데이터 인터페이스에서 반환된 내용에 따라 완전히 출력됩니다. 특정 열의 셀에 링크 및 기타 요소를 추가하려면 도움말을 사용하여 쉽게 수행할 수 있습니다. 이 매개변수의 이것은 매우 실용적인 기능이며 테이블의 내용이 풍부하고 다양해집니다.
table.render({ cols: [[ {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器 ,{field:'id', title:'ID', width:100} ]] }); 等价于: <th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th> <th lay-data="{field:'id', width:100}">ID</th>사실 Templet는 다음과 같은 HTML 콘텐츠의 일부일 수도 있습니다.
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>' 注意:这里一定要被一层 <div></div> 包裹,否则无法读取到模板
eebe431eeb58984ec8915354762c30c6
보통 테이블의 각 행에 보기, 편집, 삭제 등 유사한 조작 버튼을 추가해야 하는데, 이를 위해 툴 파라미터가 탄생하여 매우 편리하게 다양한 조작 기능을 구현할 수 있습니다.도구 매개변수는 템플렛 매개변수와 정확히 동일한 방식으로 사용됩니다. 일반적으로 선택기 또는 HTML 문자 세그먼트를 허용합니다.
table.render({ cols: [[ {field:'id', title:'ID', width:100} ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器 ]] }); 等价于: <th lay-data="{field:'id', width:100}">ID</th> <th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></th>다음은 페이지의 어느 곳에나 저장할 수 있는 도구 모음에 해당하는 템플릿입니다.
<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a> <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a> <!-- 这里同样支持 laytpl 语法,如: --> {{# if(d.auth > 2){ }} <a class="layui-btn layui-btn-mini" lay-event="check">审核</a> {{# } }} </script> 注意:属性 lay-event="" 是模板的关键所在,值可随意定义。다음으로 테이블 모듈의 도구 모음 이벤트를 사용하여 완료합니다. 다양한 작업 기능:
//监听工具条 table.on('tool(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值 var tr = obj.tr; //获得当前行 tr 的DOM对象 if(layEvent === 'detail'){ //查看 //do somehing } else if(layEvent === 'del'){ //删除 layer.confirm('真的删除行么', function(index){ obj.del(); //删除对应行(tr)的DOM结构,并更新缓存 layer.close(index); //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ //编辑 //do something //同步更新缓存对应的值 obj.update({ username: '123' ,title: 'xxx' }); } });layui 관련 지식을 더 보려면
layuiframework
에 주의하세요.위 내용은 Layui의 테이블 모듈에 기본 매개변수 적용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!