diff --git a/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/Grid.html b/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/Grid.html
index 0f648f4bfe83274a1f4d90328a3bb479df8e5d5f..5fa2b9e33b3a30bb36c50bf924bee13bb0e968ab 100644
--- a/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/Grid.html
+++ b/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/Grid.html
@@ -1,8 +1,7 @@
-
<div class="repeater" data-staticheight="500px">
<div class="repeater-header">
<div class="repeater-header-left">
- <span class="repeater-title">Awesome Repeater</span>
+ <span class="repeater-title"></span>
<div class="repeater-search">
<div class="search input-group">
<input type="search" class="form-control" placeholder="Search" /> <span class="input-group-btn">
@@ -35,7 +34,6 @@
<span class="selected-label"> </span> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
- <li data-value="1"><a href="#">1</a></li>
<li data-value="5"><a href="#">5</a></li>
<li data-value="10" data-selected="true"><a href="#">10</a></li>
<li data-value="20"><a href="#">20</a></li>
diff --git a/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/Grid.js b/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/Grid.js
index cb1cc1ceb6661b0549569367e0e9ffe5b09782e0..608a64cbefd90e0f90f15a1c4cd1d0b8f3af8a56 100644
--- a/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/Grid.js
+++ b/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/Grid.js
@@ -15,22 +15,7 @@ $.extend(Grid.prototype, {
$.get("Grid.html", function(template) {
thisGrid.panel.html(template);
-
- var columnList = thisGrid.panel.find(".columnDropdown").find("ul");
- columnList.click(function(e) {
- e.stopPropagation();
- });
-
- thisGrid.columns.forEach(function(column, columnIndex) {
- var checkbox = $("<input>").attr("type", "checkbox").attr("value", column.property).attr("checked", "checked");
- checkbox.change(function() {
- thisGrid.panel.repeater('render');
- });
- var label = $("<label>").attr("role", "menuitem").addClass("checkbox").text(column.label).append(checkbox);
- var item = $("<li>").attr("role", "presentation").append(label);
- columnList.append(item);
- });
-
+ thisGrid.renderColumnDropdown();
thisGrid.panel.repeater({
defaultView : "list",
dataSource : function(options, callback) {
@@ -39,6 +24,7 @@ $.extend(Grid.prototype, {
}
},
list_selectable : false,
+ list_noItemsHTML : 'No items found',
list_rowRendered : function(helpers, callback) {
$(helpers.item).click(function() {
var rowIndex = helpers.item[0].rowIndex;
@@ -50,121 +36,166 @@ $.extend(Grid.prototype, {
});
callback();
- },
- list_noItemsHTML : 'No items found'
+ }
});
});
return thisGrid.panel;
},
- list : function(options, callback) {
+ renderColumnDropdown : function() {
var thisGrid = this;
- thisGrid.getDataList(function(dataList) {
- var result = {
- "columns" : []
- };
-
- // columns
- thisGrid.panel.find(".columnDropdown").find("input:checked").each(function(index, element) {
- thisGrid.columns.forEach(function(column) {
- var checkbox = $(element);
- if (column.property == checkbox.val()) {
- result.columns.push(column);
- }
- });
+ var columnList = thisGrid.panel.find(".columnDropdown").find("ul");
+ columnList.click(function(e) {
+ e.stopPropagation();
+ });
+
+ thisGrid.columns.forEach(function(column, columnIndex) {
+ var checkbox = $("<input>").attr("type", "checkbox").attr("value", column.property).attr("checked", "checked");
+ checkbox.change(function() {
+ thisGrid.panel.repeater('render');
});
+ var label = $("<label>").attr("role", "menuitem").addClass("checkbox").text(column.label).append(checkbox);
+ var item = $("<li>").attr("role", "presentation").append(label);
+ columnList.append(item);
+ });
+ },
+
+ getAllColumns : function() {
+ return this.columns;
+ },
- // add a dummy empty column (repeater does not properly handle
- // visibility of the last column)
- result.columns.push({
- label : null,
- property : null,
- sortable : false
+ getVisibleColumns : function() {
+ var thisGrid = this;
+ var columns = [];
+
+ thisGrid.panel.find(".columnDropdown").find("input:checked").each(function(index, element) {
+ thisGrid.getAllColumns().forEach(function(column) {
+ var checkbox = $(element);
+ if (column.property == checkbox.val()) {
+ columns.push(column);
+ }
});
+ });
- // filter
- if (options.search) {
- var filter = options.search.toLowerCase();
- dataList = dataList.filter(function(data) {
- return thisGrid.columns.some(function(column) {
- if (column.filter) {
- return column.filter(data, filter);
- } else {
- var value = "" + data[column.property];
- return value != null && value.toLowerCase().indexOf(filter) != -1;
- }
- });
- });
- }
+ // add a dummy empty column (repeater does not properly handle visibility of the last column)
+ columns.push({
+ label : null,
+ property : null,
+ sortable : false
+ });
- // sort
- if (options.sortDirection && options.sortProperty) {
- var sortColumn = null;
- thisGrid.columns.forEach(function(column) {
- if (column.property == options.sortProperty) {
- sortColumn = column;
- }
- });
- if (sortColumn) {
- var sortFunction = null;
- var sortDirection = options.sortDirection == "asc" ? 1 : -1;
+ return columns;
+ },
+
+ filterData : function(dataList, filter) {
+ var thisGrid = this;
- if (sortColumn.sort) {
- sortFunction = sortColumn.sort;
+ if (filter) {
+ filter = filter.toLowerCase();
+ dataList = dataList.filter(function(data) {
+ return thisGrid.columns.some(function(column) {
+ if (column.filter) {
+ return column.filter(data, filter);
} else {
- sortFunction = function(data1, data2) {
- var value1 = data1[sortColumn.property];
- var value2 = data2[sortColumn.property];
- return naturalSort(value1, value2);
- };
+ var value = "" + data[column.property];
+ return value != null && value.toLowerCase().indexOf(filter) != -1;
}
+ });
+ });
+ }
- dataList.sort(function(data1, data2) {
- return sortDirection * sortFunction(data1, data2);
- });
+ return dataList;
+ },
+
+ sortData : function(dataList, sortProperty, sortDirection) {
+ var thisGrid = this;
+
+ if (sortProperty && sortDirection) {
+ var sortColumn = null;
+ thisGrid.columns.forEach(function(column) {
+ if (column.property == sortProperty) {
+ sortColumn = column;
}
+ });
+ if (sortColumn) {
+ var sortFunction = null;
+ var sortDirection = sortDirection == "asc" ? 1 : -1;
+
+ if (sortColumn.sort) {
+ sortFunction = sortColumn.sort;
+ } else {
+ sortFunction = function(data1, data2) {
+ var value1 = data1[sortColumn.property];
+ var value2 = data2[sortColumn.property];
+ return naturalSort(value1, value2);
+ };
+ }
+
+ dataList.sort(function(data1, data2) {
+ return sortDirection * sortFunction(data1, data2);
+ });
}
+ }
- // page
- result.count = dataList.length;
- result.datas = [];
- result.items = [];
+ return dataList;
+ },
+
+ renderData : function(dataList) {
+ var thisGrid = this;
+ var items = [];
+
+ dataList.forEach(function(data) {
+ var item = {};
+ thisGrid.getVisibleColumns().forEach(function(column) {
+ var value = null;
+ if (column.render) {
+ value = column.render(data);
+ } else {
+ value = data[column.property];
+ }
+ item[column.property] = value;
+ });
+ items.push(item);
+ });
+ return items;
+ },
+
+ list : function(options, callback) {
+ var thisGrid = this;
+
+ thisGrid.getDataList(function(dataList) {
+
+ dataList = thisGrid.filterData(dataList, options.search);
+ dataList = thisGrid.sortData(dataList, options.sortProperty, options.sortDirection);
+
+ var result = {};
var defaultPageSize = 50;
var startIndex = options.pageIndex * (options.pageSize || defaultPageSize);
var endIndex = startIndex + (options.pageSize || defaultPageSize);
- endIndex = (endIndex <= result.count) ? endIndex : result.count;
+ endIndex = (endIndex <= result.count) ? endIndex : dataList.length;
+ result.count = dataList.length;
+ result.datas = [];
+ result.items = [];
+ result.columns = thisGrid.getVisibleColumns();
result.page = options.pageIndex;
result.pages = Math.ceil(result.count / (options.pageSize || defaultPageSize));
result.start = startIndex + 1;
result.end = endIndex;
- // render
- var items = [];
- for (var i = startIndex; i < endIndex; i++) {
- var data = dataList[i];
- var item = {};
- thisGrid.columns.forEach(function(column) {
- var value = null;
- if (column.render) {
- value = column.render(data);
- } else {
- value = data[column.property];
- }
- item[column.property] = value;
- });
- result.datas.push(data);
+ dataList = dataList.slice(startIndex, endIndex);
+ itemList = thisGrid.renderData(dataList);
+ itemList.forEach(function(item, index) {
+ result.datas.push(dataList[index]);
result.items.push(item);
- }
-
- thisGrid.result = result;
+ });
- // add some delay (repeater does not properly layout columns without
- // it)
+ // add some delay (repeater does not properly layout columns without it)
setTimeout(function() {
+ thisGrid.result = result;
callback(result);
}, 1);
});
diff --git a/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/index.html b/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/index.html
index 00cd1a377df818147bbc5f1deb08bee5f776b9b9..1d5fb1e7dcae8989376d6494d5715fd089a8217a 100644
--- a/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/index.html
+++ b/plasmid/source/core-plugins/fuelux/1/as/webapps/fuelux-widget-webapp/html/index.html
@@ -69,16 +69,16 @@
} ];
var getDataList = function(callback) {
callback([ {
- name : "John",
- surname : "Doe",
+ name : "Name A",
+ surname : "Surname 1",
age : 21
}, {
- name : "Kate",
- surname : "Smith",
+ name : "Name B",
+ surname : "Surname 2",
age : 34
}, {
- name : "Jack",
- surname : "Daniels",
+ name : "Name C",
+ surname : "Surname 10",
age : 61
} ]);
};