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

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

原页面效果：

代码实现：

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

<div class="row row-lg">
                    <div class="col-sm-12">
                        <table id="detaillistTable"
                               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">
                            <thead>
                                <tr>
                                    <th data-field="index" data-align="center" data-formatter="indexformat"></th>
                                    <th data-field="doctorusername" data-visible="true" data-halign="center" data-align="center" data-sortable="true">登陆账号</th>
                                    <th data-field="doctorname" data-visible="true" data-halign="center" data-align="center" data-sortable="true" data-formatter="doctorname">医生姓名</th>
                                    <th data-field="patientname" data-visible="true" data-halign="center" data-align="center" data-sortable="true" data-formatter="patientname">病人姓名</th>
                                    <th data-field="checkitem" data-visible="true" data-halign="center" data-align="center" data-sortable="true">检查项目</th>
                                    <th data-field="amount" data-visible="true" data-halign="center" data-align="center" data-sortable="true" data-formatter="amount">扣费金额</th>
                                    <th data-field="remark" data-visible="true" data-halign="center" data-align="center" data-sortable="true" data-formatter="remarks">测量值</th>
                                    <th data-field="createdate" data-visible="true" data-halign="center" data-align="center" data-sortable="true" data-formatter="formatDateTime">时间</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

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

function remarks(value, row, index) {
    if (value.length > 20) {
        return "<div style=\"font-family:'微软雅黑'\" title='" + value + "'><a>详情</a></div>";
    } else {
        return "<div style=\"font-family:'微软雅黑'\">" + value + "</div>";
    }
}

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

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

动态模态框基本案例：

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

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

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

页面效果：点击详情

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

<div class="row row-lg">
                    <div class="col-sm-12">
                        <table id="detaillistTable"
                               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">
                            <thead>
                                <tr>
                                    <th data-field="index" data-align="center" data-formatter="indexformat"></th>
                                    <th data-field="doctorusername" data-visible="true" data-halign="center" data-align="center" data-sortable="true">登陆账号</th>
                                    <th data-field="doctorname" data-visible="true" data-halign="center" data-align="center" data-sortable="true" data-formatter="doctorname">医生姓名</th>
                                    <th data-field="patientname" data-visible="true" data-halign="center" data-align="center" data-sortable="true" data-formatter="patientname">病人姓名</th>
                                    <th data-field="checkitem" data-visible="true" data-halign="center" data-align="center" data-sortable="true">检查项目</th>
                                    <th data-field="amount" data-visible="true" data-halign="center" data-align="center" data-sortable="true" data-formatter="amount">扣费金额</th>
                                    <th data-field="remark" data-visible="true" data-halign="center" data-align="center" data-sortable="true" data-formatter="remarks">测量值</th>
                                    <th data-field="createdate" data-visible="true" data-halign="center" data-align="center" data-sortable="true" data-formatter="formatDateTime">时间</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

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

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
         <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h4 class="modal-title" id="exampleModalLabel">测量值:</h4>
          </div>
          <div class="modal-body">
            <textarea class="form-control" id="message-text">"+value+"</textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           </div>
         </div>
        </div>
    </div>

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

function remarks(value, row, index) {
    if (value.length > 20) {
        $("#message-text").val(value);
        return "<button type=\"button\" class=\"btn btn-link\" data-toggle=\"modal\" data-target=\"#exampleModal\">详情</button>";
    } else {
        return "<div style=\"font-family:'微软雅黑'\">" + value + "</div>";
    }
}