[Kimchi-devel] [PATCH] UI: 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 |   45 ++++++++++++++++++
 ui/js/widgets/grid.js             |   93 +++++++++++++++++++++++++++++++++++++
 2 files changed, 138 insertions(+), 0 deletions(-)
 create mode 100644 ui/css/theme-default/datagrid.css
 create mode 100644 ui/js/widgets/grid.js

diff --git a/ui/css/theme-default/datagrid.css b/ui/css/theme-default/datagrid.css
new file mode 100644
index 0000000..635c818
--- /dev/null
+++ b/ui/css/theme-default/datagrid.css
@@ -0,0 +1,45 @@
+.grid span {
+    display: inline-block;
+}
+
+.grid .header {
+    padding-bottom: 1px;
+    border-bottom: solid 2px #ededed;
+}
+
+.grid .header span span {
+    vertical-align: middle;
+}
+
+.grid .header .sort-up {
+    margin-bottom: -9px;
+    cursor: pointer;
+}
+
+.grid .header .sort-down {
+    margin-top: -9px;
+    cursor: pointer;
+}
+
+.grid .header > span:first-child,
+.grid .body .row > span:first-child {
+    padding-left: 10px;
+}
+
+.grid .body .row {
+    height: 46px;
+    line-height: 46px;
+    border-bottom: solid 1px #ededed;
+}
+
+.grid .body .row[disabled] {
+    color: #999999;
+}
+
+.grid .body .odd {
+    background-color: #fcfcfc;
+}
+
+.grid .body .even {
+    background-color: #ffffff;
+}
diff --git a/ui/js/widgets/grid.js b/ui/js/widgets/grid.js
new file mode 100644
index 0000000..565caed
--- /dev/null
+++ b/ui/js/widgets/grid.js
@@ -0,0 +1,93 @@
+$(function(){
+$.widget("kimchi.grid", {
+    options: {
+        enableSorting: true
+    },
+    _create: function() {
+        var that = this;
+        this.element.addClass('grid');
+        var head = $(this.element.children().get(0));
+        var body = $(this.element.children().get(1));
+        head.addClass('header c1 bold grey');
+        if(this.options.enableSorting){
+            head.children().each(function(){
+                var addSorting = "<span>"+$(this).html()+"</span>";
+                addSorting += "<span><div class='icon-angle-up sort-up'></div><div class='icon-angle-down sort-down'></div></span>";
+                $(this).empty().append(addSorting);
+            });
+        }
+        $('.icon-angle-up', head).click(function(){
+            that.sort(head.children().index($(this).parent().parent()), true);
+        });
+        $('.icon-angle-down', head).click(function(){
+            that.sort(head.children().index($(this).parent().parent()), false);
+        });
+        body.addClass('body c1 normal dark-grey');
+        body.children().addClass('row');
+        this._setRowBackgroud();
+    },
+    _setRowBackgroud: function(){
+        var i=0, classes=['odd', 'even'];
+        $(this.element.children().get(1)).children().each(function(){
+            $(this).removeClass('odd');
+            $(this).removeClass('even');
+            $(this).addClass(classes[i]);
+            i = i==0?1:0;
+        });
+    },
+    sort: function(column, assending) {
+        var head = $(this.element.children().get(0));
+        $('.icon-up-dir', head).removeClass('icon-up-dir').addClass('icon-angle-up');
+        $('.icon-down-dir', head).removeClass('icon-down-dir').addClass('icon-angle-down');
+        var columnCell = $(head.children().get(column));
+        if(assending){
+            $('.icon-angle-up', columnCell).removeClass('icon-angle-up').addClass('icon-up-dir');
+        }else{
+            $('.icon-angle-down', columnCell).removeClass('icon-angle-down').addClass('icon-down-dir');
+        }
+        var container = $(this.element.children().get(1));
+        var keys = [], map = {};
+        container.children().each(function(){
+            var key = $($(this).children().get(column)).attr('val');
+            keys.push(key);
+            map[key] = $(this);
+        });
+        keys.sort();
+        if(!assending) keys.reverse();
+        container.empty();
+        for(var i=0;i<keys.length;i++){
+            container.append(map[keys[i]]);
+        }
+        this._setRowBackgroud();
+    },
+    filter: function(keyword) {
+        keyword = keyword.toLowerCase();
+        var container = $(this.element.children().get(1));
+        container.children().each(function(){
+            var hide = true;
+            $(this).children().each(function(){
+                if($(this).attr('val').toLowerCase().indexOf(keyword)!=-1){
+                    hide = false;
+                    return false;
+                }
+            });
+            $(this).css('display', hide?'none':'');
+        });
+        this._setRowBackgroud();
+    },
+    _destroy: function() {
+        this.element.removeClass('grid');
+        var head = $(this.element.children().get(0));
+        var body = $(this.element.children().get(1));
+        head.removeClass('header c1 bold grey');
+        if(this.options.enableSorting){
+            head.children().each(function(){
+                var oriContent = $($(this).children().get(0)).html()
+                $(this).empty().append(oriContent);
+            });
+        }
+        body.removeClass('body c1 normal dark-grey');
+        body.children().removeClass('row odd even');
+    }
+});
+});
-- 
1.7.1