[Kimchi-devel] [v2 2/3] UI: Update Grid Widget

[huoyuxin at linux.vnet.ibm.com]

From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>

Signed-off-by: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
---
 ui/css/theme-default/datagrid.css |   11 +++--------
 ui/js/widgets/grid.js             |   28 +++++++++++++++++++---------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/ui/css/theme-default/datagrid.css b/ui/css/theme-default/datagrid.css
index 583b827..14d28c3 100644
--- a/ui/css/theme-default/datagrid.css
+++ b/ui/css/theme-default/datagrid.css
@@ -21,7 +21,7 @@
 }
 
 .grid .header {
-    padding-bottom: 1px;
+    padding-bottom: 3px;
     border-bottom: solid 2px #ededed;
 }
 
@@ -39,11 +39,6 @@
     cursor: pointer;
 }
 
-.grid .header > span:first-child,
-.grid .body .row > span:first-child {
-    padding-left: 10px;
-}
-
 .grid .body .row {
     height: 46px;
     line-height: 46px;
@@ -55,9 +50,9 @@
 }
 
 .grid .body .odd {
-    background-color: #fcfcfc;
+    background-color: #ffffff;
 }
 
 .grid .body .even {
-    background-color: #ffffff;
+    background-color: #f9f9f9;
 }
diff --git a/ui/js/widgets/grid.js b/ui/js/widgets/grid.js
index 047fb78..21316fb 100644
--- a/ui/js/widgets/grid.js
+++ b/ui/js/widgets/grid.js
@@ -64,17 +64,19 @@ $.widget("kimchi.grid", {
             $('.icon-angle-down', columnCell).removeClass('icon-angle-down').addClass('icon-down-dir');
         }
         var container = $(this.element.children().get(1));
-        var keys = [], map = {};
+        var nodes = [];
         container.children().each(function(){
-            var key = $($(this).children().get(column)).attr('val');
-            keys.push(key);
-            map[key] = $(this);
+            nodes.push($(this));
         });
-        keys.sort();
-        if(!assending) keys.reverse();
+        nodes.sort(function(a, b){
+            aVal = $(a.children().get(column)).attr('val');
+            bVal = $(b.children().get(column)).attr('val');
+            return aVal.localeCompare(bVal);
+        });
+        if(!assending) nodes.reverse();
         container.empty();
-        for(var i=0;i<keys.length;i++){
-            container.append(map[keys[i]]);
+        for(var i=0;i<nodes.length;i++){
+            container.append(nodes[i]);
         }
         this._setRowBackgroud();
     },
@@ -84,7 +86,7 @@ $.widget("kimchi.grid", {
         container.children().each(function(){
             var hide = true;
             $(this).children().each(function(){
-                if($(this).attr('val').toLowerCase().indexOf(keyword)!=-1){
+                if($(this).attr('val')&&$(this).attr('val').toLowerCase().indexOf(keyword)!=-1){
                     hide = false;
                     return false;
                 }
@@ -93,6 +95,14 @@ $.widget("kimchi.grid", {
         });
         this._setRowBackgroud();
     },
+    addRow: function(rowNode){
+        $(rowNode).addClass('row');
+        this._setRowBackgroud();
+    },
+    deleteRow: function(rowNode){
+        $(rowNode).remove();
+        this._setRowBackgroud();
+    },
     _destroy: function() {
         this.element.removeClass('grid');
         var head = $(this.element.children().get(0));
-- 
1.7.1