4:57 a.m.
From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin(a)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