>웹 프론트엔드 >레이이 튜토리얼 >Layui 데이터 테이블 사용에 대한 몇 가지 팁

Layui 데이터 테이블 사용에 대한 몇 가지 팁

尚
앞으로
2019-11-23 14:38:225808검색

테이블 구성 요소를 사용하면 개발 효율성이 크게 향상될 수 있습니다. 현재 주류 데이터 테이블 구성 요소에는 부트스트랩 테이블, Layui 테이블, easyUI 테이블 등이 포함됩니다. 이 튜토리얼에서는 Laui 프레임워크를 사용하여 데이터 테이블을 설정할 것을 권장합니다.

Layui 데이터 테이블 사용에 대한 몇 가지 팁

추천: layui 프레임워크 빠른 시작
1. 세 가지 초기 렌더링 방법

가장 간단한 초기화 양식부터 시작하겠습니다. 모든 코드를 직접 게시하면 Dizzy가 읽을 수 있습니다.

Layui 데이터 테이블 사용에 대한 몇 가지 팁

1. 메소드 렌더링:

<table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>
var table = layui.table
            ,form = layui.form;
    layui.use(&#39;table&#39;, function () {  // 引入 table模块
        table.render({
            id:"dataTable",//
            elem: &#39;#layui_table_id&#39;,//指定表格元素
            url: &#39;/menu/menuList.ajax&#39;,  //请求路径
            cellMinWidth: 20 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
            ,skin: &#39;line &#39; //表格风格 line (行边框风格)row (列边框风格)nob (无边框风格)
           //,even: true    //隔行换色
            ,page: true  //开启分页
            ,limits: [10,20,50]  //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每页默认显示的数量
            ,method:&#39;post&#39;  //提交方式
           ,cols: [[
                {type:&#39;checkbox&#39;}, //开启多选框
                {
                    field: &#39;menuId&#39;, //json对应的key
                    title: &#39;ID&#39;,   //列名
                    sort: true   // 默认为 false,true为开启排序
                }
            ]]
        });
    });

json 데이터 형식이 java background

{
code: 0, 
count: 8,  //总行数
data: [,…], //表格数据
msg: ""
}

2. 자동 렌더링 방법 (다음 코드는 공식에서 제공한 코드입니다. 자동 렌더링 방법은 복잡한 행 헤더에 적합합니다. 일반적으로 위의 렌더링 방법을 사용하는 것이 좋습니다)

<table class="layui-table" lay-data="{height:315, url:&#39;/demo/table/user/&#39;, page:true, id:&#39;test&#39;}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:&#39;id&#39;, width:80, sort: true}">ID</th>
      <th lay-data="{field:&#39;username&#39;, width:80}">用户名</th>
      <th lay-data="{field:&#39;sex&#39;, width:80, sort: true}">性别</th>
      <th lay-data="{field:&#39;city&#39;}">城市</th>
      <th lay-data="{field:&#39;sign&#39;}">签名</th>
      <th lay-data="{field:&#39;experience&#39;, sort: true}">积分</th>
      <th lay-data="{field:&#39;score&#39;, sort: true}">评分</th>
      <th lay-data="{field:&#39;classify&#39;}">职业</th>
      <th lay-data="{field:&#39;wealth&#39;, sort: true}">财富</th>
    </tr>
  </thead>
</table>

둘째, 편집 버튼을 추가하는 방법

var table = layui.table
            ,form = layui.form;
    layui.use(&#39;table&#39;, function () {  // 引入 table模块
        table.render({
            id:"dataTable",//
            elem: &#39;#layui_table_id&#39;,//指定表格元素
            url: &#39;/menu/menuList.ajax&#39;,  //请求路径
            cellMinWidth: 20 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
            ,skin: &#39;line &#39; //表格风格 line (行边框风格)row (列边框风格)nob (无边框风格)
           //,even: true    //隔行换色
            ,page: true  //开启分页
            ,limits: [10,20,50]  //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每页默认显示的数量
            ,method:&#39;post&#39;  //提交方式
,done: function(res, curr, count) { //表格数据加载完后的事件
    //调用示例
    layer.photos({//点击图片弹出
        photos: &#39;.layer-photos-demo&#39;
        ,anim: 1 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
    });
    //如果是异步请求数据方式,res即为你接口返回的信息。
    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
    console.log(res);

    //得到当前页码
    console.log(curr);

    //得到数据总量
    console.log(count);
}
    ,cols: [[ {type:&#39;checkbox&#39;}, //开启多选框  { field: &#39;menuId&#39;, //json对应的key title: &#39;ID&#39;, //列名 sort: true // 默认为 false,true为开启排序  },{ fixed: &#39;right&#39;, title: &#39;操作&#39;, width: 215, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39; //绑定按钮组 } ]] }); });
//监听工具条
table.on(&#39;tool(dataTable)&#39;, function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === &#39;detail&#39;){
     layui.alert(JSON.stringifr(data)) ; //将编辑的行信息转为json字符串
        layer.msg(data.attrId);
    } else if(layEvent === &#39;del&#39;){
        layer.msg(&#39;删除&#39;+data.menuId);
        console.log(table)
    } else if(layEvent === &#39;edit&#39;){
       
    });
    }
});
<script type="text/html" id="barDemo">  // id和toolbar 属性绑定
     <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

셋, 테이블에 폼 컴포넌트를 추가하는 방법 (아래 2가지 유형을 추천하겠습니다)

1. 모듈 엔진 사용법(이 방법이 더 귀찮습니다. 개인적으로 두 번째 방법을 추천합니다.)

<!--  是否显示 -->
<script type="text/html" id="isShow">  // 请注意 id之间的关联
    {{#  if(d.menuDisplay === &#39;Y&#39;){ }}
    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" checked>
    {{#  } else { }}
    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" >
    {{#  } }}
</script>
{   //在表格对象cols属性中添加
    field: &#39;menuDisplay&#39;,  /
    title: &#39;是否显示&#39;,
    templet: &#39;#isShow&#39;, //模板关联以上定义的
    unresize: true,
    filter: "isShow",
    sort: false
}

2. 함수 방법을 사용하세요

{
    field: &#39;menuDisplay&#39;,
    title: &#39;是否显示&#39;,

    unresize: true,
    filter: "isShow",
    sort: false,
    templet: function (d) {
        if (d.menuDisplay == ‘Y’) {
            return` <input type = "checkbox"
            name = "menuDisplay"
            value = "`+d.menuId+`"
            lay - skin = "switch"
            lay - text = "显示|隐藏"
            lay - filter = "isShow" > `;
        } else {
            return` <input type = "checkbox"
            name = "menuDisplay"
            value = "`+d.menuId+`"
            lay - skin = "switch"
            lay - text = "显示|隐藏"
            lay - filter = "isShow"
            checked > `;
        }
    }
}

4. 사진 표시

{
                    field: &#39;img&#39;,
                    title: &#39;图片&#39;,
                    unresize: true,
                    sort: false,
                    //style:&#39;height:100px;&#39;,
                    templet:function (d) {
                        return `<div class="layer-photos-demo" onclick="img_click()" style="cursor:pointer;">
                                      <img layer-pid="图片id,可以不写"  layer-src="/images/bug-success-bg.jpg" src="/images/bug-success-bg.jpg" alt="图片名">
                                    </div>`;
                    }
                }

Layui 데이터 테이블 사용에 대한 몇 가지 팁 테이블 데이터가 로드된 후의 속성

전체 코드: https://gitee.com/gezi441/layui-table

위 내용은 Layui 데이터 테이블 사용에 대한 몇 가지 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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