若依框架不分离版-根据列表参数用弹窗显示请求的数据

HTML 的按钮绑定函数

<a class="btn btn-info single disabled" οnclick="AAA()" >
    <i class="fa fa-plus"></i> 功能
</a>

这边用layer弹窗显示请求回来的数据

JAVASCRIPT 

var prefixfile = ctx + "xxx/xxxxxxx";
function AAA() {
    // 获取选中的行数据
    let rows = $('#bootstrap-table').bootstrapTable('getSelections');
    if (rows.length === 0) {
        alert('请选择一条记录');
        return;
    }
    //列表行中某个参数,我这边用id
    let id = rows[0].id;
    $.ajax({
        type: 'POST',
       //请求的接口
        url: prefixfile + "/XXXXX",
        data: { id: id },
        dataType: 'json', // 指定返回的数据类型为 JSON
        success: function(response) {
            if (response && response.rows) {
                let content = response.rows;
                console.log("1",content);
                let htmlContent = '';
                content.forEach(function(file) {
                    htmlContent += `<a href="${file.XXX}" target="_blank">${file.XXXX}</a><br>`;
                });
                // 使用 layer 打开模态框
                layer.open({
                    type: 1, // 页面层
                    title: '文件列表',
                    area: ['1024px', '700px'], // 宽高
                    content: htmlContent // 填充模态框内容
                });
            } else {
                console.error('响应数据不包含 data 属性或数据为空');
            }
        },
        error: function(error) {
            console.error('请求出错:', error);
        }
    });
}
  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一种用于构建用户界面的开源JavaScript框架,通过它可以方便地创建交互式的网页应用程序。 在Vue中,要实现列表弹窗查看详情的功能,可以按照以下步骤进行操作: 1. 引入Vue及需要的组件和依赖库,例如Vue的核心库、Vue Router、对话框组件等。 2. 创建一个Vue实例,并定义需要的数据、方法和计算属性。 3. 在Vue实例中使用Vue Router配置路由,定义列表页面和弹窗详情页面的路由规则。 4. 在列表页面中获取需要展示的列表数据,可以通过Vue的生命周期钩子函数或异步请求获取数据。 5. 使用v-for指令遍历列表数据,在页面上渲染出列表项,并为每个列表项绑定点击事件。 6. 在点击事件中,根据列表项的ID或索引等标识符,通过Vue Router的编程式导航,跳转到对应的详情页面。 7. 在详情页面中,根据传递过来的参数获取对应的详情数据,并将数据展示在页面上。 8. 为详情页面添加返回按钮或其他交互元素,用于返回列表页面。 9. 在列表页面中使用对话框组件,设置对话框的触发条件和显示内容。 10. 在点击事件中,根据列表项的ID或索引等标识符,将要展示的详情内容传递给对话框组件,并触发对话框显示。 11. 在对话框中,使用插槽(slot)或自定义组件的方式,展示传递过来的详情内容,可以根据需求进行样式和布局调整。 12. 配置对话框关闭的事件,使得在用户点击关闭按钮或其他操作时,隐藏对话框。 13. 根据需要,在列表页面和详情页面中添加其他交互和样式优化。 以上是通过Vue实现列表弹窗查看详情的基本步骤和思路,具体的实现细节和代码可以根据项目需求和开发者的实际情况进行调整和完善。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值