소개:
layui는 모든 수준의 프런트엔드 및 백엔드 개발자를 위해 전문 프런트엔드 개발자가 만든 낮은 임계값의 즉시 사용 가능한 프런트엔드 UI 솔루션입니다.
layui의 테이블 모듈은 기본 매개변수 측면에서 최대한 사용자 친화적으로 만드는, 즉 지나치게 복잡한 구성을 피하면서 기능의 전제를 보장하는 중요한 모듈입니다. 기본 매개변수는 일반적으로 다음과 같은 시나리오에서 나타납니다.
场景一：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>
场景二：下述方法中的键值即为基础参数项
table.render({
height: 300
,url: '/api/data'
});
更多场景：下述options即为含有基础参数项的对象
> 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>로그인 후 복사
여기서 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>로그인 후 복사
<5> space: 간격 열을 설정합니다. 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> edit: 편집 허용 여부. 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> template: 맞춤 템플릿. 기본적으로 셀의 내용은 데이터 인터페이스에서 반환된 것과 정확히 동일하게 출력됩니다. 특정 열의 셀에 링크 및 기타 요소를 추가하려는 경우 이 매개변수를 사용하여 쉽게 수행할 수 있습니다. 이것은 매우 실용적인 기능이며 테이블의 내용이 풍부하고 다양해집니다.
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> 包裹，否则无法读取到模板로그인 후 복사
<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
위 내용은 Layui의 테이블 모듈에서 기본 매개변수를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
