Skip to content

Commit 9aa3a36

Browse files
ced-bced-b
committed
Add ability to accept objects as rows
This simplifies the usage where the data returned from the server is actually an object rather than an array.
1 parent f65b4d1 commit 9aa3a36

File tree

3 files changed

+229
-20
lines changed

3 files changed

+229
-20
lines changed

‎README.md‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@ the components look more like Bootstrap.
3030

3131
## Getting Started
3232

33-
[Working sample](sample/index.html)
34-
that goes with this introduction.
33+
[Working sample](sample/index.html) that goes with this introduction.
3534

3635
### 0) Import
3736

@@ -82,6 +81,7 @@ Available options are:
8281
* `name`: The name of the column.
8382
* `type` (default: `"string"`) : The datatype of the columns. Options are: `string`, `date`, `number`
8483
and `boolean`.
84+
* `field`: This is mostly for use when in the data passed in the rows are an object rather than an array, in which case this attribute is used to lookup which value to show in which cell.
8585
* `visible` (default: `false`): Whether or not the column is visible or not. This allows for
8686
hiddend data columns, such as ID fields etc.
8787
* `filterType` (default: `list`): The type of filter to display for the column.
@@ -103,21 +103,30 @@ Available options are:
103103
You can get the data using an AJAX call (`$.getJSON()`) or generate it in your
104104
JavaScript.
105105

106-
The format expected is an Array, that contains an array for every row. The
107-
grid will map every element in the row array to the column at the same index.
106+
The table takes and array of rows. These rows can be either arrays or regular objects. In case objects are supplied the `field` attribute needs to be set on the columns, so the table knows which column to map which field to.
108107

109-
To hide items in the array, add invisible columns to the column list.
108+
When the rows are arrays the table will map the field by index to the respective column.To hide items in the array, add invisible columns to the column list.
110109

111-
Sample data:
110+
Sample data as array:
112111

113112
```javascript
114113
var myData = [
115-
[10001, "Bill Smith", new Date(1956, 3, 12), "United States", "Texas", "English"],
116-
[10002, "Michael Jones", new Date(1975, 7, 23), "United States", "Florida", "English"],
117-
[10003, "Heinz Mayer", new Date(1972, 8, 2), "Germany", "Bayern", "German"],
118-
[10004, "Mary Miller", new Date(1981, 1, 6), "United States", "California", "English"],
119-
[10005, "Jose Gonzalez", new Date(1959, 1, 6), "Mexico", null, "Spanish"],
120-
];
114+
[10001, "Bill Smith", new Date(1956, 3, 12), "United States", "Texas", "English"],
115+
[10002, "Michael Jones", new Date(1975, 7, 23), "United States", "Florida", "English"],
116+
[10003, "Heinz Mayer", new Date(1972, 8, 2), "Germany", "Bayern", "German"],
117+
[10004, "Mary Miller", new Date(1981, 1, 6), "United States", "California", "English"],
118+
[10005, "Jose Gonzalez", new Date(1959, 1, 6), "Mexico", null, "Spanish"],
119+
];
120+
```
121+
122+
Sample data as object:
123+
124+
```javascript
125+
var myData = [
126+
{id : 10001, name : "Bill Smith", birthDate : new Date(1956, 3, 12).getTime(), country : "United States", state : "Texas", note : "Test", language : "English"},
127+
{id : 10002, name : "Michael Jones", birthDate : new Date(1975, 7, 23).getTime(), country : "United States", state : "Florida", language : "English"},
128+
{id : 10003, name : "Heinz Mayer", birthDate : new Date(1972, 8, 2), country : "Germany", state : "Bayern", language : "German"},
129+
]
121130
```
122131

123132
### 4) Putting it all together

‎js/dynamic-table.jquery.js‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -622,12 +622,13 @@
622622
//If the column is visible...
623623
if (myColumns[c].visible)
624624
{
625-
var myValue = methods.private_renderValue(myData.data[r][c], myColumns[c]);
625+
var myRawValue = methods.private_getCellValue(myData.data[r], c, myColumns[c])
626+
var myValue = methods.private_renderValue(myRawValue, myColumns[c]);
626627
var myDynamicClass = "";
627628

628629
if (myColumns[c].cssClass != null) {
629630
if (typeof myColumns[c].cssClass === "function") {
630-
myDynamicClass = myColumns[c].cssClass(myColumns[c], myData.data[r][c], myValue);
631+
myDynamicClass = myColumns[c].cssClass(myColumns[c], myRawValue, myValue);
631632
}
632633
else {
633634
myDynamicClass = myColumns[c].cssClass;
@@ -686,7 +687,15 @@
686687
//Get the actual placeholder
687688
//console.log("Complete:" + ((new Date()).getTime() - myStartTime));
688689
},
689-
690+
691+
/**=================================================================================
692+
* Returns the value of the given cell, either by index access or by using the
693+
* field attribute.
694+
*================================================================================*/
695+
private_getCellValue : function(aRow, aIndex, aColumn) {
696+
return aRow[(aColumn.field || aIndex)];
697+
},
698+
690699
/**=================================================================================
691700
* OPERATION: private_renderValue
692701
*
@@ -1012,7 +1021,7 @@
10121021

10131022
for (var i = 0; i < aData.data.length; i++)
10141023
{
1015-
var myValue = aData.data[i][aColumnIndex];
1024+
var myValue = methods.private_getCellValue(aData.data[i], aColumnIndex, aColumn);
10161025

10171026
if (myValues.indexOf(myValue) == -1 && myValue != null)
10181027
{
@@ -1296,11 +1305,13 @@
12961305
*================================================================================*/
12971306
private_filterBy: function(aComponent, aColumn, aColumnIndex, aData) {
12981307

1308+
var myField = aColumn.field || aColumnIndex;
1309+
12991310
//Go through each of the active filters to see if the column has already one
13001311
//applied to it. If so remove that.
13011312
for (var i = 0; i < aData.activeFilters.length; i++)
13021313
{
1303-
if (aData.activeFilters[i].field == aColumnIndex)
1314+
if (aData.activeFilters[i].field == myField)
13041315
{
13051316
aData.activeFilters.splice(i, 1);
13061317
break;
@@ -1322,7 +1333,7 @@
13221333
if (myValue.indexOf("-show-all") == -1)
13231334
{
13241335
aData.activeFilters.push({
1325-
field: aColumnIndex,
1336+
field: myField,
13261337
includeBlanks: myIncludeBlanks,
13271338
values: myValue,
13281339
type: aColumn.filterType
@@ -1341,7 +1352,7 @@
13411352
if (myValue != null && jQuery.trim(myValue) != "")
13421353
{
13431354
aData.activeFilters.push({
1344-
field: aColumnIndex,
1355+
field: myField,
13451356
value: myValue.toLowerCase(),
13461357
type: aColumn.filterType
13471358
});
@@ -1360,7 +1371,7 @@
13601371
if (myStart != null || myEnd != null)
13611372
{
13621373
aData.activeFilters.push({
1363-
field: aColumnIndex,
1374+
field: myField,
13641375
type: aColumn.filterType,
13651376
startDate: myStart ? myStart.getTime() : methods.private_parseDate('1900-01-01').getTime(),
13661377
endDate: myEnd ? myEnd.getTime() : methods.private_parseDate('2100-01-01').getTime(),

‎sample/index2.html‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!doctype html>
2+
3+
<html>
4+
5+
<head>
6+
7+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8+
9+
<title>Sample of the Dynamic Table in Use</title>
10+
11+
<link rel="stylesheet" href="../css/dynamic-table.jquery.css"/>
12+
<link rel="stylesheet" href="../css/jquery-ui.css"/>
13+
14+
<script type="text/javascript" src="../js/jquery.js"></script>
15+
<script type="text/javascript" src="../js/jquery-ui.js"></script>
16+
<script type="text/javascript" src="../js/moment.js"></script>
17+
<script type="text/javascript" src="../js/dynamic-table.jquery.js"></script>
18+
<script type="text/javascript" src="../js/dynamic-table-editor.jquery.js"></script>
19+
20+
<script>
21+
22+
$(function() {
23+
24+
// Initialize table
25+
$("#sample-grid").dynamicTable({
26+
fillParent : false,
27+
showCounter: true
28+
});
29+
30+
// Define columns
31+
var myColumns = [{ // Hidden Identifier column
32+
name : "Identifier",
33+
type : "number",
34+
visible : false,
35+
field : "id",
36+
},{// Searchable text column
37+
name : "Name",
38+
type : "string",
39+
visible : true,
40+
filterType : "search",
41+
width : 200,
42+
field : "name",
43+
},{// Date column with date filter
44+
name : "Birth Date",
45+
type : "date",
46+
visible : true,
47+
format : "d-MMM-YYYY",
48+
filterType : "dateRange",
49+
cssClass : function (aColumn, aValue, aDisplayValue) {
50+
return aValue != null ? "has-birth-date" : null
51+
},
52+
field : "birthDate",
53+
},{// Limited values with default picklist filter
54+
name : "Country",
55+
type : "string",
56+
visible : true,
57+
field : "country",
58+
},{
59+
name : "State",
60+
type : "string",
61+
visible : true,
62+
field : "state",
63+
},{
64+
name : "Note",
65+
type : "string",
66+
visible : true,
67+
field : "note",
68+
editor : $("<div/>").dynamicTableEditor({
69+
editHandler: function(aData, aContext) {
70+
$("#save-data").html("Saving note: <strong>" + aData + "</strong>");
71+
}
72+
})
73+
},{
74+
name : "Language",
75+
type : "string",
76+
visible : true,
77+
field : "language",
78+
}];
79+
80+
81+
// Get the data. This would usually be done in an AJAS call
82+
// ($.getJSON) but for demo purposes we show hardcoded data
83+
var myData = [
84+
{id : 10001, name : "Bill Smith", birthDate : new Date(1956, 3, 12).getTime(), country : "United States", state : "Texas", note : "Test", language : "English"},
85+
{id : 10002, name : "Michael Jones", birthDate : new Date(1975, 7, 23).getTime(), country : "United States", state : "Florida", language : "English"},
86+
{id : 10003, name : "Heinz Mayer", birthDate : new Date(1972, 8, 2), country : "Germany", state : "Bayern", language : "German"},
87+
{id : 10004, name : "Mary Miller", birthDate : new Date(1981, 1, 6), country : "United States", state : "California", language : "English"},
88+
{id : 10005, name : "Jose Gonzalez", birthDate : new Date(1959, 1, 6), country : "Mexico", language : "Spanish"},
89+
{id : 10006, name : "Giovanni D'Agostini", birthDate : new Date(1875, 2, 3), country : "Italy", state : "L'Aquila", language : "Italian"},
90+
91+
{id : 10001, name : "Bill Smith", birthDate : new Date(1956, 3, 12).getTime(), country : "United States", state : "Texas", note : "Test", language : "English"},
92+
{id : 10002, name : "Michael Jones", birthDate : new Date(1975, 7, 23).getTime(), country : "United States", state : "Florida", language : "English"},
93+
{id : 10003, name : "Heinz Mayer", birthDate : new Date(1972, 8, 2), country : "Germany", state : "Bayern", language : "German"},
94+
{id : 10004, name : "Mary Miller", birthDate : new Date(1981, 1, 6), country : "United States", state : "California", language : "English"},
95+
{id : 10005, name : "Jose Gonzalez", birthDate : new Date(1959, 1, 6), country : "Mexico", language : "Spanish"},
96+
{id : 10006, name : "Giovanni D'Agostini", birthDate : new Date(1875, 2, 3), country : "Italy", state : "L'Aquila", language : "Italian"},
97+
98+
{id : 10001, name : "Bill Smith", birthDate : new Date(1956, 3, 12).getTime(), country : "United States", state : "Texas", note : "Test", language : "English"},
99+
{id : 10002, name : "Michael Jones", birthDate : new Date(1975, 7, 23).getTime(), country : "United States", state : "Florida", language : "English"},
100+
{id : 10003, name : "Heinz Mayer", birthDate : new Date(1972, 8, 2), country : "Germany", state : "Bayern", language : "German"},
101+
{id : 10004, name : "Mary Miller", birthDate : new Date(1981, 1, 6), country : "United States", state : "California", language : "English"},
102+
{id : 10005, name : "Jose Gonzalez", birthDate : new Date(1959, 1, 6), country : "Mexico", language : "Spanish"},
103+
{id : 10006, name : "Giovanni D'Agostini", birthDate : new Date(1875, 2, 3), country : "Italy", state : "L'Aquila", language : "Italian"},
104+
105+
{id : 10001, name : "Bill Smith", birthDate : new Date(1956, 3, 12).getTime(), country : "United States", state : "Texas", note : "Test", language : "English"},
106+
{id : 10002, name : "Michael Jones", birthDate : new Date(1975, 7, 23).getTime(), country : "United States", state : "Florida", language : "English"},
107+
{id : 10003, name : "Heinz Mayer", birthDate : new Date(1972, 8, 2), country : "Germany", state : "Bayern", language : "German"},
108+
{id : 10004, name : "Mary Miller", birthDate : new Date(1981, 1, 6), country : "United States", state : "California", language : "English"},
109+
{id : 10005, name : "Jose Gonzalez", birthDate : new Date(1959, 1, 6), country : "Mexico", language : "Spanish"},
110+
{id : 10006, name : "Giovanni D'Agostini", birthDate : new Date(1875, 2, 3), country : "Italy", state : "L'Aquila", language : "Italian"},
111+
112+
{id : 10001, name : "Bill Smith", birthDate : new Date(1956, 3, 12).getTime(), country : "United States", state : "Texas", note : "Test", language : "English"},
113+
{id : 10002, name : "Michael Jones", birthDate : new Date(1975, 7, 23).getTime(), country : "United States", state : "Florida", language : "English"},
114+
{id : 10003, name : "Heinz Mayer", birthDate : new Date(1972, 8, 2), country : "Germany", state : "Bayern", language : "German"},
115+
{id : 10004, name : "Mary Miller", birthDate : new Date(1981, 1, 6), country : "United States", state : "California", language : "English"},
116+
{id : 10005, name : "Jose Gonzalez", birthDate : new Date(1959, 1, 6), country : "Mexico", language : "Spanish"},
117+
{id : 10006, name : "Giovanni D'Agostini", birthDate : new Date(1875, 2, 3), country : "Italy", state : "L'Aquila", language : "Italian"},
118+
119+
{id : 10001, name : "Bill Smith", birthDate : new Date(1956, 3, 12).getTime(), country : "United States", state : "Texas", note : "Test", language : "English"},
120+
{id : 10002, name : "Michael Jones", birthDate : new Date(1975, 7, 23).getTime(), country : "United States", state : "Florida", language : "English"},
121+
{id : 10003, name : "Heinz Mayer", birthDate : new Date(1972, 8, 2), country : "Germany", state : "Bayern", language : "German"},
122+
{id : 10004, name : "Mary Miller", birthDate : new Date(1981, 1, 6), country : "United States", state : "California", language : "English"},
123+
{id : 10005, name : "Jose Gonzalez", birthDate : new Date(1959, 1, 6), country : "Mexico", language : "Spanish"},
124+
{id : 10006, name : "Giovanni D'Agostini", birthDate : new Date(1875, 2, 3), country : "Italy", state : "L'Aquila", language : "Italian"},
125+
126+
];
127+
128+
// Load the data into the grid
129+
$("#sample-grid").dynamicTable("data", myData, myColumns);
130+
131+
// Add event listeners:
132+
$("#sample-grid").on("rowSelect", function(aEvent) {
133+
$("#selected-data").html("You selected <strong>" + aEvent.row.name + "</strong>");
134+
});
135+
136+
// Add event listeners:
137+
$("#sample-grid").on("rowDoubleClick", function(aEvent) {
138+
$("#selected-data").html("You <em>double-clicked</em> <strong>" + aEvent.row.name + "</strong>");
139+
});
140+
141+
});
142+
143+
</script>
144+
145+
<style type="text/css">
146+
147+
body {
148+
font-family: sans-serif;
149+
font-size: 14px;
150+
margin: 0px;
151+
padding: 20px;
152+
background-color: #666666;
153+
}
154+
155+
#sample-grid {
156+
width: 700px;
157+
height: 500px;
158+
}
159+
160+
#selected-data,
161+
#save-data {
162+
width: 700px;
163+
background-color: #f3f3f3;
164+
padding: 5px;
165+
margin-top: 10px;
166+
border-radius: 5px;
167+
box-sizing:border-box;
168+
}
169+
170+
.has-birth-date {
171+
background-color: #96e2fe;
172+
}
173+
174+
</style>
175+
176+
</head>
177+
178+
<body>
179+
180+
<div id="sample-grid">
181+
182+
</div>
183+
184+
<div id="selected-data">&nbsp;</div>
185+
<div id="save-data">&nbsp;</div>
186+
187+
</body>
188+
189+
</html>

0 commit comments

Comments
 (0)