Layui의 테이블 모듈에 기본 매개변수 적용

layui의 테이블 모듈은 중요한 부분으로, 기본 매개변수 측면에서 최대한 친근하게, 즉 지나치게 복잡한 구성을 피하면서 기능의 전제를 보장합니다.

기본 매개변수는 일반적으로 다음 시나리오에 나타납니다.

Scene 1: 다음 레이- 내용 기억하세요: 값은 작은따옴표 안에 있어야 합니다.

<table lay-data="{height:300, url:&#39;/api/data&#39;}" 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: &#39;#test&#39; //或 elem: document.getElementById(&#39;test&#39;) 等
});

#🎜 🎜#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:&#39;id&#39;, width:80}">ID</th>
      <th lay-data="{field:&#39;username&#39;, 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:&#39;username&#39;, width:80}" rowspan="2">联系人</th>
      <th lay-data="{field:&#39;amount&#39;, width:120}" rowspan="2">金额</th>
      <th lay-data="{align:&#39;center&#39;}" colspan="3">地址</th>
    </tr>
    <tr>
      <th lay-data="{field:&#39;province&#39;, width:80}">省</th>
      <th lay-data="{field:&#39;city&#39;, width:120}">市</th>
      <th lay-data="{field:&#39;county&#39;, width:300}">详细</th>
    </tr>
  </thead>
</table>

테이블 모듈은 Infinitus 헤더를 지원한다는 점에 유의하세요. 위와 같이 계속 확장할 수 있습니다. . 핵심은 rowspan과 colspan의 두 매개변수에 있습니다

다음 단계는 헤더의 일부 매개변수 설정입니다 #🎜 🎜#

<1> 필드: 필드 이름 설정

table.render({
  cols: [[
    {field: 'id'} //其它参数在此省略
    ,{field: 'username'}
  ]]
});
 
等价于：
<th lay-data="{field:&#39;id&#39;}"></th>
<th lay-data="{field:&#39;username&#39;}"></th>

<2> 제목: 제목 이름 설정

# 🎜🎜 #

table.render({
  cols: [[
    {title: '邮箱'} //其它参数在此省略
    ,{title: '签名'}
  ]]
});
 
等价于：
<th lay-data="{}">邮箱</th> （PS：也可以把标题写在lay-data里面，即 title:&#39;邮箱&#39;）
<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:&#39;id&#39;, 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:&#39;id&#39;, 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:&#39;id&#39;, 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:&#39;id&#39;, 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:&#39;id&#39;, width:100}">ID</th>
<th lay-data="{field:&#39;username&#39;, width:120, fixed:&#39;right&#39;}">姓名</th>

<8> 편집: 편집 허용 여부.

true로 설정하면 해당 열의 셀 편집이 허용됩니다. 현재는 type="text" 입력 편집만 지원됩니다.

table.render({
  cols: [[
    {edit:'text'} //其它参数在此省略
    ,{field:'id', title:'ID', width:100}
  ]]
});
 
等价于：
<th lay-data="{edit:&#39;text&#39;}"></th>
<th lay-data="{field:&#39;id&#39;, 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:&#39;title&#39;, width: 200, templet: &#39;#titleTpl&#39;}">文章标题</th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

사실 Templet는 다음과 같은 HTML 콘텐츠의 일부일 수도 있습니다.

templet: &#39;<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>&#39; 
注意：这里一定要被一层 <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:&#39;id&#39;, width:100}">ID</th>
<th lay-data="{fixed: &#39;right&#39;, width:150, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;}"></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 중국어 웹사이트의 기타 관련 기사를 참조하세요!