点击button触发JS函数,通过AJAX传值给后台查询,将返回值处理成table表格,添加到模态框里显示

//点击触发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>
<!-- 操作记录模态框结束 -->

猜你喜欢

转载自blog.csdn.net/qq_33867131/article/details/79241085