需求:在一个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传递参数,并返回页面。