描述：自定义jqgird单元格，当移动至单元格上，显示一个自定义弹框
<div class="page-content">
<div class="page-content-area">
<div class="row">
<div class="col-xs-12">
<div class="row center">
<table id="grid" class="table"></table>
<div id="grid-pager"></div>
</div>
</div>
</div>
</div>
</div>$(function(){
var $grid = $("#grid"); //表格
var param = {}; //参数
param.page = "1";
param.rows = "10";
$.extend(param, urlParam);
//自定义单元格样式
var bloodSugarformatter = function(cellvalue, options, rowObject){
var type = options.colModel.name;
var bloodSugarObj = rowObject[type];
if(bloodSugarObj == null || bloodSugarObj.length == 0){
return " ";
}
if(bloodSugarObj.length > 1){
//弹出框内容
var bloodSugarDetailSheet = "<table class='table table-bordered'>" +
"<tr><th>xx值</th><th>xx单位</th><th>时段</th><th>时间</th></tr>";
for(var i = 0; i<bloodSugarObj.length; i++){
//判断测量时间
var surveyTime = " ";
if(bloodSugarObj[i].surveyTime != null){
surveyTime = new Date(bloodSugarObj[i].surveyTime).format('hh:mm:ss');
}
bloodSugarDetailSheet += '<tr><td>' + bloodSugarObj[i].bloodValue + '</td><td>' + bloodSugarObj[i].unit +
'</td><td>' + getMedicationTime(type) + '</td><td>' + surveyTime + '</td></tr>';
}
//自定义单元格内容
var str = '<span>' + bloodSugarObj[bloodSugarObj.length-1].bloodValue +
'<span class="badge badge-info bloodSugarDetail" style="cursor:pointer" data-toggle="popover" data-content="' + bloodSugarDetailSheet +
'">'+ bloodSugarObj.length+'</span></span>';
return str;
}else{
return bloodSugarObj[bloodSugarObj.length-1].bloodValue;
}
};
var insformatter = function(cellvalue, options, rowObject){
var type = options.colModel.name;
var ins = rowObject[type];
if(ins == null || ins.length == 0){
return " ";
}
if(ins.length > 1){
//弹出框内容
var insDetailSheet = "<table class='table table-bordered'>" +
"<tr><th>单次xxx量</th><th>xxxx单位</th><th>xxx时段</th><th>是否</th><th>xxxxx</th></tr>";
for(var i = 0; i<ins.length; i++){
//判断是否
var flag = " ";
if(ins[i].extra != null){
flag = "是";
}
insDetailSheet += '<tr><td>' + ins[i].singleDose + '</td><td>U</td><td>' + getMedicationTime(type) +
'</td><td>' + flag +'</td><td>' + ins[i].drugName + '</td></tr>';
}
//自定义单元格内容
var str = '<span>' + ins[ins.length-1].singleDose +
'<span class="badge badge-warning insDetail" style="cursor:pointer" data-toggle="popover" data-content="' + insDetailSheet +
'">'+ ins.length+'</span></span>';
return str;
}else{
return ins[ins.length-1].singleDose;
}
};
//查询表格
var $searchForm = $('#search-form');
$searchForm.validate({
submitHandler : function(form){
var $form = $(form);
var searchParam={};
if($form.find('[name="name"]').val())
searchParam.name= $form.find('[name="name"]').val();
if($form.find('[name="identityNo"]').val())
searchParam.certificateNo= $form.find('[name="identityNo"]').val();
if($form.find('[name="minTime"]').val())
searchParam.beginDate= $form.find('[name="minTime"]').val();
if($form.find('[name="maxTime"]').val())
searchParam.endDate= $form.find('[name="maxTime"]').val();
//清空postData
var postData = $grid.jqGrid("getGridParam", "postData");
$.each(postData, function (k, v) {
delete postData[k];
});
//更新表格
$grid.jqGrid('setGridParam',{
page:1,
postData : searchParam
}).trigger('reloadGrid');
}
});
//用户信息列表
$grid = $grid.jqGrid($.extend(Const.GRID_OPTION(),{
"url" : PATH,
"jsonReader" : {
root:"data.pageDate"
},
"loadComplete":function(){ //成功后的返回值
$('.navtable .ui-pg-button').tooltip({container:'body'});
$(this).find('.ui-pg-div').tooltip({container:'body'});
$(".bloodSugarDetail").popover({
trigger: 'click',
// trigger:"hover",
placement: 'left', //top, bottom, left or right
html: 'true',
});
$(".insDetail").popover({
trigger: 'click',
// trigger:"focus",
placement: 'bottom', //top, bottom, left or right
html: 'true',
// content: "ins", //内容
});
},
"colNames":[" "," ","日期","凌晨","前","xxxx","后","前","xxxx","后","前","xxxx","后","睡前"], //列显示名称
"colModel":[
{"name":"name","width":10,'sortable':false,"align":"center"},
{"name":"certificateNo","width":20,'sortable':false,"align":"center"},
{"name":"surveyTime","width":15,'sortable':false,"align":"center"},
{"name":"lingChenList","width":10,'sortable':false,"align":"center",'formatter':bloodSugarformatter},
{"name":"zaoCanQianList","width":10,'sortable':false,"align":"center",'formatter':bloodSugarformatter},
{"name":"zaoCanInsList","width":10,'sortable':false,"align":"center",'formatter':insformatter},
{"name":"zaoCanHouList ","width":10,'sortable':false,"align":"center",'formatter':bloodSugarformatter},
{"name":"wuCanQianList","width":10,'sortable':false,"align":"center",'formatter':bloodSugarformatter},
{"name":"wuCanInsList","width":10,'sortable':false,"align":"center",'formatter':insformatter},
{"name":"wuCanHouList","width":10,'sortable':false,"align":"center",'formatter':bloodSugarformatter},
{"name":"wanCanQianList","width":10,'sortable':false,"align":"center",'formatter':bloodSugarformatter},
{"name":"wanCanInsList","width":10,'sortable':false,"align":"center",'formatter':insformatter},
{"name":"wanCanHouList","width":10,'sortable':false,"align":"center",'formatter':bloodSugarformatter},
{"name":"shuiQianList","width":10,'sortable':false,"align":"center",'formatter':bloodSugarformatter}
],
})).jqGrid('setGroupHeaders', { //2行表头
useColSpanStyle: true, //没有表头的列是否与表头所在行的空单元格合并
groupHeaders:[
{startColumnName:'name', numberOfColumns:2, titleText: '个人信息'},
{startColumnName:'zaoCanQianList', numberOfColumns: 3, titleText: '早餐'},
{startColumnName:'wuCanQianList', numberOfColumns:3, titleText: '午餐'},
{startColumnName:'wanCanQianList', numberOfColumns:3, titleText: '晚餐'}
]
}).jqGrid("navGrid",Const.GRID_PAGER_ID,{ //分页
edit: false,
add: false,
del: false,
search: false,
refresh: true,
refreshicon : 'ace-icon fa fa-refresh green'
});
//excel导出
$("#exportExcel").click(function(){
var url = " ";
url+=PATH+urls.exportBloodSugarSheet;
url +='?hospitalId='+param.hospitalId+'&deviceId='+param.deviceId;
$form=$('#search-form');
if($form.find('[name="name"]').val()){
param.name= $form.find('[name="name"]').val();
url+='&name='+param.name;
}
if($form.find('[name="identityNo"]').val()){
param.certificateNo= $form.find('[name="identityNo"]').val();
url+='&certificateNo='+param.certificateNo;
}
console.log(url);
exportFiles(url);//导出
});
//判断表格中xxxxx时段
function getMedicationTime(parameter) {
if(parameter == "lingChenList"){
return "凌晨";
}else if(parameter == "zaoCanQianList"){
return "早餐前";
}else if(parameter == "zaoCanHouList"){
return "早餐后";
}else if(parameter == "wuCanQianList"){
return "午餐前";
}else if(parameter == "wuCanHouList"){
return "午餐后";
}else if(parameter == "wanCanQianList"){
return "晚餐前";
}else if(parameter == "wanCanHouList"){
return "晚餐后";
}else if(parameter == "shuiQianList"){
return "睡前";
}else if(parameter == "zaoCanInsList"){
return "早餐";
}else if(parameter == "wuCanInsList"){
return "午餐";
}else{
return "晚餐";
}
}
//时间选择器设置
$('.datepicker').datepicker({
startView: 2,
language: "zh-CN",
format: "yyyy-mm-dd",
autoclose: 1
});
//日期格式
Date.prototype.format = function(format) {
var date = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S+": this.getMilliseconds()
};
if (/(y+)/i.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (var k in date) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1
? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
}
}
return format;
}
});