Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add 2d table support #1

Merged
merged 1 commit into from Feb 27, 2021
Merged

add 2d table support #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 19 additions & 1 deletion example/example.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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