Layui的行内数据的获取
开发工具与关键技术:
作者:熊琪
撰写时间:2019.06.06
获取layui表格中的行,一般的都是直接加点击事件,或者是添加获取行的按钮,这里来说一说是怎么去获取到你点击的行的数据嘞,一般在修改某条数据或者删除某条数据时都能用到获取某行的数据。
LayuiTable行的监听事件,首先是要把表格的样式渲染出来,layui有动态表格和静态表格之分,动态表格无非就就是与数据库中数据连接对应字段显示,而静态表格就是字定义所有显示数据。
如图是渲染表格的代码图:
elem为表格数据的路径,cols表示表头,page是分页的操作,limit指定每页显示的条数,limits每页天数的选择项(意思是设置每页显示的条数)
要达到的效果就是点击行后获取到行的数据,然后将行的数据显示出来,或者删除等操作,首先说一下显示行内的数据,比如在修改数据中就有此操作点击行后在点击修改按钮接着就是将数据回填到输入框当中,代码图:
chckStatus来接收layuiTabe中chackStatus(检查状态)data(行内的数据)选中的数据,在做下一步操作前判断是否选中,如果没有,则checkStatus.data.length = 0。
所以判断语句则是:chckStatus.data.length != 0,意思就是点击后数据要不为0,否则弹出提示框告诉用户选择对应的数据。
效果图:
如果是删除的话也是同样的方法获取到数据后点击删除按钮,如过获取的数据大与0,则提示确定要删除该条数吗,否则提示请选择数据。
在很多地方都有运营到获取表格的数据,希望对需要的有用。