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外面。这个问题总结是按照自己所理解来写的，有错误的地方，欢迎指出并该建议。