//点击触发onclick事件,携带此行的bodycode传参给JS函数tiaozhuan();(这里的<a>标签,可以换成<button>) <td> <a href="javascript:void(0);" onclick="tiaozhuan('{$v.bodycode}')" data-toggle="modal" data-target="#myModal" >操作记录</a> </td> //JS函数将获取到bodycode传给后台进行查询,返回JSON数组,获取返回值obj拼接成表格字符串str,添加到模态框里显示 <script type="text/javascript"> function tiaozhuan(bodycode) { $.ajax({ url:'__URL__/listlog', type:"POST", data:{ bodycode:bodycode }, dataType:"json", success:function(obj){ var str = '';//动态拼接table for (var i = 0; i < obj.length; i++) { //对应数组表的字段值 var num = i+1; str += '<tr>'; str += '<td>' + num + '</td>'; str += '<td>' + obj[i].bodycode + '</td>'; str += '<td>' + obj[i].shop_id + '</td>'; str += '<td>' + obj[i].t_code + '</td>'; str += '<td>' + obj[i].remark + '</td>'; str += '<td>' + obj[i].time + '</td>'; str += '</tr>'; } //运用html方法将拼接的table添加到tbody中 $("#tbody").html(str); } }); } </script> //后台代码 public function listlog() { $map['bodycode'] = $_POST['bodycode']; $list = M("user") ->where($map) ->field("bodycode,depid,shop_id,t_code,remark,time") ->order('time') ->select(); echo json_encode($list); } <!-- 操作记录模态框开始 --> <!-- data-backdrop="static" 点击对话框外灰色背景不退去--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true" > <!-- 在此处加style可以设置模态框的宽度,高度 --> <div class="modal-dialog" style="width:auto;"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel"> 操作记录 </h4> </div> <div class="modal-body"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>编号</th> <th>机具号</th> <th>商户号</th> <th>终端号</th> <th>操作记录</th> <th>时间</th> </tr> </thead> <!-- 此处设置JS添加文本的id --> <tbody id="tbody"> <!-- 一般这里都会放一个foreach循环遍历数组 --> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">确定 </button> </div> </div> </div> </div> <!-- 操作记录模态框结束 -->
点击button触发JS函数,通过AJAX传值给后台查询,将返回值处理成table表格,添加到模态框里显示
猜你喜欢
转载自blog.csdn.net/qq_33867131/article/details/79241085
今日推荐
周排行