侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

layui数据表格使用的几个技巧

前端  /  管理员 发布于 4年前   480

使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table、layui table、easyUI table等,本教程推荐使用layui框架设置数据表格。

推荐:layui框架快速入门
一、三种初始化渲染方式

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

1.jpg

1,方法渲染:

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

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

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

以上就是layui数据表格使用的几个技巧的详细内容,更多请关注其它相关文章!


  • 上一条:
    layui表格反转的一个简单实现方式
    下一条:
    layui表格数据变更的一种处理方式
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客