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의 두 매개변수에 있습니다
다음 단계는 헤더의 일부 매개변수 설정입니다 #🎜 🎜#
<1> 필드: 필드 이름 설정
table.render({
cols: [[
{field: 'id'} //其它参数在此省略
,{field: 'username'}
]]
});
等价于：
<th lay-data="{field:'id'}"></th>
<th lay-data="{field:'username'}"></th>로그인 후 복사
<2> 제목: 제목 이름 설정
# 🎜🎜 #
table.render({
cols: [[
{title: '邮箱'} //其它参数在此省略
,{title: '签名'}
]]
});
等价于：
<th lay-data="{}">邮箱</th> （PS：也可以把标题写在lay-data里面，即 title:'邮箱'）
<th lay-data="{}">签名</th>로그인 후 복사
<3> 너비: 열 너비 를 설정합니다. 열 너비 설정은 일반적으로 필요하며(체크박스 열, 도구 모음 등과 같은 "특수 열" 제외) 이는 테이블의 전체적인 아름다움과 관련이 있습니다.
table.render({
cols: [[
{width: 80} //其它参数在此省略
,{width: 120}
]]
});
等价于：
<th lay-data="{width:80}"></th>
<th lay-data="{width:120}"></th>로그인 후 복사
<4> 체크박스: 체크박스를 설정합니다. 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>로그인 후 복사
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>로그인 후 복사
<5> 공백: 간격 열을 설정합니다.
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>로그인 후 복사
<6> 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>로그인 후 복사
<7> 고정: 고정 열이 필요한지 여부입니다.
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>로그인 후 복사
<8> 편집: 편집 허용 여부. 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>로그인 후 복사
<9> 템플릿: 맞춤 템플릿. 기본적으로 셀의 내용은 데이터 인터페이스에서 반환된 내용에 따라 완전히 출력됩니다. 특정 열의 셀에 링크 및 기타 요소를 추가하려면 도움말을 사용하여 쉽게 수행할 수 있습니다. 이 매개변수의 이것은 매우 실용적인 기능이며 테이블의 내용이 풍부하고 다양해집니다.
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: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板로그인 후 복사
<10>
보통 테이블의 각 행에 보기, 편집, 삭제 등 유사한 조작 버튼을 추가해야 하는데, 이를 위해 툴 파라미터가 탄생하여 매우 편리하게 다양한 조작 기능을 구현할 수 있습니다.
도구 매개변수는 템플렛 매개변수와 정확히 동일한 방식으로 사용됩니다. 일반적으로 선택기 또는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
