FastAdmin在index的表中勾选checkbox提供url参数

HTML页面中的自定义按钮与JavaScript交互：处理checkbox选择并动态更新URL

最新推荐文章于 2024-09-14 08:56:55 发布

原创最新推荐文章于 2024-09-14 08:56:55 发布 · 591 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#服务器 #前端 #运维

fastadmin 专栏收录该内容

38 篇文章

订阅专栏

文章讲述了如何在HTML页面中使用A标签实现自定义按钮，当用户选择多个checkbox时，通过JavaScript操作获取数据-url属性，并动态更新链接，涉及test.js文件的修改和test控制器的调用，最终展示弹出结果页面。

在页面html中（application\admin\view\test\index.html）添加A标签

<!--测试index页面的自定义按钮-->
 <a href="javascript:;" id="testargs" data-url="test/demo" class="btn btn-danger btn-dialog">界面按钮参数</a>
<!--测试index页面的自定义按钮-->

修改js代码（\public\assets\js\backend\test.js）

//此处为    index:   范畴
            //改变checkbox时响应  '#table .bs-checkbox [type="checkbox"]' 是checkbox的选择符
            $(document).on('change','#table .bs-checkbox [type="checkbox"]',function(){

                let url=$('#testargs').attr('data-url');//获取id为testargs连接的data-url属性值
                url=url.split('?')[0];//按照?分割后取前部分，后面不要了
                let ids=Table.api.selectedids(table);//取得ids，这个是管理员的

                if(ids.length){
                    let u_id=[];
                    ids.forEach(element=>{
                        let data=Table.api.getrowbyid(table,element);//按照admin_id获取行记录内容
                        console.log(data);
                        if(!u_id.includes(data.admin_id))
                        {//admin_id不在数组里，就添加，重复不添加了
                            u_id.push(data.admin_id);
                        }
                    });
                    if(u_id.length)
                    {//admin_id就拼接url
                        url+='?';
                        url+='id='+u_id.join(',')
                    }
                }
                let obj=$('#testargs');

                //反斜杠可以运行插值
                obj.after(`<a href="javascript:;" id="testargs" data-url="${url}" class="btn btn-danger btn-dialog">界面按钮参数</a>`);
                obj.remove()
                //$('#testargs').attr('data-url',url)
            })

添加勾选checkbox响应事件