其他分享
首页 > 其他分享> > Layui-Tool工具条中使用id按钮

Layui-Tool工具条中使用id按钮

作者:互联网

Layui-Tool工具条中使用id按钮

开发工具与关键技术:Visual Studio 前端

作者:盘子

撰写时间: 2019年 07月 14 日

在做项目过程中,总会遇到许多大大小小的问题。但一个问题、错误点的出现也是一个学习知识点的收获。下面是我在做项目的过程中遇到的一个问题,对我来说也是学习到了一个新的知识点。其实,这也是一个很简单的问题点,就是layui—tool工具条中button按钮的使用。下面来总结与学习一下。下面是相关的代码,见代码截图如下:

 1、代码图一:layui—Tool工具条中设置按钮,如图:

在这里我要实现一个有关数据作废与启用的功能,然后我把两个按钮设置在了layui—Tool工具条中,这两个按钮在这个功能事件中是使用id来实现的,而不是平时的点击事件onclick()来实现,如上面的代码截图所示。

   做这个功能所写的代码是完整的,数据、事件监听、控制器页面跳转、页面调试都是没有问题的,运行页面也没有错误输出。但点击停用或启用button按钮时是没有反应的,相当于这两个按钮是虚设的,也就是说在这个过程中做无用功了!

但有问题总是要去解决的,在尝试了几遍后,我试着把这两个按钮的id点击事件设置到layui—table外面,也就是layui—Tool工具条之外其他的页面按钮里。点击按钮,只能获取到最初的提示信息:“请选择需要的数据!”,而且是重复出现弹框。(如最后的效果图图二所示的弹框效果)。点击弹出提示框里面的“确定”按钮,回到当前页面,table里面的数据无变化(如效果图图一)。因为在这里作废与启用功能实现后,选定的数据状态会被改变,区别是否改变在于设定的数据字体颜色、名称有无发生改变。就如在这里,我是要对“停药”这条数据进行状态改变,把它本来的状态设置为绿色字体的“已启用”,改变后的状态设置为红色字体的“已停用”(如效果图图三所示)。

把id点击事件设置到其他的页面按钮里,点击获取到的结果只有上面所说的不断重复弹框提示。把这两个按钮设置在layui-tool工具条外,操作正常,也就是这个功能实现了。但是不服气的我还是想要在layui—tool工具条中使用这两个按钮,把这功能实现。于是有了下面实现功能的代码截图,见代码截图如下:

2、代码图二:关键字var 声明变量,写方法,如图:

如图,在layui-tool工具条中设置id点击事件按钮的使用方法,先要用关键字var声明变量。而后就是写方法,但被声明的那个方法要写在渲染的表格中,而且方法名要保持一致。在tool工具条设置id按钮的方法写在什么位置也是很重要的,因为要改变的数据是在这个渲染的表格内,所以要写在渲染的表格内。声明变量、方法写完整,功能就可以实现的,选择需要作废的数据,点击“停用”按钮,弹框提示:“确定要作废所选择的数据吗?”,按“确定”即可将所选的数据状态改变,也可以将作废的数据点击“启用”按钮进行重新启用。效果如下面的效果图图二、图三所示。

  功能是实现了,但是还存在一个问题,那就是在选取数据时,数据表格出现了类似下拉框,两个点击按钮也是无法使用的。因为在tool工具条中设置id点击事件按钮无法实现点击事件,主要是因为layui这个插件过于强大,它具有优先级,所以按钮点击事件被限制了。由于layui插件的强大,还有就是为了后面的数据不出错,我还是把这两个按钮设置在了tool工具条外,整个table外面。这个问题总结是按照自己所理解来写的,有错误的地方,欢迎指出并该建议。

 

标签:Layui,Tool,按钮,tool,id,点击,layui,工具条
来源: https://blog.csdn.net/weixin_44543412/article/details/95877763