🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
<!--点击触发弹窗,弹窗显示表格内容--> <a onclick="ODxp(<?=$v['id']?>,<?=$v['logis_price']?>)">查看详情</a> <!-- 弹出层 --> html: ``` <div class="ODxp" style="display: none; padding:10px; width: 520px"> <table class="table table-bordered table-striped" > <tr> <th>序号</th> <th>商品名</th> <th>商品规格</th> <th>数量</th> <!-- <th>包装数量</th> --> <th>供货单价</th> </tr> <tbody id='ab'> //记录id,通过id进行赋值操作 </tbody> </table> <div style="text-align: right;">运费:<i id="yunfei"></i></div> <div style="text-align: right;">总价:<i id='zongjia'></i></div> </div> js: function ODxp(param1,param2){ // var id = param1; var logis_price = param2; var url = "<?php echo site_url('ware_center/order_list_gooods_details');?>" $.ajax({ //提交参数到后端获取数据 url:url, type:'post', dataType:'json', data:{'id':id,'logis_price':logis_price}, success:function(resData){ console.log(resData) var html = ''; $.each(resData.data.data,function(k,v){ html +='<tr>'; //循环返回的数据,插入到表格中 html +='<td>'+k+'</td>'; html +='<td>'+v.sku_name+'</td>'; html +='<td>'+v.sku_attrstr+'</td>'; html +='<td>'+v.num+'</td>'; html +='<td>'+v.sku_sum_price+'</td>'; html +='</tr>'; }); $('#ab').html(html); $('#yunfei').html(resData.data.freight); //表格后插入其他数据 $('#zongjia').html(resData.data.order_sum_price); } }) layer.open({ //触发展示的弹窗 type: 1, title: false, closeBtn: 0, shadeClose: true, skin: 'yourclass', area: ['520px', '300px'], content: $(".ODxp") }); } ```