bootstarpTable点击行事件，点击数据事件，layer实现的包含页面的弹出层

需求：在一个bootstrapTable插件实现的表格中，需要在点击某行的时候弹出一个模态框，模态框中展示了表格元素的具体信息。

具体效果如下图：



bootstrapTable中自带了点击行的事件：

$('#nurseDateTable').bootstrapTable({
sortable: false,                     //是否启用排序
data: nurseData,
columns: [{
field: 'nursename',
title: '护士姓名',
visible: true,
}, {
field: 'mobilephone',
title: '手机号码',
visible: true
}, {
field: 'sex',
title: '性别',
visible: false
}, {
field: 'registtime',
title: '注册时间',
visible: true
},{
field: 'institutionname',
title: '医院',
visible: false
}, {
field: 'jobtitlename',
title: '职称',
visible: false
},{
field: 'cityname',
title: '所在城市',
visible: false
}],
onDblClickRow: function (row) {
layer.open({
type: 2,
title: '护士详细信息',
content: 'web?module=stwmgr&action=DoctorPersonData&method=showDbClickNurseData&tokenId=<%=request.getParameter("tokenId")%>&clicknurseid=' + row.id
});
}
});

在初始化表格的时候就可以通过onDblClickRow：function（）{}来实现，这个事件是通过双击触发的，onClickRow是单机事件。

双击事件的函数中使用了layer弹出层：

1.在使用layer的时候需要说明type

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

2.content 内容

类型：String/DOM/Array，默认：”

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。

像我在使用layer的时候就是用了iframe层，通过content只想后台的一个action，在跳转会一个新的页面，这个页面会在弹出层中显示，并可以通过area属性控制大小。

这样做的好处就是可以在传递复杂的参数，例如jsonArray数组，list数组。并可以在新的页面中规定样式，方便页面的美化。

iframe层还可以通过js中拼接的方法来控制内容：

var html = "<div class='wrapper' id='detailsinfo'>" +
"<div class='detailsdiv'>" +
"<p><label>帐号：</label>" + '测试帐号' +"</p>" +
"</div></div>"

layer.open({
type: 1,
title: '账户信息详情',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: html
});

像我使用的就是第一种方式。

在后面扫地僧提出了另一个要求，就是点击表格中的数据也要能弹出模态框，刚开始我觉得bootstrapTable这个插件的数据都是生成好的，他是不是脑子有问题，提出这么稀奇古怪的要求。我是不可能在上面绑定事件的，我真的很想huck他，后来发现还是我小看了这个插件，前人栽树，后人乘凉，果然把我们能想到的都考虑进去了。

$('#patientDateTable').bootstrapTable({
pagination: true,                   //是否显示分页
columns: [{
field: 'patientname',
title: '患者姓名',
visible: true,
formatter:function(value,row,index){
var url = '<a href="#"  style="color:blue"  onclick="morePatInfo(\'' + row.id + '\')">' + value + '</a>  ';
return url;
}
}, {
field: 'mobilephone',
title: '手机号码',
visible: true
}, {
field: 'sex',
title: '性别',
visible: false
}, {
field: 'age',
title: '年龄',
visible: false
},{
field: 'registertime',
title: '注册时间',
visible: true
}, {
field: 'cityname',
title: '所在城市',
visible: false
}, {
field: 'invitename',
title: '邀请人姓名',
visible: false
}, {
field: 'number',
title: '关联医生数',
visible: true,
formatter:function(value,row,index){
var url = '<a href="#" style="color:blue" onclick="relateDocInfo(\'' + row.id + '\')">' + value + '</a>  ';
return url;
}
}],
data: patientData
});

可以看到在初始化行的时候，提供了一个formatter属性，他会通过一个函数传递表格中的值，value就是要在该单元格中显示的数据，row就是改行，在这里我传回的jsonArray数据中有id的属性，便可以通过row.id直接获取。通过拼接url成为一个a标签，成功在表格中生成了一个带点击功能的a标签。这样就可以通过relateDocInfo（id）函数中调用layer传递参数，并返回页面。