Layui数据表格

本文介绍了如何使用Layui插件来创建数据表格,包括加载表格、设置全局变量、初始化表格和使用自定义列模板实现修改与删除功能。详细讲解了layuiTable.render()方法的参数配置,如type、title、field、sort和templet等,并展示了自定义操作列的JavaScript实现。
摘要由CSDN通过智能技术生成

数据表格的加载:用了layui插件里面的数据表格,加载表格,首先需要给它准备好一个Demo,存放所有的数据,这里需要加载所有的仓库。
在这里插入图片描述
加载表格之前要声明两个全局变量以方便使用,一个是数据表格Demo,一个是laer跟layuiTable模块,接着的代码全部写到Jquery里面,这些格式都是插件里面固定的写法,理解好需要使用的参数就可以得到需要的效果,开始使用layui.use需要用到layer和table模块,所以layer、layuiTable要分别声明使用的是layui.的layer、table模块,接着就是初始化表格,使用全局变量中的tabStore通过layuiTable.render()指定容器加载出表格,elem是html中的表格id,url是数据接口数据的路径,cols是表头,表头里面有很多参数,参数的值需要用单引号括起来,如这用到的:type是设定指定类型,复选框和序列号就是指定的类型,title设定的是表头需要显示的名称,field设定字段名,字段名的设定非常重要,且是表格数据列的唯一标识,hide是否开启隐藏列,align:单元格排列方式,sort是否允许排序,templet是自定义列模板。这里利用了自定义列模板实现了修改和删除的功能。
var tabStore;
var layer, layuiTable;
$(function () {
//加载&初始化layui模块
layui.use([‘la

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值