bootstrap 点击table中某一列，弹出模态框

（一）bootstrap-table中测量值太长了，显示不美观，为了显示美观，把测量值大于20个字，让其显示详情，鼠标悬浮到这个值 时候，出现悬浮框。

原页面效果：

代码实现：

（1）后台返回的数据到前台table

                    

                                                        data-toggle="table"
                               data-url="detail.do?auditlist&audittype=1&doctorid=${doctorid}"
                               data-cache="false"
                               data-unique-id="id"
                               data-striped="true"
                               data-row-style="rowStyle">
                           
                               
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                               
                           
                        

	登陆账号	医生姓名	病人姓名	检查项目	扣费金额	测量值	时间

                   

                

（2）测量值悬浮框js代码（利用title，跟abbr标签差不多）

function remarks(value, row, index) {
    if (value.length > 20) {
        return "

详情

";
    } else {
        return "

" + value + "

";
    }
}

悬浮框页面效果:(鼠标移动到详情，出现悬浮框）

（二）这个页面要给触屏设备使用，这个设备没有鼠标，显然上面的方案行不通了，我们就想到了，动态模态框处理，点击详情时候，弹出模态框。

动态模态框基本案例：

 type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal

 class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   class="modal-dialog modal-lg">
     class="modal-content">
      ...
    

我们要做的就是把回台返回的测量值，变成这种模态框样式。

页面效果：点击详情

（1）后台返回的数据到前台table

                    

                                                        data-toggle="table"
                               data-url="detail.do?auditlist&audittype=1&doctorid=${doctorid}"
                               data-cache="false"
                               data-unique-id="id"
                               data-striped="true"
                               data-row-style="rowStyle">
                           
                               
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                               
                           
                        

	登陆账号	医生姓名	病人姓名	检查项目	扣费金额	测量值	时间

                   

                

   在原有页面上添加悬浮框代码：

        

        

         

            ×
             

测量值:

         

         

            "+value+"
         

         

            Close
          

        

        

    

（2）测量值悬浮框js代码

function remarks(value, row, index) {
    if (value.length > 20) {
        $("#message-text").val(value);
        return "详情";
    } else {
        return "

" + value + "

";
    }
}