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