循环后页面跳转

最新推荐文章于 2024-05-10 11:12:24 发布

LeuPener

最新推荐文章于 2024-05-10 11:12:24 发布

阅读量291

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sc0002/article/details/99621580

本文介绍了一种使用JavaScript和layui框架实现的成本数据展示方法，通过解析返回的数据，动态生成包含成本信息的卡片，并为每个卡片添加了点击事件，用于跳转到详细页面。此方法适用于财务或成本管理系统的前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 success: function (_datas) {
                    console.log(_datas)
                    for (var i = 0; i < _datas.message.length; i++) {
                        var costListHtml = '<div class="layui-col-md3 layui-col-sm6 lay-col-sub">' +
                            '<div class="layui-card">' +
                            '<div class="layui-card-header">' + _datas.message[i].name + '</div>' +
                            '<div class="layui-card-body">' +
                            '<ul>' +
                            '<li>人民币<span>￥ ' + _datas.message[i].totalCost.costbudget + '</span></li>' +
                            '<li>港币<span>HK$ ' + _datas.message[i].totalCost.costhk + '</span></li>' +
                            '<li>美元<span>$ ' + _datas.message[i].totalCost.costusd + '</span></li>' +
                            '<li>欧元<span>€  ' + _datas.message[i].totalCost.costeur + '</span></li>' +
                            '</ul>' +
                            '<div class="btn-pen"><a href="javascript:void(0);" data-pen="' + _datas.message[i].infoID + '" class="pencil-btn"> 详情</a></div>'+
                            '</div>' +
                            '</div>' +
                            '</div>';

                             
                            $('.sun-li-list').append(costListHtml)
                    }
                    $('.sun-li-list').on('click', '.pencil-btn', function () {
                        var penV = $(this).data("pen");
                        var Yearsval= $("#year").val();
                        var Monthval= $("#month").val();
                          parent.layer.open({
                                type: 2,
                                title: '维修成本',
                                area: ['100%', '100%'],
                                fixed: false,
                                maxmin: true,
                                content: "/CostManagement/costroletailWX.html?SuppliersID="+penV+"&Yearsval="+Yearsval+"&Monthval="+Monthval,
                            });
                    })


                }