tp-admin使用dropdown时参数的绑定处理

在上一篇笔记中波波分享了《Layui框架利用dropdown插件实现下拉菜单》，但是在实际开发中我们不仅需要实现菜单，同时也需要传递参数。经过实际分析，dropdown.onfilter()的回调中获取不到当前点击的对象，因此我们必须尝试其他方法。

使用dropdown时参数的绑定处理

一、TP-admin集成dropdown插件。

1、下载dropdown插件，放在/static/plus/dropdown目录下。

2、修改“/static/admin/app.js”,在require.config下方增加如下代码：

  1. 'dropdown': ['../plugs/dropdown/dropdown'],

做好之后，我们在thinkphp的模板页面中就可以通过layui.use()方式引入了。示例代码如下。

  1. layui.use(['dropdown'],function (){
  2.             const dropdown = layui.dropdown;
  4.             }

二、绑定需要传递的参数。

温馨提示：在上一篇笔记中波波已经贴出了dropdown实现下拉菜单的代码，同时也分享了dropdown官方的演示案例链接，因此下面不再赘述HTML代码部分。

1、把table或form列表数据$list赋值给JS代码中的变量。

有很多人百度搜索如何把thinkphp的变量赋值给JS变量，其实方法很多，比如在html部分写个隐藏的input，把模板变量赋值进去，在document.ready时用JS获取。

在本例中我采用的是直接赋值。在js中声明一个变量，把$list的值变成json字符串进行传递。如下所示。

  1. let listData = {$list|json_encode=true};

完整JS绑定参数代码如下：

  1. <script>
  2.         let listData = {$list|json_encode=true};
  3.         layui.use(['dropdown'],function (){
  4.             const dropdown = layui.dropdown;
  5.             for(let i=0;i< listData.length;i++){
  6.                 dropdown.onFilter('more'+listData[i].id ,function (event){
  7.                     let href = event+'.html?id='+listData[i].id;
  8.                     window.location.href = '#'+href;
  9.                 })
  11.             }
  13.         })
  14.     </script>

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！