layui常用的表单标签_Layui常用组件:表格(table)

快速使用

添加

删除

编辑

查看

编辑

删除

layui.use(['table'], function () {

table.render({

elem: '#demo'

,url: 'url'//表格数据接口

,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板

,page:true//开启分页

,loading:true//显示加载条

,cols: [

[

{type: 'checkbox', fixed: 'left'}

,{field:'id', title:'ID', fixed: 'left',hide:'true'}

,{field:'desc', title:'描述',align:'center'}

,{field:'type', title:'类型',align:'center'}

,{field:'hard', title:'难度',align:'center'}

,{fixed: 'right', title:'操作', toolbar: '#barDemo',align:"center"}

]

]

,limit:10

,limits:[10,15,20,30]

});

}

table组件规定的数据格式:

{

"code": 0,

"msg": "",

"count": 1000,//数据数量

"data": [{}, {}]//数据实体

}

表格重载

table.reload("demo",{

url:'url',

page:{

curr:1

}

})

自定义模板

table.render({

cols: [[

{field:'title', title: '文章标题', width: 200

,templet: function(d){

//d.id,d.title:是动态内容,它对应数据接口返回的字段名

//可以在此处编写具体的逻辑实现一些控件的动态变化

return 'ID:'+ d.id +',标题:'+ d.title +''

}

}

,{field:'id', title:'ID', width:100}

]]

});

分页实现

Layui在初始化表格数据时,会在url的后面附带分页的page和limit参数:

1b93d0cf94cad98d6175e89a9ba24c3c.png

所以在后台编写接口时要接收这两个参数并编写相应的分页查询

搜索实现

搜索的实质是表格的重载:

// 监听搜索操作按钮

form.on('submit(data-search-btn)', function (data) {

//执行搜索重载

table.reload('paperTable', {

page: {//重新从第 1 页开始

curr: 1

}

, where: {//设定异步数据接口的额外参数

searchId:data.field.searchId,//表单内的输入框,name:searchId

searchName:data.field.searchName//表单内的输入框,name:searchName

}

}, 'data');

return false;

});

点击搜索按钮后,异步数据接口url为:

f5a8a121a34b026913bb84c84601d531.png

事件监听

监听头工具栏

table.on('toolbar(demo)', function(obj){//demo为表格lay-filter的值

var checkStatus = table.checkStatus(obj.config.id);

switch(obj.event){

case 'add':

layer.msg('添加');

break;

case 'delete':

layer.msg('删除');

break;

case 'update':

layer.msg('编辑');

break;

};

});

监听checkbox

table.on('checkbox(demo)', function(obj){

console.log(obj.checked); //当前是否选中状态

console.log(obj.data); //选中行的相关数据

console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one

});

监听单元格编辑

//注:edit是固定事件名,demo是table原始容器的属性 lay-filter="对应的值"

table.on('edit(demo)', function(obj){

console.log(obj.value); //得到修改后的值

console.log(obj.field); //当前编辑的字段名

console.log(obj.data); //所在行的所有相关数据

});

监听行单双击事件

//监听行单击事件

table.on('row(test)', function(obj){

console.log(obj.tr) //得到当前行元素对象

console.log(obj.data) //得到当前行数据

//obj.del(); //删除当前行

//obj.update(fields) //修改当前行数据

});

//监听行双击事件

table.on('rowDouble(test)', function(obj){

//obj 同上

});

监听工具条

//注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"

table.on('tool(test)', function(obj){

var data = obj.data; //获得当前行数据

var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)

var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)

if(layEvent === 'detail'){ //查看

//do somehing

} else if(layEvent === 'del'){ //删除

//do somehing

} else if(layEvent === 'edit'){ //编辑

//do something

}

});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/543534.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

理解HTTP幂等性

2019独角兽企业重金招聘Python工程师标准>>> 理解HTTP幂等性 基于HTTP协议的Web API是时下最为流行的一种分布式服务提供方式。无论是在大型互联网应用还是企业级架构中,我们都见到了越来越多的SOA或RESTful的Web API。为什么Web API如此流行呢&#xff…

控件UI性能调优 -- SizeChanged不是万能的

简介 我们在之前的“UWP控件开发——用NuGet包装自己的控件“一文中曾提到XAML的布局系统 和平时使用上的一些问题(重写Measure/Arrange还是使用SizeChanged?),这篇博文就来为大家简单地描述一下XAML布局系统的行为,并…

android 跨进程多实例播放demo

2019独角兽企业重金招聘Python工程师标准>>> 客户端进程需要实现,其中notify方法需要service 跨进程调用,通知客户端播放消息 IMediaPlayerClient.aidl package com.example.demo; import com.example.demo.ParcelableParcel; interface IM…

java 获取service_Java service层获取HttpServletRequest工具类的方法

Java service层获取HttpServletRequest工具类的方法大家都知道 能在Controller/action层获取HttpServletRequest,但是这里给大家备份的是从代码内部service层获取HttpServletRequest工具类。具体如下:package com.base.common.sessionutils;import javax…

Linux使用jstat命令查看jvm的GC情况

2019独角兽企业重金招聘Python工程师标准>>> 命令格式 jstat命令命令格式: jstat [Options] vmid [interval] [count] 参数说明: Options,选项,我们一般使用 -gcutil 查看gc情况 vmid,VM的进程号&#x…

python写一段脚本代码自动完成输入(目录下的所有)文件的数据替换(修改数据和替换数据都是输入的)【转】...

转自:http://blog.csdn.net/lixiaojie1012/article/details/23628129 初次尝试python语言,感觉用着真舒服,简单明了,库函数一调用就OK了[python] view plain copy 在CODE上查看代码片派生到我的代码片 import sys,os,os.path de…

java混合分页_坑,MySQL中 order by 与 limit 混用,分页会出现问题!

在Mysql中我们常常用order by来进行排序,使用limit来进行分页,当需要先排序后分页时我们往往使用类似的写法select * from 表名 order by 排序字段 limt M,N。但是这种写法却隐藏着较深的使用陷阱。在排序字段有数据重复的情况下,会很容易出现…

OSG开发概览

1 OSG基础知识 OSG是Open Scene Graphic 的缩写,OSG于1997年诞生于以为滑翔机爱好者之手,Don burns 为了对滑翔机的飞行进行模拟,对openGL的库进行了封装,osg的雏形就这样诞生了,1998年Don burns 遇到了同样喜欢滑翔…

hbuilder php xdebug,Hbuilder使用xdebug配置php断点调试

2019独角兽企业重金招聘Python工程师标准>>>##1. 背景不得不说Hbuilder是免费的前端开发工具中比较好用的,而且配合aptana开发php也马马虎虎(毕竟写前端的时候多些)。本人原是搞java的,后来打算用php做些个人项目(因为服务器成本低)&#xff0c…

mx播放器有没有投屏功能_无线投屏、即插即用,投影仪其实可以更智能:明基 E580T...

无论是简单的办公室会议还是小型的线下活动,投影仪都是必不可少的利器:既能有不错的显示效果,也不用受屏幕尺寸的约束。尽管越来越多的智能电视可供电脑连接,但真正派上用场的时候,拎箱就走的投影仪显然是最佳选择。很…

特殊矩阵-对角矩阵

2019独角兽企业重金招聘Python工程师标准>>> 挖坑。 转载于:https://my.oschina.net/aslanjia/blog/651503

vs运行时候冒了这个错:无法启动IIS Express Web 服务器~Win10

后期会在博客首发更新:http://dnt.dkill.net 异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 网上的方法多种,有让安装扩展插件的,有让在程序里面添加Http系列的组件,有其它其它的,可是。。。…

matlab脚本 定时停止_一触即发是什么软件?它是手机上极其强大的一款脚本辅助精灵...

一触即发app是手机上极其强大的一款免root的脚本辅助软件,堪称一键秒杀脚本精灵,除自动化、运行、管理外,还提供了脚本制作文字教程/视频教程,学习社区和图色处理、定时执行、王者荣耀、变量等命令参数和多点找色、多点找图、京东…

笔记本电脑处理器_高通提示低成本5G芯片更强大的笔记本电脑处理器

高通公司总裁克里斯蒂亚诺阿蒙(Cristiano Amon)在今天的柏林IFA贸易展览会的虚拟主题演讲中说,我们将很快看到更便宜的5G手机,以及更多具有更好应用兼容性的Windows-on-Snapdragon笔记本电脑。欧洲主要的电子产品展览会IFA今年被分成​​几个小组活动&am…

为什么6lowpan 要有四个地址_大型监控网络系统如何规划ip地址

本文转自网络对于监控项目来说,很多故障的原因都是跟ip地址设置不当有关,如ip冲突,或者有几路监控图像没有显示等,都是跟ip有一定关联,合理的分配ip地址十分重要。一、为什么要合理分配IP对于小型监控项目来说&#xf…

JAVA中的命令模式实例教程

原文链接 作者&#xff1a;Pankaj Kumar 译者&#xff1a;f0tlo <1357654289qq.com> 命令模式是一种行为模式&#xff0c;因此&#xff0c;它处理的是对象的行为。命令模式为系统中不同的对象提供中性化的交流媒介。根据GoF的定义&#xff0c;命令模式是&#xff1a; 通…

bugku 管理员系统 后台代码_不会吧,这也行?iOS后台锁屏监听摇一摇

[toc] 背景介绍 一般情况下&#xff0c;出于省电、权限、合理性等因素考虑&#xff0c;给人的感觉是很多奇怪的需求安卓可以实现&#xff0c;但是iOS就无法实现&#xff01;今天要介绍的需求也有这种感觉&#xff0c;就是“当 APP 处于后台或锁屏状态时&#xff0c;依旧可以监听…

windows php5.3升级,Windows10系统将PHPNOW升级PHP版本为5.3.5

Windows 10发布很久了&#xff0c;现在大多数人都在使用&#xff0c;在WIN10中使用PHPNOW&#xff0c;觉得自带的PHP版本有点低&#xff0c;所以就想升级下&#xff0c;在网上搜索了一些方法&#xff0c;然后结合自己的实际操作&#xff0c;在这里分享下。1、首先要下载PHP5.3.…

igs无法分配驱动器映射表_硬盘无法使用,用DiskPart进行分区和格式化,非常简单...

如果计算机硬盘出现问题&#xff0c;有时不是硬件上出现了错误&#xff0c;很可能只是逻辑上出现了问题&#xff0c;这时就可以使用DiskPart来快速解决。在Windows 10上&#xff0c;当外部存储(例如U盘、可移动硬盘或SD卡)由于数据损坏或其他问题而停止工作时&#xff0c;可以使…

硬件nat关闭还是开启_超能课堂(173):AfterBurner不止超频,还是绝佳的游戏伴侣...

微星AfterBurner软件可以说是一个相当好用的显卡工具&#xff0c;它好用的超频功能估计都不用我多说了吧&#xff1f;微星并没有把这款软件限制在自己品牌的显卡能用&#xff0c;各个品牌的显卡都能用&#xff0c;无论A卡还是N卡都可以用AfterBurner来超频&#xff0c;软件在超…