* datagrid support showMessage and show loading state.

src/js/datagrid.js

@@ -6,7 +6,7 @@
  * ======================================================================== */
 
 
-(function($) {
+(function($, undefined) {
     'use strict';
 
     var get2DArrValue = function(arr, rowIndex, colIndex) {
@@ -498,14 +498,21 @@
             autoCloseTime = 5000;
         }
         if (!$messager.length) {
-            $messager = $('<div class="datagrid-messager" style="display: none"></div>').appendTo(that.$container);
+            $messager = $('<div class="datagrid-messager" style="display: none"><div class="content"></div><button type="button" class="close">×</button></div>').appendTo(that.$container).on('click', '.close', function() {
+                $messager.slideUp();
+                if (that.msgerAutoCloseTimer) {
+                    clearTimeout(that.msgerAutoCloseTimer);
+                    that.msgerAutoCloseTimer = null;
+                }
+            });
         }
-        $messager.attr('class', 'datagrid-messager bg-' + type).text(message).slideDown();
+        $messager.attr('class', 'datagrid-messager bg-' + type).find('.content').text(message);
+        $messager.slideDown();
         if (autoCloseTime) {
             that.msgerAutoCloseTimer = setTimeout(function() {
                 $messager.slideUp();
                 that.msgerAutoCloseTimer = null;
-            });
+            }, autoCloseTime);
         }
     };
 
@@ -517,7 +524,7 @@
         var $loading = that.$container.find('.datagrid-loading');
         if (loading) {
             if (!$loading.length) {
-                $loading = $('<div class="datagrid-loading" style="display: none"><i class="icon icon-spin icon-spinner"></i><div className="datagrid-loading-message"></div></div>').appendTo(that.$container);
+                $loading = $('<div class="datagrid-loading" style="display: none"><div class="content"><i class="icon icon-spin icon-spinner icon-2x"></i><div className="datagrid-loading-message"></div></div></div>').appendTo(that.$container);
             }
             $loading.find('.datagrid-loading-message').text((typeof loading === 'string') ? loading : '');
             $loading.fadeIn();
@@ -747,18 +754,6 @@
         return cell;
     };
 
-    // DataGrid.prototype.getCellBounds = function(rowIndex, colIndex) {
-    //     var layout = this.layout;
-    //     var colLayout = layout.cols[colIndex];
-    //     var rowLayout = this.getRowLayout(rowIndex);
-    //     return {
-    //         left: colLayout.left,
-    //         width: colLayout.width,
-    //         top: rowLayout.top,
-    //         height: rowLayout.height
-    //     };
-    // };
-
     DataGrid.prototype.getRowConfig = function(rowIndex) {
         var that = this;
         var rowId = 'R' + rowIndex;
@@ -1311,5 +1306,5 @@
     $(function() {
         $('[data-ride="datagrid"]').datagrid();
     });
-}(jQuery));
+}(jQuery, undefined));
 

src/less/views/datagrid.less

@@ -14,6 +14,8 @@
 @hover-cell-zIndex: 40;
 @fixed-row-hover-cell-zIndex: 42;
 @scrollbar-zIndex: 50;
+@dagagrid-messager-zIndex: 60;
+@dagagrid-loading-zIndex: 61;
 
 
 // Basic style
@@ -186,3 +188,52 @@
     min-height: 20px;
   }
 }
+
+.datagrid-messager {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: @dagagrid-messager-zIndex;
+  padding: 5px 10px;
+  text-align: center;
+
+  > .close {
+    position: absolute;
+    display: block;
+    top: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    line-height: 20px;
+    padding-bottom: 5px;
+
+    &:hover {
+      background-color: rgba(0,0,0,.1);
+    }
+  }
+}
+
+.datagrid-loading {
+  position: absolute;
+  z-index: @dagagrid-loading-zIndex;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255,255,255,.6);
+
+  > .content {
+    display: block;
+    height: 50px;
+    text-align: center;
+    position: relative;
+    top: 50%;
+    margin-top: -25px;
+
+    > .icon {
+      color: @color-primary;
+    }
+  }
+}