浅谈layui数据表格的基础使用

表格展示神器之一:layui表格

前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table、layui table、easyUI table等....

博主个人比较倾向于layui,layui极简,却又不失饱满的内在,体积轻盈,组件丰盈。使用简单引用模块便捷,有丰富的扩展功能。

layui官网:https://www.layui.com/

bootstrap datatable中文文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

目录:

  一、三种渲染表格的方式

  二、在表格中添加编辑等按钮

  三、在表格中添加 表单控件

  四、添加图片展示

最终效果图:

1.png

点击图片效果

2.png

点击编辑

3.png

一、三种初始化渲染方式

我先从最简单的初始化表格写起,如果我直接把全部代码帖出来,你们可能会看得头晕

4.png1,方法渲染:

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

java后台返回的json数据格式

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

2,自动渲染方法 (以下代码由官方提供,自动渲染的方法 适合复杂行头时使用,一般建议使用上面的方法渲染)

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

二,如何添加编辑按钮

var table = layui.table
            ,form = layui.form;
    layui.use('table', function () {  // 引入 table模块
        table.render({
            id:"dataTable",//
            elem: '#layui_table_id',//指定表格元素
            url: '/menu/menuList.ajax',  //请求路径
            cellMinWidth: 20 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
            ,skin: 'line ' //表格风格 line (行边框风格)row (列边框风格)nob (无边框风格)
           //,even: true    //隔行换色
            ,page: true  //开启分页
            ,limits: [10,20,50]  //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每页默认显示的数量
            ,method:'post'  //提交方式
,done: function(res, curr, count) { //表格数据加载完后的事件
    //调用示例
    layer.photos({//点击图片弹出
        photos: '.layer-photos-demo'
        ,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:'checkbox'}, //开启多选框  {
     field: 'menuId', //json对应的key 
     title: 'ID', //列名 
     sort: true // 默认为 false,true为开启排序  
     },{
      fixed: 'right', title: '操作', width: 215,
       align:'center', toolbar: '#barDemo' //绑定按钮组 
       } ]] }); });
//监听工具条
table.on('tool(dataTable)', function(obj){ 
//注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"

    var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
     layui.alert(JSON.stringifr(data)) ; //将编辑的行信息转为json字符串
        layer.msg(data.attrId);
    } else if(layEvent === 'del'){
        layer.msg('删除'+data.menuId);
        console.log(table)
    } else if(layEvent === 'edit'){
       
    });
    }
});
<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 === 'Y'){ }}
    <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: 'menuDisplay',  /
    title: '是否显示',
    templet: '#isShow', //模板关联以上定义的
    unresize: true,
    filter: "isShow",
    sort: false
}

2,使用 函数的方法

{
    field: 'menuDisplay',
    title: '是否显示',

    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 > `;
        }
    }
}

四、 展示图片

{
    field: 'img',
    title: '图片',
    unresize: true,
    sort: false,
    //style:'height:100px;',
    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>`;
    }
}

5.png

当表格数据加载完后再绑定属性

完整代码:https://gitee.com/gezi441/layui-table


推荐文章
layui是基于vue的吗?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

layui如何支持 es5 写法?方法介绍

写js的时候会写一些es5的代码,但是打包到dist时,发现不支持语法,怎么办呢。两步添加es5支持:一、使用npm下载安装babel,进入gulpfile.js所在目录。$npminstall--s

layui如何刷新当前tab?

layui中可以使用reload()方法刷新当前tab,reload()方法用于刷新当前文档。reload()方法类似于你浏览器上的刷新页面按钮。如果把该方法的参数设置为true,那么无论文档的最后修

layui弹窗如何禁止拉伸?

弹层组件文档-layui.layerayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务

layui中怎么设置select下拉框自动选中某项?

1、需求场景分析用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A。在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值。2、Layui的select

layui怎么固定表格的表头?

步骤:1、设置两个table,第一个table有thead没有tbody,第二个table有tbody没有table;2、第二个table需要一个div包住,并设置宽高,可用绝对布局3、tr下的th和

layui 开源吗?

layui开源吗?layui是免费开源的。layui是一款开源和免费的前端UI框架,可随意使用;不过为了维持发展,在其生态下,也会推出一些基于layui的收费产品,比如:layuiAdmin和layI

layui是什么时候开发的?

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui如何自定义字体图标?(图文介绍)

layui的图标取自于阿里巴巴的矢量图标库Iconfont第一步,通过浏览器打开http://iconfont.cn/,访问阿里巴巴矢量图标库。第二步,通过右上角的用户图标,授权登陆一个账号,在此我选

layui中如何获取表格全部数据?

layui中获取表格全部数据第一步可以通过layui.table.cache["testReload"]的方式来获取表格全部数据,其中testReload是表格id第二步打开网页,我们可以看一下要获取

详解layui后台框架的搭建

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui有什么功能?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

layui怎么隐藏表格行?

layui数据表格隐藏列在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。table.render({ elem:'#test'

layui登录后token问题详解

layui是一个非常简单且实用的后台管理系统搭建框架,里面的插件丰富使用简单,只需要在原有基础上进行修改即可,但是在数据处理方面略显薄弱,内置的jquery在实际过程中略显不足,若是能添加内置的mvc

layui表格中怎么显示图片?

layui的表格使用还是非常简单的,layui文档中已经非常详细,下面直接上代码了1、jsp代码 发布Banner 2、然后是js代码layui.use('table',function()

layui如何清除表单数据?

layui清空表单数据的方法:1、调用reset()方法清空functionfomrReset() { document.getElementById("myform").reset(); }2、使用

详解layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

layui框架之如何导出表格全部数据?

2020.1.16最近终于又用到了导出表格,我在实际项目里使用了上次发现的导出全部数据方法,然后遇到了一些问题,并进行了解决,终于可以正式写在博客中了。整体代码: //导出表格配置 table.r

layui如何获取table某一行的值?

layui中可以使用table.checkStatus('ID')方法获取table某一行的值,其中ID为基础参数。【自动化渲染】……【方法渲染】table.render({//其它参数省略 id:'

layui开源么?

layui是免费开源的,layui是开源的模块化前端UI框架,而layAdmin和layIm是付费授权的。layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织