ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit 348a98cd2efaf7680ca9112ae194b11afdf6b7ac 1 parent baeeb187

mysq监控

Inline Side-by-side
Showing 2 changed files with 237 additions and 98 deletions
(function($) {
// 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件
// 才保留了jQuery.prototype这个形式
$.fn.mergeCell = function(options) {
return this.each(function() {
var cols = options.cols;
for ( var i = cols.length - 1; cols[i] != undefined; i--) {
// fixbug console调试
// console.debug(cols[i]);
mergeCell($(this), cols[i]);
}
dispose($(this));
});
};
// 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
// 具体可以参考本人前一篇随笔里介绍的那本书
function mergeCell($table, colIndex) {
$table.data('col-content', ''); // 存放单元格内容
$table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
$table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
$table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
// 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
$('tbody tr', $table).each(function(index) {
// td:eq中的colIndex即列索引
var $td = $('td:eq(' + colIndex + ')', this);
// 取出单元格的当前内容
var currentContent = $td.html();
// 第一次时走此分支
if ($table.data('col-content') == '') {
$table.data('col-content', currentContent);
$table.data('col-td', $td);
} else {
// 上一行与当前行内容相同
if ($table.data('col-content') == currentContent) {
// 上一行与当前行内容相同则col-rowspan累加, 保存新值
var rowspan = $table.data('col-rowspan') + 1;
$table.data('col-rowspan', rowspan);
// 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
$td.hide();
// 最后一行的情况比较特殊一点
// 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
if (++index == $table.data('trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
} else { // 上一行与当前行内容不同
// col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
if ($table.data('col-rowspan') != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
// 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
$table.data('col-td', $td);
$table.data('col-content', $td.html());
$table.data('col-rowspan', 1);
}
}
});
}
// 同样是个private函数 清理内存之用
function dispose($table) {
$table.removeData();
}
})(jQuery);
\ No newline at end of file
... ...
... ... @@ -26,6 +26,8 @@
type="text/javascript"></script>
<script src="<%=basePath%>js/jquery-1.12.0.min.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath%>js/jquery.table.mergecell.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath%>js/jquery-ui.custom.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath%>/js/bootstrap.min.js"></script>
... ... @@ -80,11 +82,11 @@
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title" style="height: 35px;">
<%--<div class="widget-title" style="height: 35px;">
<div>
</div>
</div>
</div>--%>
<div class="widget-content">
<div id="mysqlTable" style="overflow-y: auto; overflow-x: hidden; max-height: 800px"></div>
</div>
... ... @@ -113,13 +115,9 @@
loadFilter : function(data) {
return defaultLoadFilter(data);
},
onLoadSuccess : function(data) {
// var data = $('#table').bootstrapTable('getData', true);
//合并单元格
//mergeCells(data, "name", 0, $('#mysqlTable'));
alert(1);
MergeCell('mysqlTable',0,0);
onLoadSuccess : function() {
mergeCell2($('#mysqlTable'),1,[0,1]);
mergeCell($('#mysqlTable'),0);
},
/* queryParams:{
"eventName":"测试一下而已"
... ... @@ -129,44 +127,6 @@
});
///合并表格相同行的内容
///tableId：表格ID（最好是tbody，避免把表尾给合并了)
///startRow：起始行，没有标题就从0开始
///endRow：终止行，此参数是递归时检查的范围，一开始时会自动赋值为最后一行
///col：当前处理的列
function MergeCell(tableId, startRow, col,endRow) {
var tb_jq = $("#mysqlTable div table tbody");
var tb=tb_jq[0]; //DOM对象
console.log(tb);
if (col >= tb.rows[0].cells.length) {
return;
}
//当检查第0列时检查所有行
if (col == 0 || endRow == 0) {
endRow = tb.rows.length - 1;
}
for (var i = startRow; i < endRow; i++) {
//程序是自左向右合并
if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
//如果相同则删除下一行的第0列单元格
tb.rows[i + 1].cells[col].style.display='none';
//更新rowSpan属性
tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
//当循环到终止行前一行并且起始行和终止行不相同时递归(因为上面的代码已经检查了i+1行，所以此处只到endRow-1)
if (i == endRow - 1 && startRow != endRow) {
MergeCell(tableId, startRow, endRow, col + 1);
}
} else {
//起始行，终止行不变，检查下一列
MergeCell(tableId, startRow, i, col + 1);
//增加起始行
startRow = i + 1;
}
}
}
function getColumns(){
var columns = [
... ... @@ -181,22 +141,28 @@
}
},
{
title : "aws主机",
field : "awsMObjectInfo",
width : "40%",
align:"left",
alignColumn:"center",
formatter : function(value, rowData, rowIndex) {
return fmtHost(rowData.awsMObjectInfo);
title : "归属云",
field : "cloudType",
width : "10%",
styler : function(value, rowData, rowIndex){
return {
"vertical-align" : "middle"
};
}
},{
title : "qcloud主机",
field : "qcloudMObjectInfo",
width : "40%",
},
{
title : "主机",
field : "moHostIp",
width : "80%",
align:"left",
alignColumn:"center",
formatter : function(value, rowData, rowIndex) {
return fmtHost(rowData.qcloudMObjectInfo);
return fmtHost(value,rowData.moTags);
},
styler : function(value, rowData, rowIndex){
return {
"vertical-align" : "middle"
};
}
}/*,
{
... ... @@ -215,66 +181,169 @@
}
function fmtHost(instances) {
if(instances == null || instances.length == 0){
function fmtHost(ip,tags) {
if(ip == null || ip.length == 0){
return;
}
var masterIps="";
var slaveIps="";
for(var index = 0;index < instances.length;index++){
//属性 主机标签 --tags
var tags = instances[index].moTags;
var masterFlag=false;
var masterBadage='<span class="badge" style="background-color: #fff;font-weight:normal;">&nbsp;&nbsp;&nbsp;</span>';
var tagsBadage="";
var ipBackgroudColor="#5bc0de";
if(tags != null && tags!= ""){//展示标签信息
tagsBadage= "<span class=\"badge\" style=\"background-color: #5bc0de;font-weight:normal;font-size: 13px\";>标签:&nbsp;" + tags +"</span>";
if(tags.toUpperCase().indexOf("MASTER")>=0){
masterFlag=true;
masterBadage='<span class="badge">M</span>';
ipBackgroudColor="#777";
}
//属性 主机标签 --tags
var masterFlag=false;
var masterBadage='<span class="badge" style="background-color: #fff;font-weight:normal;">&nbsp;&nbsp;&nbsp;</span>';
var tagsBadage="";
var ipBackgroudColor="#5bc0de";
if(tags != null && tags!= ""){//展示标签信息
tagsBadage= "<span class=\"badge\" style=\"background-color: #5bc0de;font-weight:normal;font-size: 13px\";>标签:&nbsp;" + tags +"</span>";
if(tags.toUpperCase().indexOf("MASTER")>=0){
masterFlag=true;
masterBadage='<span class="badge" style="background-color: #5bc0de;font-weight:normal;">M</span>';
//ipBackgroudColor="#5bc0de";
}
}
var healthCss=' style="background-color: '+ipBackgroudColor+';font-weight:normal;" ';
var runningStatusMessage = '&nbsp;&nbsp;<a href="#" title="master"><span class="badge" style="background-color: '+ipBackgroudColor+';font-weight:normal;"><i class="fa fa-check-circle" aria-hidden="true"></i></span></a>';
/*if("Healthy"!=instances[index].runningStatus){
healthCss=' style="background-color: #DD514D;font-weight:normal;" ';
runningStatusMessage='&nbsp;&nbsp;<a href="#" title="异常"><span class="badge" style="background-color: #DD514D;font-weight:normal;"><i class="fa fa-exclamation-circle" aria-hidden="true"></i></span></a>';
}*/
var healthCss=' style="background-color: '+ipBackgroudColor+';font-weight:normal;" ';
var runningStatusMessage = '&nbsp;&nbsp;<a href="#" title="master"><span class="badge" style="background-color: '+ipBackgroudColor+';font-weight:normal;"><i class="fa fa-check-circle" aria-hidden="true"></i></span></a>';
/*if("Healthy"!=instances[index].runningStatus){
healthCss=' style="background-color: #DD514D;font-weight:normal;" ';
runningStatusMessage='&nbsp;&nbsp;<a href="#" title="异常"><span class="badge" style="background-color: #DD514D;font-weight:normal;"><i class="fa fa-exclamation-circle" aria-hidden="true"></i></span></a>';
}*/
var hostip='<span class="label" style="font-weight:normal;">';
hostip+= ('<span class="badge" '+healthCss+'>'+ip);
for(var i=0;i<=(15-ip.length);i++){
hostip+="&nbsp;&nbsp;"
}
hostip += runningStatusMessage;
hostip += '</span>';
hostip += '</span>';
hostip = hostip +tagsBadage;
var onehost='<h4>'+masterBadage+hostip+'</h4>';
if(masterFlag){
masterIps += onehost;
}else{
slaveIps += onehost;
}
return masterIps+slaveIps;
}
// 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
// 具体可以参考本人前一篇随笔里介绍的那本书
function mergeCell($table, colIndex) {
$table.data('col-content', ''); // 存放单元格内容
$table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
$table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
$table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
// 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
$('tbody tr', $table).each(function(index) {
// td:eq中的colIndex即列索引
var $td = $('td:eq(' + colIndex + ')', this);
// 取出单元格的当前内容
var currentContent = $td.html();
var hostip='<span class="label" style="font-weight:normal;">';
hostip+= ('<span class="badge" '+healthCss+'>'+instances[index].moHostIp);
// 第一次时走此分支
if ($table.data('col-content') == '') {
//在个别机器的chrome版本上instances[index].ip取不到值，很奇怪，因此添加一个if判断，跳过
if(instances[index]!=null&&instances[index].moHostIp!=null&& instances[index].moHostIp != undefined&&instances[index].moHostIp!=""){
for(var i=0;i<=(15-instances[index].moHostIp.length);i++){
hostip+="&nbsp;&nbsp;"
$table.data('col-content', currentContent);
$table.data('col-td', $td);
} else {
// 上一行与当前行内容相同
if ($table.data('col-content') == currentContent) {
// 上一行与当前行内容相同则col-rowspan累加, 保存新值
var rowspan = $table.data('col-rowspan') + 1;
$table.data('col-rowspan', rowspan);
// 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
$td.hide();
// 最后一行的情况比较特殊一点
// 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
if (++index == $table.data('trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
} else { // 上一行与当前行内容不同
// col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
if ($table.data('col-rowspan') != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
// 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
$table.data('col-td', $td);
$table.data('col-content', $td.html());
$table.data('col-rowspan', 1);
}
}
});
}
function mergeCell2($table, colIndex,checkColsArray) {
$table.data('col-content', ''); // 存放单元格内容
$table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
$table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
$table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
hostip += runningStatusMessage;
// 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
$('tbody tr', $table).each(function(index) {
// td:eq中的colIndex即列索引
var $td = $('td:eq(' + colIndex + ')', this);
hostip += '</span>';
hostip += '</span>';
// 取出单元格的当前内容
var currentContent = "";
for(var tmp=0;tmp<checkColsArray.length;tmp++){
var $tmpTd=$('td:eq(' + tmp + ')', this);
currentContent += $tmpTd.html()
}
// 第一次时走此分支
if ($table.data('col-content') == '') {
$table.data('col-content', currentContent);
$table.data('col-td', $td);
} else {
// 上一行与当前行内容相同
if ($table.data('col-content') == currentContent) {
// 上一行与当前行内容相同则col-rowspan累加, 保存新值
var rowspan = $table.data('col-rowspan') + 1;
$table.data('col-rowspan', rowspan);
// 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
$td.hide();
hostip = hostip +tagsBadage;
// 最后一行的情况比较特殊一点
// 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
if (++index == $table.data('trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
var onehost='<h4>'+masterBadage+hostip+'</h4>';
if(masterFlag){
masterIps += onehost;
}else{
slaveIps += onehost;
} else { // 上一行与当前行内容不同
// col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
if ($table.data('col-rowspan') != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
// 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
$table.data('col-td', $td);
$table.data('col-content', currentContent);
$table.data('col-rowspan', 1);
}
}
}
return masterIps+slaveIps;
});
}
</script>
</body>
</html>
\ No newline at end of file
... ...