Skip to content

Commit

Permalink
Merge pull request #1 from Kolossi/jsirontable2d
Browse files Browse the repository at this point in the history 
- Added 2d table support thanks to Kolossi commit

Now the table can also create its rows and columns from the data itself.
  • Loading branch information
@yannisraft
yannisraft committed Feb 27, 2021
2 parents 5dc7bae + 0315e18 commit deccbbe
Show file tree
Hide file tree
Showing 3 changed files with 237 additions and 39 deletions.
20 changes: 19 additions & 1 deletion example/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h3><img src="img/logo.png" width="48" height="48" style="margin-right: 20px;"/>
</div>
<div class="row">
<div class="col">
<div class="jsirontable">
<div id="jsirontable">
</div>
</div>
</div>
Expand All @@ -29,6 +29,24 @@ <h3><img src="img/logo.png" width="48" height="48" style="margin-right: 20px;"/>
&nbsp;
</p>

<div class="container">
<div class="row pt-4 pb-4">
<div class="col">
<h3><img src="img/logo.png" width="48" height="48" style="margin-right: 20px;"/>JSIrontable2D Example</h3>
</div>
</div>
<div class="row">
<div class="col">
<div id="jsirontable2">
</div>
</div>
</div>
</div>

<p>
&nbsp;
</p>

<p class="textblock">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
Expand Down
42 changes: 40 additions & 2 deletions example/example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ var options = {
]
};

var irontable = $('.jsirontable').JSIronTable(options);
var irontable = $('#jsirontable').JSIronTable(options);
irontable.OnInitialized(function()
{

Expand Down Expand Up @@ -98,4 +98,42 @@ function ClickActionBtn(data)
$(row.element).addClass("disabled");

irontable.RemoveRow(row);
}
}

var options2d = {
data: songs,
nodatatext: "No Entries here",
nodata_datafields: [{key: "data-translate", value: "{{lang.main.title}}"}],
scrollable: true,
fitHeight: true,
fixedheader: true,
sortable: false,
draggableColumns: false,
headerfontsize: "8pt",
cellfontsize: "8pt",
rowPerUniqueValue: {
datafield: "bpm",
sortCompare: function (a,b) { return b-a; } // numeric reverse sort
},
columns: [
{
title: "BPM",
datafield: "bpm",
visible: true,
},
{
fromUniqueValues: {
datafield: "artist",
sortCompare: function(a,b) { return a.localeCompare(b);} // alpha sort
},
view: function ( data ) {
return 1;
},
combineValues: function ( dataList ) {
return dataList.length
}
}
]
};

var irontable2 = $('#jsirontable2').JSIronTable(options2d);
214 changes: 178 additions & 36 deletions src/jsirontable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
this.cols = [];
this.headercells = [];
this.columnfields = [];
this.columns = [];
this.initialHeight = 0;

// Create Elements
Expand All @@ -95,21 +96,26 @@
}
}

if(self._generateheader && self.Validate(options.columns))
if(self.Validate(options.columns))
{
if($(self.element).find('.jsit_heading').length !== 0)
{
$(self.element).find('.jsit_heading').remove();
}

self.heading = $('<div class="jsit_heading"></div>');
self.element.prepend(self.heading);

if(self.Validate(options.fixedheader))
self.options.columns = self.ExpandDynamicColumns(options);

if(self._generateheader)
{
if(options.fixedheader)
if($(self.element).find('.jsit_heading').length !== 0)
{
$(self.heading).addClass("jsit_fixedheader");
$(self.element).find('.jsit_heading').remove();
}

self.heading = $('<div class="jsit_heading"></div>');
self.element.prepend(self.heading);

if(self.Validate(options.fixedheader))
{
if(options.fixedheader)
{
$(self.heading).addClass("jsit_fixedheader");
}
}
}
}
Expand Down Expand Up @@ -208,6 +214,61 @@
}
},

ExpandDynamicColumns: function(options)
{
var columns = []
if (!this.Validate(options.columns)) return columns;

for(var j=0; j < this.options.columns.length; j++)
{
var col = options.columns[j];
if (!this.Validate(col)) continue;

if (!this.Validate(col.fromUniqueValues))
{
columns.push(col);
continue;
}

if (!this.Validate(options.data))
{
var newcol = Object.assign({},col);
newcol.datafield = newcol.fromUniqueValues.datafield;
delete newcol.fromUniqueValues;
columns.push(newcol);
continue;
}

var collookup = {};
var colorder = [];

for(var d=0; d < this.options.data.length; d++)
{
var item = options.data[d];
var val = item[col.fromUniqueValues.datafield]
if (val in collookup) continue;
var newcol = Object.assign({},col);
newcol.datafield = newcol.fromUniqueValues.datafield;
newcol.dataValue = val;
newcol.title = val;
delete newcol.fromUniqueValues;
collookup[val]=newcol;
colorder.push(val);
}

if (this.Validate(col.fromUniqueValues.sortCompare))
{
colorder.sort(col.fromUniqueValues.sortCompare)
}

newcolumns=colorder.map(function(key) { return collookup[key];});

columns=columns.concat(newcolumns);
}

return columns;
},

Validate: function(variable)
{
var result = false;
Expand Down Expand Up @@ -421,7 +482,12 @@
});
}

var cell = $('<div id="hd_'+column.key+'" class="jsit_head'+hiddenclass+' jsit_noselect"'+addstyle+'></div>');
var divId = 'hd_'+column.key;
if (self.Validate(col.dataValue))
{
divId += '_'+self.EncodeForHtmlId(col.dataValue);
}
var cell = $('<div id="'+divId+'" class="jsit_head'+hiddenclass+' jsit_noselect"'+addstyle+'></div>');
$(cell).html(span);
row.append(cell);

Expand Down Expand Up @@ -458,6 +524,12 @@
// ---
// End Create Header

EncodeForHtmlId: function(sourceValue)
{
// thanks: https://stackoverflow.com/a/43693571/2738122
return encodeURIComponent(sourceValue).toLowerCase().replace(/\.|%[0-9a-z]{2}/gi, '');
},

CreateData: function()
{
this.rows = [];
Expand All @@ -470,7 +542,35 @@
{
if(this.options.data.length > 0)
{
for(var k=0; k < this.options.data.length; k++)
var data;
if (self.Validate(this.options.rowPerUniqueValue) && self.Validate(this.options.rowPerUniqueValue.datafield))
{
var datalookup = {};
var dataorder = [];

for(var d=0; d < this.options.data.length; d++)
{
var item = options.data[d];
var val = item[this.options.rowPerUniqueValue.datafield]
if (val in datalookup) continue;
var items = this.options.data.filter(o => o[this.options.rowPerUniqueValue.datafield]===val);
datalookup[val]=items;
dataorder.push(val);
}

if (self.Validate(this.options.rowPerUniqueValue.sortCompare))
{
dataorder.sort(this.options.rowPerUniqueValue.sortCompare)
}

data=dataorder.map(function(key) { return datalookup[key];});
}
else
{
data = this.options.data;
}

for(var k=0; k < data.length; k++)
{
var rowclass = "odd";
if((k+1) % 2 == 0) rowclass = "even";
Expand All @@ -480,8 +580,9 @@

for(var g=0; g < this.options.columns.length; g++)
{
var col = this.options.columns[g];
var found_column_data = false;
var mainkey = this.options.columns[g].datafield;
var mainkey = col.datafield;

var hiddenclass = " jsit_hiddencol";
if(this.columnfields.length > 0)
Expand All @@ -497,46 +598,87 @@
}

var addstyle = "";
if(self.Validate(this.options.columns[g].width))
if(self.Validate(col.width))
{
var w = this.options.columns[g].width;
var w = col.width;
if(w.includes("px"))
{
addstyle = ' style="width: '+this.options.columns[g].width+'; flex: none;"';
addstyle = ' style="width: '+col.width+'; flex: none;"';
} else if(w.includes("%"))
{
addstyle = ' style="width: '+this.options.columns[g].width+'; flex: none;"';
addstyle = ' style="width: '+col.width+'; flex: none;"';
}
}

for (var key in this.options.data[k])
/// %%%% cope with array of data items in here

var celldata;
if (self.Validate(this.options.rowPerUniqueValue) && self.Validate(this.options.rowPerUniqueValue.datafield))
{
var cellvalue = this.options.data[k][key];
if(this.options.columns[g].datafield === key)
if (col.datafield === this.options.rowPerUniqueValue.datafield)
{
found_column_data = true;
if(self.Validate(this.options.columns[g].view))
celldata = [data[k][0]];
}
else
{
celldata = data[k];
}
}
else
{
celldata = [data[k]];
}

var cellvalues = [];
for(var c=0; c < celldata.length; c++)
{
var celldataitem = celldata[c];
var itemvalue;
for (var key in celldataitem)
{
itemvalue = celldataitem[key];
if(col.datafield === key
&& (!self.Validate(col.dataValue) || itemvalue === col.dataValue))
{
cellvalue = this.options.columns[g].view(this.options.data[k], row_element);
found_column_data = true;
if(self.Validate(col.view))
{
itemvalue = col.view(celldataitem, row_element);
}
cellvalues.push(itemvalue);
break;
}

var cell = $('<div class="jsit_cell'+hiddenclass+'"'+addstyle+'><span style="font-size: '+this.options.cellfontsize+'">'+cellvalue+'</span></div>');
row_element.append(cell);

break;
}
}
/// %%%% end of cope with array

var cellstyle = '';
var cellvalue;

if(!found_column_data)
if(found_column_data)
{
var cell = $('<div class="jsit_cell'+hiddenclass+'"'+addstyle+'><span>&nbsp;</span></div>');
row_element.append(cell);
cellstyle = ' style="font-size: '+this.options.cellfontsize+'"';
if (self.Validate(col.combineValues))
{
cellvalue = col.combineValues(cellvalues);
}
else
{
cellvalue = cellvalues.join();
}
}
else
{
cellvalue = "&nbsp;";
}
}

row_element.data("values", this.options.data[k]);
var cell = $('<div class="jsit_cell'+hiddenclass+'"'+addstyle+'><span'+cellstyle+'>'+cellvalue+'</span></div>');

row_element.append(cell);
}
row_element.data("values", celldata);

this.rows.push({element: row_element, data: this.options.data[k]});
this.rows.push({element: row_element, data: celldata});
}

if(this._generateheader)
Expand Down

0 comments on commit deccbbe

Please sign in to comment.