今天我们要讲的是layui中复选框的审核否这个功能,如下图所示:
当数据库该字段为true时表中的复选框为选中状态,自定义的操作按钮会显示已经审核不可进行更改的字样。
当我点击这个复选框时会弹出询问并且这个复选框会变更为未选中状态,如图所示:
当禁用成功后自定义的操作栏里就会出现对该条数据相应的操作按钮,同时数据库里的该字段也会做出相应的改变,那么这个是怎么做的呢?
首先我们需要在视图里写出如下代码:
这句代码就是layui里的表头的一些数据了不过你会发现这个圈起来的与别的有点不一样,不一样的点就在于它多了一个templet: ‘#checkboxDisable’,templet这个是什么意思呢这里就不多说因为layui文档里有可以自己去找,而这个#checkboxDisable也就是一个ID了。所以你会看出光写这个是写不出浏览器里的样式的,还需要这个ID所对应的的代码,对应的代码如下:
这个就是表格中所对应的ID了,它是在script标签外又写了个标签的,里面就是哪个复选框的样式代码了。
里面用花括号扩起来的就是数据库里对应的字段了左边的是ID右边的是是否的字段。这些字段前面的.d是不能该的(应该是layui里的)右边哪里有用到了三步法这个==1就选中否则就不选中。
所以当你查询号数据后你数据库里的这个布尔值是true那么这个就是选中的状态否则就不是。
做到这里算是已经做了一半了,那么如果更改它的状态呢?这里就要用到复选框样式代码里的lay-filter="disableDemo"和lay-skin="switch"了。
视图这边的代码是这样的:
申明一个全局变量form,在调用的查询方法下面写上form.on的监听事件里面就是上面的东西,下面的这些也不多说写好视图后来到控制器这里
来到控制器把视图写好的参数带到控制器中使用try{} catch{}捕捉一下错误,首先查询出这条数据的ID
再把视图里传过来的赋值给查询时申明好的变量里的字段。
接着就是修改数据也不多说,这个字段等于true的时候或者是false的时候的提示这个时候,是否的判断就完成了。