mysq监控

+(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);

@@ -26,6 +26,8 @@
             type="text/javascript"></script>
             type="text/javascript"></script>
     <script src="<%=basePath%>js/jquery-1.12.0.min.js" charset="UTF-8"
     <script src="<%=basePath%>js/jquery-1.12.0.min.js" charset="UTF-8"
             type="text/javascript"></script>
             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"
     <script src="<%=basePath%>js/jquery-ui.custom.js" charset="UTF-8"
             type="text/javascript"></script>
             type="text/javascript"></script>
     <script src="<%=basePath%>/js/bootstrap.min.js"></script>
     <script src="<%=basePath%>/js/bootstrap.min.js"></script>
@@ -80,11 +82,11 @@
 
 
     <div class="container-fluid">
     <div class="container-fluid">
         <div class="widget-box">
         <div class="widget-box">
-            <div class="widget-title" style="height: 35px;">
+            <%--<div class="widget-title" style="height: 35px;">
                 <div>
                 <div>
 
 
                 </div>
                 </div>
-            </div>
+            </div>--%>
             <div class="widget-content">
             <div class="widget-content">
                 <div id="mysqlTable" style="overflow-y: auto; overflow-x: hidden; max-height: 800px"></div>
                 <div id="mysqlTable" style="overflow-y: auto; overflow-x: hidden; max-height: 800px"></div>
             </div>
             </div>
@@ -113,13 +115,9 @@
             loadFilter : function(data) {
             loadFilter : function(data) {
                 return defaultLoadFilter(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:{
             /* queryParams:{
                  "eventName":"测试一下而已"
                  "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(){
     function getColumns(){
         var columns = [
         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",
                 align:"left",
                 alignColumn:"center",
                 alignColumn:"center",
                 formatter : function(value, rowData, rowIndex) {
                 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;
             return;
         }
         }
 
 
         var masterIps="";
         var masterIps="";
         var slaveIps="";
         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>
 </script>
 </body>
 </body>
 </html>
 </html>