deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-23 08:42:18 +02:00
Code Issues Releases Wiki Activity

Added grid layout module

Browse source
This commit is contained in:
Max Guglielmi 2014-11-23 01:01:29 +11:00
parent 5a72404bd6
commit cd6a57cd3f
12 changed files with 1139 additions and 379 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Gruntfile.js
View file

@ -112,7 +112,7 @@ module.exports = function (grunt) {
sourceMap: true, sourceMap: true,
modules: 'amd' modules: 'amd'
}, },
build:{ build: {
files: [{ files: [{
expand: true, expand: true,
cwd: 'src-es6', cwd: 'src-es6',

2
dist/filtergrid.css vendored
View file

@ -1,6 +1,6 @@
/*------------------------------------------------------------------------ /*------------------------------------------------------------------------
- TableFilter stylesheet by Max Guglielmi - TableFilter stylesheet by Max Guglielmi
- (build date: Sat Nov 22 2014 16:50:14) - (build date: Sun Nov 23 2014 00:56:49)
- Edit below for your projects' needs - Edit below for your projects' needs
------------------------------------------------------------------------*/ ------------------------------------------------------------------------*/

374
src-es6/modules/gridLayout.js Normal file
View file

@ -0,0 +1,374 @@
import {Dom} from '../dom';
import {Types} from '../types';
import {Helpers} from '../helpers';
import {Event} from '../event';
export class GridLayout{
constructor(tf) {
var f = tf.fObj;
//defines grid width
this.gridWidth = f.grid_width || null;
//defines grid height
this.gridHeight = f.grid_height || null;
//defines css class for main container
this.gridMainContCssClass = f.grid_cont_css_class || 'grd_Cont';
//defines css class for div containing table
this.gridContCssClass = f.grid_tbl_cont_css_class || 'grd_tblCont';
//defines css class for div containing headers' table
this.gridHeadContCssClass = f.grid_tblHead_cont_css_class ||
'grd_headTblCont';
//defines css class for div containing rows counter, paging etc.
this.gridInfDivCssClass = f.grid_inf_grid_css_class || 'grd_inf';
//defines which row contains column headers
this.gridHeadRowIndex = f.grid_headers_row_index || 0;
//array of headers row indexes to be placed in header table
this.gridHeadRows = f.grid_headers_rows || [0];
//generate filters in table headers
this.gridEnableFilters = f.grid_enable_default_filters!==undefined ?
f.grid_enable_default_filters : true;
//default col width
this.gridDefaultColWidth = f.grid_default_col_width || '100px';
//enables/disables columns resizer
this.gridEnableColResizer = f.grid_enable_cols_resizer!==undefined ?
f.grid_enable_cols_resizer : true;
//defines col resizer script path
this.gridColResizerPath = f.grid_cont_col_resizer_path ||
this.basePath+'TFExt_ColsResizer/TFExt_ColsResizer.js';
this.tf = tf;
}
init(){
var tf = this.tf;
var f = tf.fObj;
var tbl = tf.tbl;
tf.isExternalFlt = true;
// in case column widths are not set default width 100px
if(!tf.hasColWidth){
tf.colWidth = [];
for(var k=0; k<tf.nbCells; k++){
var colW,
cell = tbl.rows[this.gridHeadRowIndex].cells[k];
if(cell.width!==''){
colW = cell.width;
} else if(cell.style.width!==''){
colW = parseInt(cell.style.width, 10);
} else {
colW = this.gridDefaultColWidth;
}
tf.colWidth[k] = colW;
}
tf.hasColWidth = true;
}
tf.SetColWidths(this.gridHeadRowIndex);
var tblW;//initial table width
if(tbl.width!==''){
tblW = tbl.width;
}
else if(tbl.style.width!==''){
tblW = parseInt(tbl.style.width, 10);
} else {
tblW = tbl.clientWidth;
}
//Main container: it will contain all the elements
this.tblMainCont = Dom.create('div',['id', tf.prfxMainTblCont + tf.id]);
this.tblMainCont.className = this.gridMainContCssClass;
if(this.gridWidth){
this.tblMainCont.style.width = this.gridWidth;
}
tbl.parentNode.insertBefore(this.tblMainCont, tf.tbl);
//Table container: div wrapping content table
this.tblCont = Dom.create('div',['id', tf.prfxTblCont + tf.id]);
this.tblCont.className = this.gridContCssClass;
if(this.gridWidth){
this.tblCont.style.width = this.gridWidth;
}
if(this.gridHeight){
this.tblCont.style.height = this.gridHeight;
}
tbl.parentNode.insertBefore(this.tblCont, tf.tbl);
var t = tbl.parentNode.removeChild(tf.tbl);
this.tblCont.appendChild(t);
//In case table width is expressed in %
if(tbl.style.width === ''){
tbl.style.width = (tf.__containsStr('%', tblW) ?
tbl.clientWidth : tblW) + 'px';
}
var d = this.tblCont.parentNode.removeChild(this.tblCont);
this.tblMainCont.appendChild(d);
//Headers table container: div wrapping headers table
this.headTblCont = Dom.create(
'div',['id', tf.prfxHeadTblCont + tf.id]);
this.headTblCont.className = this.gridHeadContCssClass;
if(this.gridWidth){
this.headTblCont.style.width = this.gridWidth;
}
//Headers table
this.headTbl = Dom.create('table', ['id', tf.prfxHeadTbl + tf.id]);
var tH = Dom.create('tHead'); //IE<7 needs it
//1st row should be headers row, ids are added if not set
//Those ids are used by the sort feature
var hRow = tbl.rows[this.gridHeadRowIndex];
var sortTriggers = [];
for(var n=0; n<tf.nbCells; n++){
var c = hRow.cells[n];
var thId = c.getAttribute('id');
if(!thId || thId===''){
thId = tf.prfxGridTh+n+'_'+tf.id;
c.setAttribute('id', thId);
}
sortTriggers.push(thId);
}
//Filters row is created
var filtersRow = Dom.create('tr');
if(this.gridEnableFilters && tf.fltGrid){
tf.externalFltTgtIds = [];
for(var j=0; j<tf.nbCells; j++){
var fltTdId = tf.prfxFlt+j+ tf.prfxGridFltTd +tf.id;
var cl = Dom.create(tf.fltCellTag, ['id', fltTdId]);
filtersRow.appendChild(cl);
tf.externalFltTgtIds[j] = fltTdId;
}
}
//Headers row are moved from content table to headers table
for(var i=0; i<this.gridHeadRows.length; i++){
var headRow = tbl.rows[this.gridHeadRows[0]];
tH.appendChild(headRow);
}
this.headTbl.appendChild(tH);
if(tf.filtersRowIndex === 0){
tH.insertBefore(filtersRow,hRow);
} else {
tH.appendChild(filtersRow);
}
this.headTblCont.appendChild(this.headTbl);
this.tblCont.parentNode.insertBefore(this.headTblCont, this.tblCont);
//THead needs to be removed in content table for sort feature
var thead = Dom.tag(tf.tbl, 'thead');
if(thead.length>0){
tbl.removeChild(thead[0]);
}
//Headers table style
this.headTbl.style.width = tbl.style.width;
this.headTbl.style.tableLayout = 'fixed';
tbl.style.tableLayout = 'fixed';
this.headTbl.cellPadding = tbl.cellPadding;
this.headTbl.cellSpacing = tbl.cellSpacing;
//Headers container width
this.headTblCont.style.width = this.tblCont.clientWidth+'px';
//content table without headers needs col widths to be reset
tf.SetColWidths();
tbl.style.width = '';
if(Helpers.isIE()){
this.headTbl.style.width = '';
}
//scroll synchronisation
var o = this; //TF object
Event.add(this.tblCont, 'scroll', function(){
o.headTblCont.scrollLeft = this.scrollLeft;
var _o = this; //this = scroll element
//New pointerX calc taking into account scrollLeft
if(!o.isPointerXOverwritten){
try{
o.Evt.pointerX = function(e){
e = e || global.event;
var scrollLeft = tf_StandardBody().scrollLeft +
_o.scrollLeft;
return (e.pageX + _o.scrollLeft) ||
(e.clientX + scrollLeft);
};
o.isPointerXOverwritten = true;
} catch(err) {
o.isPointerXOverwritten = false;
}
}
});
//Sort is enabled if not specified in config object
if(f.sort !== false){
tf.sort = true;
tf.sortConfig.asyncSort = true;
tf.sortConfig.triggerIds = sortTriggers;
}
if(this.gridEnableColResizer){
if(!tf.hasExtensions){
tf.extensions = {
name:['ColumnsResizer_'+tf.id],
src:[this.gridColResizerPath],
description:['Columns Resizing'],
initialize:[function(o){
o.SetColsResizer('ColumnsResizer_'+o.id);}]
};
tf.hasExtensions = true;
} else {
if(!tf.__containsStr(
'colsresizer',
Str.lower(tf.extensions.src.toString())) ){
tf.extensions.name.push('ColumnsResizer_'+tf.id);
tf.extensions.src.push(tf.gridColResizerPath);
tf.extensions.description.push('Columns Resizing');
tf.extensions.initialize.push(function(o){
o.SetColsResizer('ColumnsResizer_'+o.id);});
}
}
}
//Default columns resizer properties for grid layout
f.col_resizer_cols_headers_table = this.headTbl.getAttribute('id');
f.col_resizer_cols_headers_index = this.gridHeadRowIndex;
f.col_resizer_width_adjustment = 0;
f.col_enable_text_ellipsis = false;
//Cols generation for all browsers excepted IE<=7
o.tblHasColTag = Dom.tag(tbl, 'col').length > 0 ? true : false;
if(!Helpers.isIE()){
//Col elements are enough to keep column widths after sorting and
//filtering
var createColTags = function(o){
if(!o){
return;
}
for(var k=(o.nbCells-1); k>=0; k--){
var col = Dom.create( 'col', ['id', o.id+'_col_'+k]);
tbl.firstChild.parentNode.insertBefore(col, tbl.firstChild);
col.style.width = o.colWidth[k];
o.gridColElms[k] = col;
}
o.tblHasColTag = true;
};
if(!o.tblHasColTag){
createColTags(o);
} else {
var cols = Dom.tag(tbl,'col');
for(var ii=0; ii<o.nbCells; ii++){
cols[ii].setAttribute('id', o.id+'_col_'+ii);
cols[ii].style.width = o.colWidth[ii];
o.gridColElms.push(cols[ii]);
}
}
}
//IE <= 7 needs an additional row for widths as col element width is
//not enough...
if(Helpers.isIE()){
var tbody = Dom.tag(tbl,'tbody'),
r;
if( tbody.length>0 ){
r = tbody[0].insertRow(0);
} else{
r = tbl.insertRow(0);
}
r.style.height = '0px';
for(var x=0; x<o.nbCells; x++){
var col = Dom.create('td', ['id', o.id+'_col_'+x]);
col.style.width = o.colWidth[x];
tbl.rows[1].cells[x].style.width = '';
r.appendChild(col);
o.gridColElms.push(col);
}
this.hasGridWidthsRow = true;
//Data table row with widths expressed
o.leadColWidthsRow = tbl.rows[0];
o.leadColWidthsRow.setAttribute('validRow', 'false');
var beforeSortFn = Types.isFn(f.on_before_sort) ?
f.on_before_sort : null;
f.on_before_sort = function(o, colIndex){
o.leadColWidthsRow.setAttribute('validRow', 'false');
if(beforeSortFn){
beforeSortFn.call(null, o, colIndex);
}
};
var afterSortFn = Types.isFn(f.on_after_sort) ?
f.on_after_sort : null;
f.on_after_sort = function(o,colIndex){
if(o.leadColWidthsRow.rowIndex !== 0){
var r = o.leadColWidthsRow;
if(tbody.length>0){
tbody[0].moveRow(o.leadColWidthsRow.rowIndex, 0);
} else {
tbl.moveRow(o.leadColWidthsRow.rowIndex, 0);
}
}
if(afterSortFn){
afterSortFn.call(null, o, colIndex);
}
};
}
var afterColResizedFn = Types.isFn(f.on_after_col_resized) ?
f.on_after_col_resized : null;
f.on_after_col_resized = function(o,colIndex){
if(!colIndex){
return;
}
var w = o.crWColsRow.cells[colIndex].style.width;
var col = o.gridColElms[colIndex];
col.style.width = w;
var thCW = o.crWColsRow.cells[colIndex].clientWidth;
var tdCW = o.crWRowDataTbl.cells[colIndex].clientWidth;
if(Helpers.isIE()){
tbl.style.width = o.headTbl.clientWidth+'px';
}
if(thCW != tdCW && !Helpers.isIE()){
o.headTbl.style.width = tbl.clientWidth+'px';
}
if(afterColResizedFn){
afterColResizedFn.call(null,o,colIndex);
}
};
if(tbl.clientWidth !== this.headTbl.clientWidth){
tbl.style.width = this.headTbl.clientWidth+'px';
}
tf.refRow = Helpers.isIE() ? (tf.refRow+1) : 0;
}
destroy(){
var tf = this.tf;
var tbl = tf.tbl;
if(!tf.gridLayout){
return;
}
var t = tbl.parentNode.removeChild(tbl);
this.tblMainCont.parentNode.insertBefore(t, this.tblMainCont);
this.tblMainCont.parentNode.removeChild(this.tblMainCont);
this.tblMainCont = null;
this.headTblCont = null;
this.headTbl = null;
this.tblCont = null;
tbl.outerHTML = tf.sourceTblHtml;
tbl = Dom.id(tf.id); //needed to keep reference
}
}

3
src-es6/modules/loader.js
View file

@ -39,8 +39,7 @@ export class Loader{
containerDiv.className = this.loaderCssClass; containerDiv.className = this.loaderCssClass;
var targetEl = !this.loaderTgtId ? var targetEl = !this.loaderTgtId ?
(tf.gridLayout ? tf.tblCont : tf.tbl.parentNode) : tf.tbl.parentNode : Dom.id(this.loaderTgtId);
Dom.id(this.loaderTgtId);
if(!this.loaderTgtId){ if(!this.loaderTgtId){
targetEl.insertBefore(containerDiv, tf.tbl); targetEl.insertBefore(containerDiv, tf.tbl);
} else { } else {

749
src/core.js
View file

@ -677,7 +677,8 @@ function TableFilter(id) {
loader: null, loader: null,
alternateRows: null, alternateRows: null,
colOps: null, colOps: null,
rowsCounter: null rowsCounter: null,
GridLayout: null
}; };
/*** TF events ***/ /*** TF events ***/
@ -835,7 +836,7 @@ function TableFilter(id) {
/*==================================================== /*====================================================
- onchange event for select filters - onchange event for select filters
=====================================================*/ =====================================================*/
_OnSlcChange: function(e) {console.log(o, o.activeFlt); _OnSlcChange: function(e) {
if(!o.activeFlt){ return; } if(!o.activeFlt){ return; }
var colIndex = o.activeFlt.getAttribute('colIndex'); var colIndex = o.activeFlt.getAttribute('colIndex');
//Checks filter is a checklist and caller is not null //Checks filter is a checklist and caller is not null
@ -948,10 +949,13 @@ TableFilter.prototype = {
if(this.hasThemes){ this._LoadThemes(); } if(this.hasThemes){ this._LoadThemes(); }
if(this.gridLayout){ if(this.gridLayout){
this.isExternalFlt = true; // this.isExternalFlt = true;
this.SetGridLayout(); //this.SetGridLayout();
//Once grid generated 1st filterable row is 0 again //Once grid generated 1st filterable row is 0 again
this.refRow = hlp.isIE() ? (this.refRow+1) : 0; //this.refRow = hlp.isIE() ? (this.refRow+1) : 0;
var GridLayout = require('modules/gridLayout').GridLayout;
this.Cpt.gridLayout = new GridLayout(this);
this.Cpt.gridLayout.init();
} }
if(this.loader){ if(this.loader){
@ -1370,55 +1374,55 @@ TableFilter.prototype = {
this.IncludeFile(module.name, module.path, module.init); this.IncludeFile(module.name, module.path, module.init);
}, },
// LoadExtensions : function(){ LoadExtensions : function(){
// if(!this.Ext){ if(!this.Ext){
// /*** TF extensions ***/ /*** TF extensions ***/
// var o = this; var o = this;
// this.Ext = { this.Ext = {
// list: {}, list: {},
// add: function(extName, extDesc, extPath, extCallBack){ add: function(extName, extDesc, extPath, extCallBack){
// var file = extPath.split('/')[extPath.split('/').length-1], var file = extPath.split('/')[extPath.split('/').length-1],
// re = new RegExp(file), re = new RegExp(file),
// path = extPath.replace(re,''); path = extPath.replace(re,'');
// o.Ext.list[extName] = { o.Ext.list[extName] = {
// name: extName, name: extName,
// description: extDesc, description: extDesc,
// file: file, file: file,
// path: path, path: path,
// callback: extCallBack callback: extCallBack
// }; };
// } }
// }; };
// } }
// this.EvtManager(this.Evt.name.loadextensions); this.EvtManager(this.Evt.name.loadextensions);
// }, },
/*==================================================== /*====================================================
- loads TF extensions - loads TF extensions
=====================================================*/ =====================================================*/
// _LoadExtensions : function(){ _LoadExtensions : function(){
// if(!this.hasExtensions || !types.isArray(this.extensions.name) || if(!this.hasExtensions || !types.isArray(this.extensions.name) ||
// !types.isArray(this.extensions.src)){ !types.isArray(this.extensions.src)){
// return; return;
// } }
// var ext = this.extensions; var ext = this.extensions;
// for(var e=0; e<ext.name.length; e++){ for(var e=0; e<ext.name.length; e++){
// var extPath = ext.src[e], var extPath = ext.src[e],
// extName = ext.name[e], extName = ext.name[e],
// extInit = (ext.initialize && ext.initialize[e]) ? extInit = (ext.initialize && ext.initialize[e]) ?
// ext.initialize[e] : null, ext.initialize[e] : null,
// extDesc = (ext.description && ext.description[e] ) ? extDesc = (ext.description && ext.description[e] ) ?
// ext.description[e] : null; ext.description[e] : null;
// //Registers extension //Registers extension
// this.Ext.add(extName, extDesc, extPath, extInit); this.Ext.add(extName, extDesc, extPath, extInit);
// if(isImported(extPath)){ if(isImported(extPath)){
// extInit.call(null,this); extInit.call(null,this);
// } else { } else {
// this.IncludeFile(extName, extPath, extInit); this.IncludeFile(extName, extPath, extInit);
// } }
// } }
// }, },
LoadThemes: function(){ LoadThemes: function(){
this.EvtManager(this.Evt.name.loadthemes); this.EvtManager(this.Evt.name.loadthemes);
@ -1587,7 +1591,8 @@ TableFilter.prototype = {
this.tbl.deleteRow(this.filtersRowIndex); this.tbl.deleteRow(this.filtersRowIndex);
} }
if(this.gridLayout){ if(this.gridLayout){
this.RemoveGridLayout(); // this.RemoveGridLayout();
this.Cpt.gridLayout.destroy();
} }
dom.removeClass(this.tbl, this.prfxTf); dom.removeClass(this.tbl, this.prfxTf);
this.activeFlt = null; this.activeFlt = null;
@ -1620,7 +1625,7 @@ TableFilter.prototype = {
// } // }
//grid-layout //grid-layout
else if(this.gridLayout){ else if(this.gridLayout){
this.tblMainCont.appendChild(infdiv); this.Cpt.gridLayout.tblMainCont.appendChild(infdiv);
infdiv.className = this.gridInfDivCssClass; infdiv.className = this.gridInfDivCssClass;
} }
//default location: just above the table //default location: just above the table
@ -3835,364 +3840,364 @@ TableFilter.prototype = {
/*==================================================== /*====================================================
- generates a grid with fixed headers - generates a grid with fixed headers
=====================================================*/ =====================================================*/
SetGridLayout: function(){ // SetGridLayout: function(){
if(!this.gridLayout){ // if(!this.gridLayout){
return; // return;
} // }
var f = this.fObj; // var f = this.fObj;
//defines grid width // //defines grid width
this.gridWidth = f.grid_width || null; // this.gridWidth = f.grid_width || null;
//defines grid height // //defines grid height
this.gridHeight = f.grid_height || null; // this.gridHeight = f.grid_height || null;
//defines css class for main container // //defines css class for main container
this.gridMainContCssClass = f.grid_cont_css_class || 'grd_Cont'; // this.gridMainContCssClass = f.grid_cont_css_class || 'grd_Cont';
//defines css class for div containing table // //defines css class for div containing table
this.gridContCssClass = f.grid_tbl_cont_css_class || 'grd_tblCont'; // this.gridContCssClass = f.grid_tbl_cont_css_class || 'grd_tblCont';
//defines css class for div containing headers' table // //defines css class for div containing headers' table
this.gridHeadContCssClass = f.grid_tblHead_cont_css_class || // this.gridHeadContCssClass = f.grid_tblHead_cont_css_class ||
'grd_headTblCont'; // 'grd_headTblCont';
//defines css class for div containing rows counter, paging etc. // //defines css class for div containing rows counter, paging etc.
this.gridInfDivCssClass = f.grid_inf_grid_css_class || 'grd_inf'; // this.gridInfDivCssClass = f.grid_inf_grid_css_class || 'grd_inf';
//defines which row contains column headers // //defines which row contains column headers
this.gridHeadRowIndex = f.grid_headers_row_index || 0; // this.gridHeadRowIndex = f.grid_headers_row_index || 0;
//array of headers row indexes to be placed in header table // //array of headers row indexes to be placed in header table
this.gridHeadRows = f.grid_headers_rows || [0]; // this.gridHeadRows = f.grid_headers_rows || [0];
//generate filters in table headers // //generate filters in table headers
this.gridEnableFilters = f.grid_enable_default_filters!==undefined ? // this.gridEnableFilters = f.grid_enable_default_filters!==undefined ?
f.grid_enable_default_filters : true; // f.grid_enable_default_filters : true;
//default col width // //default col width
this.gridDefaultColWidth = f.grid_default_col_width || '100px'; // this.gridDefaultColWidth = f.grid_default_col_width || '100px';
//enables/disables columns resizer // //enables/disables columns resizer
this.gridEnableColResizer = f.grid_enable_cols_resizer!==undefined ? // this.gridEnableColResizer = f.grid_enable_cols_resizer!==undefined ?
f.grid_enable_cols_resizer : true; // f.grid_enable_cols_resizer : true;
//defines col resizer script path // //defines col resizer script path
this.gridColResizerPath = f.grid_cont_col_resizer_path || // this.gridColResizerPath = f.grid_cont_col_resizer_path ||
this.basePath+'TFExt_ColsResizer/TFExt_ColsResizer.js'; // this.basePath+'TFExt_ColsResizer/TFExt_ColsResizer.js';
// in case column widths are not set default width 100px // // in case column widths are not set default width 100px
if(!this.hasColWidth){ // if(!this.hasColWidth){
this.colWidth = []; // this.colWidth = [];
for(var k=0; k<this.nbCells; k++){ // for(var k=0; k<this.nbCells; k++){
var colW, // var colW,
cell = this.tbl.rows[this.gridHeadRowIndex].cells[k]; // cell = this.tbl.rows[this.gridHeadRowIndex].cells[k];
if(cell.width!==''){ // if(cell.width!==''){
colW = cell.width; // colW = cell.width;
} else if(cell.style.width!==''){ // } else if(cell.style.width!==''){
colW = parseInt(cell.style.width, 10); // colW = parseInt(cell.style.width, 10);
} else { // } else {
colW = this.gridDefaultColWidth; // colW = this.gridDefaultColWidth;
} // }
this.colWidth[k] = colW; // this.colWidth[k] = colW;
} // }
this.hasColWidth = true; // this.hasColWidth = true;
} // }
this.SetColWidths(this.gridHeadRowIndex); // this.SetColWidths(this.gridHeadRowIndex);
var tblW;//initial table width // var tblW;//initial table width
if(this.tbl.width!==''){ // if(this.tbl.width!==''){
tblW = this.tbl.width; // tblW = this.tbl.width;
} // }
else if(this.tbl.style.width!==''){ // else if(this.tbl.style.width!==''){
tblW = parseInt(this.tbl.style.width, 10); // tblW = parseInt(this.tbl.style.width, 10);
} else { // } else {
tblW = this.tbl.clientWidth; // tblW = this.tbl.clientWidth;
} // }
//Main container: it will contain all the elements // //Main container: it will contain all the elements
this.tblMainCont = dom.create( // this.tblMainCont = dom.create(
'div',['id', this.prfxMainTblCont + this.id]); // 'div',['id', this.prfxMainTblCont + this.id]);
this.tblMainCont.className = this.gridMainContCssClass; // this.tblMainCont.className = this.gridMainContCssClass;
if(this.gridWidth){ // if(this.gridWidth){
this.tblMainCont.style.width = this.gridWidth; // this.tblMainCont.style.width = this.gridWidth;
} // }
this.tbl.parentNode.insertBefore(this.tblMainCont, this.tbl); // this.tbl.parentNode.insertBefore(this.tblMainCont, this.tbl);
//Table container: div wrapping content table // //Table container: div wrapping content table
this.tblCont = dom.create('div',['id', this.prfxTblCont + this.id]); // this.tblCont = dom.create('div',['id', this.prfxTblCont + this.id]);
this.tblCont.className = this.gridContCssClass; // this.tblCont.className = this.gridContCssClass;
if(this.gridWidth){ // if(this.gridWidth){
this.tblCont.style.width = this.gridWidth; // this.tblCont.style.width = this.gridWidth;
} // }
if(this.gridHeight){ // if(this.gridHeight){
this.tblCont.style.height = this.gridHeight; // this.tblCont.style.height = this.gridHeight;
} // }
this.tbl.parentNode.insertBefore(this.tblCont, this.tbl); // this.tbl.parentNode.insertBefore(this.tblCont, this.tbl);
var t = this.tbl.parentNode.removeChild(this.tbl); // var t = this.tbl.parentNode.removeChild(this.tbl);
this.tblCont.appendChild(t); // this.tblCont.appendChild(t);
//In case table width is expressed in % // //In case table width is expressed in %
if(this.tbl.style.width === ''){ // if(this.tbl.style.width === ''){
this.tbl.style.width = (this.__containsStr('%', tblW) ? // this.tbl.style.width = (this.__containsStr('%', tblW) ?
this.tbl.clientWidth : tblW) + 'px'; // this.tbl.clientWidth : tblW) + 'px';
} // }
var d = this.tblCont.parentNode.removeChild(this.tblCont); // var d = this.tblCont.parentNode.removeChild(this.tblCont);
this.tblMainCont.appendChild(d); // this.tblMainCont.appendChild(d);
//Headers table container: div wrapping headers table // //Headers table container: div wrapping headers table
this.headTblCont = dom.create( // this.headTblCont = dom.create(
'div',['id', this.prfxHeadTblCont + this.id]); // 'div',['id', this.prfxHeadTblCont + this.id]);
this.headTblCont.className = this.gridHeadContCssClass; // this.headTblCont.className = this.gridHeadContCssClass;
if(this.gridWidth){ // if(this.gridWidth){
this.headTblCont.style.width = this.gridWidth; // this.headTblCont.style.width = this.gridWidth;
} // }
//Headers table // //Headers table
this.headTbl = dom.create('table',['id', this.prfxHeadTbl + this.id]); // this.headTbl = dom.create('table',['id', this.prfxHeadTbl + this.id]);
var tH = dom.create('tHead'); //IE<7 needs it // var tH = dom.create('tHead'); //IE<7 needs it
//1st row should be headers row, ids are added if not set // //1st row should be headers row, ids are added if not set
//Those ids are used by the sort feature // //Those ids are used by the sort feature
var hRow = this.tbl.rows[this.gridHeadRowIndex]; // var hRow = this.tbl.rows[this.gridHeadRowIndex];
var sortTriggers = []; // var sortTriggers = [];
for(var n=0; n<this.nbCells; n++){ // for(var n=0; n<this.nbCells; n++){
var c = hRow.cells[n]; // var c = hRow.cells[n];
var thId = c.getAttribute('id'); // var thId = c.getAttribute('id');
if(!thId || thId===''){ // if(!thId || thId===''){
thId = this.prfxGridTh+n+'_'+this.id; // thId = this.prfxGridTh+n+'_'+this.id;
c.setAttribute('id', thId); // c.setAttribute('id', thId);
} // }
sortTriggers.push(thId); // sortTriggers.push(thId);
} // }
//Filters row is created // //Filters row is created
var filtersRow = dom.create('tr'); // var filtersRow = dom.create('tr');
if(this.gridEnableFilters && this.fltGrid){ // if(this.gridEnableFilters && this.fltGrid){
this.externalFltTgtIds = []; // this.externalFltTgtIds = [];
for(var j=0; j<this.nbCells; j++){ // for(var j=0; j<this.nbCells; j++){
var fltTdId = this.prfxFlt+j+ this.prfxGridFltTd +this.id; // var fltTdId = this.prfxFlt+j+ this.prfxGridFltTd +this.id;
var cl = dom.create(this.fltCellTag, ['id', fltTdId]); // var cl = dom.create(this.fltCellTag, ['id', fltTdId]);
filtersRow.appendChild(cl); // filtersRow.appendChild(cl);
this.externalFltTgtIds[j] = fltTdId; // this.externalFltTgtIds[j] = fltTdId;
} // }
} // }
//Headers row are moved from content table to headers table // //Headers row are moved from content table to headers table
for(var i=0; i<this.gridHeadRows.length; i++){ // for(var i=0; i<this.gridHeadRows.length; i++){
var headRow = this.tbl.rows[this.gridHeadRows[0]]; // var headRow = this.tbl.rows[this.gridHeadRows[0]];
tH.appendChild(headRow); // tH.appendChild(headRow);
} // }
this.headTbl.appendChild(tH); // this.headTbl.appendChild(tH);
if(this.filtersRowIndex === 0){ // if(this.filtersRowIndex === 0){
tH.insertBefore(filtersRow,hRow); // tH.insertBefore(filtersRow,hRow);
} else { // } else {
tH.appendChild(filtersRow); // tH.appendChild(filtersRow);
} // }
this.headTblCont.appendChild(this.headTbl); // this.headTblCont.appendChild(this.headTbl);
this.tblCont.parentNode.insertBefore(this.headTblCont, this.tblCont); // this.tblCont.parentNode.insertBefore(this.headTblCont, this.tblCont);
//THead needs to be removed in content table for sort feature // //THead needs to be removed in content table for sort feature
var thead = dom.tag(this.tbl,'thead'); // var thead = dom.tag(this.tbl,'thead');
if(thead.length>0){ // if(thead.length>0){
this.tbl.removeChild(thead[0]); // this.tbl.removeChild(thead[0]);
} // }
//Headers table style // //Headers table style
this.headTbl.style.width = this.tbl.style.width; // this.headTbl.style.width = this.tbl.style.width;
this.headTbl.style.tableLayout = 'fixed'; // this.headTbl.style.tableLayout = 'fixed';
this.tbl.style.tableLayout = 'fixed'; // this.tbl.style.tableLayout = 'fixed';
this.headTbl.cellPadding = this.tbl.cellPadding; // this.headTbl.cellPadding = this.tbl.cellPadding;
this.headTbl.cellSpacing = this.tbl.cellSpacing; // this.headTbl.cellSpacing = this.tbl.cellSpacing;
//Headers container width // //Headers container width
this.headTblCont.style.width = this.tblCont.clientWidth+'px'; // this.headTblCont.style.width = this.tblCont.clientWidth+'px';
//content table without headers needs col widths to be reset // //content table without headers needs col widths to be reset
this.SetColWidths(); // this.SetColWidths();
this.tbl.style.width = ''; // this.tbl.style.width = '';
if(hlp.isIE()){ // if(hlp.isIE()){
this.headTbl.style.width = ''; // this.headTbl.style.width = '';
} // }
//scroll synchronisation // //scroll synchronisation
var o = this; //TF object // var o = this; //TF object
this.tblCont.onscroll = function(){ // this.tblCont.onscroll = function(){
o.headTblCont.scrollLeft = this.scrollLeft; // o.headTblCont.scrollLeft = this.scrollLeft;
var _o = this; //this = scroll element // var _o = this; //this = scroll element
//New pointerX calc taking into account scrollLeft // //New pointerX calc taking into account scrollLeft
if(!o.isPointerXOverwritten){ // if(!o.isPointerXOverwritten){
try{ // try{
o.Evt.pointerX = function(e){ // o.Evt.pointerX = function(e){
e = e || global.event; // e = e || global.event;
var scrollLeft = tf_StandardBody().scrollLeft + // var scrollLeft = tf_StandardBody().scrollLeft +
_o.scrollLeft; // _o.scrollLeft;
return (e.pageX + _o.scrollLeft) || // return (e.pageX + _o.scrollLeft) ||
(e.clientX + scrollLeft); // (e.clientX + scrollLeft);
}; // };
o.isPointerXOverwritten = true; // o.isPointerXOverwritten = true;
} catch(err) { // } catch(err) {
o.isPointerXOverwritten = false; // o.isPointerXOverwritten = false;
} // }
} // }
}; // };
//Sort is enabled if not specified in config object // //Sort is enabled if not specified in config object
if(f.sort !== false){ // if(f.sort !== false){
this.sort = true; // this.sort = true;
this.sortConfig.asyncSort = true; // this.sortConfig.asyncSort = true;
this.sortConfig.triggerIds = sortTriggers; // this.sortConfig.triggerIds = sortTriggers;
} // }
if(this.gridEnableColResizer){ // if(this.gridEnableColResizer){
if(!this.hasExtensions){ // if(!this.hasExtensions){
this.extensions = { // this.extensions = {
name:['ColumnsResizer_'+this.id], // name:['ColumnsResizer_'+this.id],
src:[this.gridColResizerPath], // src:[this.gridColResizerPath],
description:['Columns Resizing'], // description:['Columns Resizing'],
initialize:[function(o){ // initialize:[function(o){
o.SetColsResizer('ColumnsResizer_'+o.id);}] // o.SetColsResizer('ColumnsResizer_'+o.id);}]
}; // };
this.hasExtensions = true; // this.hasExtensions = true;
} else { // } else {
if(!this.__containsStr( // if(!this.__containsStr(
'colsresizer', // 'colsresizer',
str.lower(this.extensions.src.toString())) ){ // str.lower(this.extensions.src.toString())) ){
this.extensions.name.push('ColumnsResizer_'+this.id); // this.extensions.name.push('ColumnsResizer_'+this.id);
this.extensions.src.push(this.gridColResizerPath); // this.extensions.src.push(this.gridColResizerPath);
this.extensions.description.push('Columns Resizing'); // this.extensions.description.push('Columns Resizing');
this.extensions.initialize.push(function(o){ // this.extensions.initialize.push(function(o){
o.SetColsResizer('ColumnsResizer_'+o.id);}); // o.SetColsResizer('ColumnsResizer_'+o.id);});
} // }
} // }
} // }
//Default columns resizer properties for grid layout // //Default columns resizer properties for grid layout
f.col_resizer_cols_headers_table = this.headTbl.getAttribute('id'); // f.col_resizer_cols_headers_table = this.headTbl.getAttribute('id');
f.col_resizer_cols_headers_index = this.gridHeadRowIndex; // f.col_resizer_cols_headers_index = this.gridHeadRowIndex;
f.col_resizer_width_adjustment = 0; // f.col_resizer_width_adjustment = 0;
f.col_enable_text_ellipsis = false; // f.col_enable_text_ellipsis = false;
//Cols generation for all browsers excepted IE<=7 // //Cols generation for all browsers excepted IE<=7
o.tblHasColTag = dom.tag(o.tbl,'col').length > 0 ? true : false; // o.tblHasColTag = dom.tag(o.tbl,'col').length > 0 ? true : false;
if(!hlp.isIE()){ // if(!hlp.isIE()){
//Col elements are enough to keep column widths after sorting and // //Col elements are enough to keep column widths after sorting and
//filtering // //filtering
var createColTags = function(o){ // var createColTags = function(o){
if(!o){ // if(!o){
return; // return;
} // }
for(var k=(o.nbCells-1); k>=0; k--){ // for(var k=(o.nbCells-1); k>=0; k--){
var col = dom.create( 'col', ['id', o.id+'_col_'+k]); // var col = dom.create( 'col', ['id', o.id+'_col_'+k]);
o.tbl.firstChild.parentNode.insertBefore( // o.tbl.firstChild.parentNode.insertBefore(
col,o.tbl.firstChild); // col,o.tbl.firstChild);
col.style.width = o.colWidth[k]; // col.style.width = o.colWidth[k];
o.gridColElms[k] = col; // o.gridColElms[k] = col;
} // }
o.tblHasColTag = true; // o.tblHasColTag = true;
}; // };
if(!o.tblHasColTag){ // if(!o.tblHasColTag){
createColTags(o); // createColTags(o);
} else { // } else {
var cols = dom.tag(o.tbl,'col'); // var cols = dom.tag(o.tbl,'col');
for(var ii=0; ii<o.nbCells; ii++){ // for(var ii=0; ii<o.nbCells; ii++){
cols[ii].setAttribute('id', o.id+'_col_'+ii); // cols[ii].setAttribute('id', o.id+'_col_'+ii);
cols[ii].style.width = o.colWidth[ii]; // cols[ii].style.width = o.colWidth[ii];
o.gridColElms.push(cols[ii]); // o.gridColElms.push(cols[ii]);
} // }
} // }
} // }
//IE <= 7 needs an additional row for widths as col element width is // //IE <= 7 needs an additional row for widths as col element width is
//not enough... // //not enough...
if(hlp.isIE()){ // if(hlp.isIE()){
var tbody = dom.tag(o.tbl,'tbody'), // var tbody = dom.tag(o.tbl,'tbody'),
r; // r;
if( tbody.length>0 ){ // if( tbody.length>0 ){
r = tbody[0].insertRow(0); // r = tbody[0].insertRow(0);
} else{ // } else{
r = o.tbl.insertRow(0); // r = o.tbl.insertRow(0);
} // }
r.style.height = '0px'; // r.style.height = '0px';
for(var x=0; x<o.nbCells; x++){ // for(var x=0; x<o.nbCells; x++){
var col = dom.create('td', ['id', o.id+'_col_'+x]); // var col = dom.create('td', ['id', o.id+'_col_'+x]);
col.style.width = o.colWidth[x]; // col.style.width = o.colWidth[x];
o.tbl.rows[1].cells[x].style.width = ''; // o.tbl.rows[1].cells[x].style.width = '';
r.appendChild(col); // r.appendChild(col);
o.gridColElms.push(col); // o.gridColElms.push(col);
} // }
this.hasGridWidthsRow = true; // this.hasGridWidthsRow = true;
//Data table row with widths expressed // //Data table row with widths expressed
o.leadColWidthsRow = o.tbl.rows[0]; // o.leadColWidthsRow = o.tbl.rows[0];
o.leadColWidthsRow.setAttribute('validRow','false'); // o.leadColWidthsRow.setAttribute('validRow','false');
var beforeSortFn = types.isFn(f.on_before_sort) ? // var beforeSortFn = types.isFn(f.on_before_sort) ?
f.on_before_sort : null; // f.on_before_sort : null;
f.on_before_sort = function(o,colIndex){ // f.on_before_sort = function(o,colIndex){
o.leadColWidthsRow.setAttribute('validRow','false'); // o.leadColWidthsRow.setAttribute('validRow','false');
if(beforeSortFn){ // if(beforeSortFn){
beforeSortFn.call(null,o,colIndex); // beforeSortFn.call(null,o,colIndex);
} // }
}; // };
var afterSortFn = types.isFn(f.on_after_sort) ? // var afterSortFn = types.isFn(f.on_after_sort) ?
f.on_after_sort : null; // f.on_after_sort : null;
f.on_after_sort = function(o,colIndex){ // f.on_after_sort = function(o,colIndex){
if(o.leadColWidthsRow.rowIndex !== 0){ // if(o.leadColWidthsRow.rowIndex !== 0){
var r = o.leadColWidthsRow; // var r = o.leadColWidthsRow;
if(tbody.length>0){ // if(tbody.length>0){
tbody[0].moveRow(o.leadColWidthsRow.rowIndex, 0); // tbody[0].moveRow(o.leadColWidthsRow.rowIndex, 0);
} else { // } else {
o.tbl.moveRow(o.leadColWidthsRow.rowIndex, 0); // o.tbl.moveRow(o.leadColWidthsRow.rowIndex, 0);
} // }
} // }
if(afterSortFn){ // if(afterSortFn){
afterSortFn.call(null,o,colIndex); // afterSortFn.call(null,o,colIndex);
} // }
}; // };
} // }
var afterColResizedFn = types.isFn(f.on_after_col_resized) ? // var afterColResizedFn = types.isFn(f.on_after_col_resized) ?
f.on_after_col_resized : null; // f.on_after_col_resized : null;
f.on_after_col_resized = function(o,colIndex){ // f.on_after_col_resized = function(o,colIndex){
if(!colIndex){ // if(!colIndex){
return; // return;
} // }
var w = o.crWColsRow.cells[colIndex].style.width; // var w = o.crWColsRow.cells[colIndex].style.width;
var col = o.gridColElms[colIndex]; // var col = o.gridColElms[colIndex];
col.style.width = w; // col.style.width = w;
var thCW = o.crWColsRow.cells[colIndex].clientWidth; // var thCW = o.crWColsRow.cells[colIndex].clientWidth;
var tdCW = o.crWRowDataTbl.cells[colIndex].clientWidth; // var tdCW = o.crWRowDataTbl.cells[colIndex].clientWidth;
if(hlp.isIE()){ // if(hlp.isIE()){
o.tbl.style.width = o.headTbl.clientWidth+'px'; // o.tbl.style.width = o.headTbl.clientWidth+'px';
} // }
if(thCW != tdCW && !hlp.isIE()){ // if(thCW != tdCW && !hlp.isIE()){
o.headTbl.style.width = o.tbl.clientWidth+'px'; // o.headTbl.style.width = o.tbl.clientWidth+'px';
} // }
if(afterColResizedFn){ // if(afterColResizedFn){
afterColResizedFn.call(null,o,colIndex); // afterColResizedFn.call(null,o,colIndex);
} // }
}; // };
if(this.tbl.clientWidth !== this.headTbl.clientWidth){ // if(this.tbl.clientWidth !== this.headTbl.clientWidth){
this.tbl.style.width = this.headTbl.clientWidth+'px'; // this.tbl.style.width = this.headTbl.clientWidth+'px';
} // }
}, // },
/*==================================================== /*====================================================
- removes the grid layout - removes the grid layout
=====================================================*/ =====================================================*/
RemoveGridLayout: function(){ // RemoveGridLayout: function(){
if(!this.gridLayout){ // if(!this.gridLayout){
return; // return;
} // }
var t = this.tbl.parentNode.removeChild(this.tbl); // var t = this.tbl.parentNode.removeChild(this.tbl);
this.tblMainCont.parentNode.insertBefore(t, this.tblMainCont); // this.tblMainCont.parentNode.insertBefore(t, this.tblMainCont);
this.tblMainCont.parentNode.removeChild( this.tblMainCont ); // this.tblMainCont.parentNode.removeChild( this.tblMainCont );
this.tblMainCont = null; // this.tblMainCont = null;
this.headTblCont = null; // this.headTblCont = null;
this.headTbl = null; // this.headTbl = null;
this.tblCont = null; // this.tblCont = null;
this.tbl.outerHTML = this.sourceTblHtml; // this.tbl.outerHTML = this.sourceTblHtml;
this.tbl = dom.id(this.id); //needed to keep reference // this.tbl = dom.id(this.id); //needed to keep reference
}, // },
/*==================================================== /*====================================================
- generates popup filters div - generates popup filters div

5
src/index.html
View file

@ -73,6 +73,7 @@
col_0: 'select', col_0: 'select',
col_3: 'checklist', col_3: 'checklist',
base_path: './', base_path: './',
loader: false,
rows_counter: true, rows_counter: true,
enable_default_theme: true, enable_default_theme: true,
paging: false, paging: false,
@ -81,7 +82,9 @@
match_case: false, match_case: false,
remember_grid_values: true, remember_grid_values: true,
btn_reset: true, btn_reset: true,
grid_layout: false grid_layout: true,
grid_width: '500px',
grid_height: '200px'
}); });
tf.init(); tf.init();

378
src/modules/gridLayout.js Normal file
View file

@ -0,0 +1,378 @@
define(["exports", "../dom", "../types", "../helpers", "../event"], function (exports, _dom, _types, _helpers, _event) {
"use strict";
var _classProps = function (child, staticProps, instanceProps) {
if (staticProps) Object.defineProperties(child, staticProps);
if (instanceProps) Object.defineProperties(child.prototype, instanceProps);
};
var Dom = _dom.Dom;
var Types = _types.Types;
var Helpers = _helpers.Helpers;
var Event = _event.Event;
var GridLayout = (function () {
var GridLayout = function GridLayout(tf) {
var f = tf.fObj;
//defines grid width
this.gridWidth = f.grid_width || null;
//defines grid height
this.gridHeight = f.grid_height || null;
//defines css class for main container
this.gridMainContCssClass = f.grid_cont_css_class || "grd_Cont";
//defines css class for div containing table
this.gridContCssClass = f.grid_tbl_cont_css_class || "grd_tblCont";
//defines css class for div containing headers' table
this.gridHeadContCssClass = f.grid_tblHead_cont_css_class || "grd_headTblCont";
//defines css class for div containing rows counter, paging etc.
this.gridInfDivCssClass = f.grid_inf_grid_css_class || "grd_inf";
//defines which row contains column headers
this.gridHeadRowIndex = f.grid_headers_row_index || 0;
//array of headers row indexes to be placed in header table
this.gridHeadRows = f.grid_headers_rows || [0];
//generate filters in table headers
this.gridEnableFilters = f.grid_enable_default_filters !== undefined ? f.grid_enable_default_filters : true;
//default col width
this.gridDefaultColWidth = f.grid_default_col_width || "100px";
//enables/disables columns resizer
this.gridEnableColResizer = f.grid_enable_cols_resizer !== undefined ? f.grid_enable_cols_resizer : true;
//defines col resizer script path
this.gridColResizerPath = f.grid_cont_col_resizer_path || this.basePath + "TFExt_ColsResizer/TFExt_ColsResizer.js";
this.tf = tf;
};
_classProps(GridLayout, null, {
init: {
writable: true,
value: function () {
var tf = this.tf;
var f = tf.fObj;
var tbl = tf.tbl;
tf.isExternalFlt = true;
// in case column widths are not set default width 100px
if (!tf.hasColWidth) {
tf.colWidth = [];
for (var k = 0; k < tf.nbCells; k++) {
var colW, cell = tbl.rows[this.gridHeadRowIndex].cells[k];
if (cell.width !== "") {
colW = cell.width;
} else if (cell.style.width !== "") {
colW = parseInt(cell.style.width, 10);
} else {
colW = this.gridDefaultColWidth;
}
tf.colWidth[k] = colW;
}
tf.hasColWidth = true;
}
tf.SetColWidths(this.gridHeadRowIndex);
var tblW; //initial table width
if (tbl.width !== "") {
tblW = tbl.width;
} else if (tbl.style.width !== "") {
tblW = parseInt(tbl.style.width, 10);
} else {
tblW = tbl.clientWidth;
}
//Main container: it will contain all the elements
this.tblMainCont = Dom.create("div", ["id", tf.prfxMainTblCont + tf.id]);
this.tblMainCont.className = this.gridMainContCssClass;
if (this.gridWidth) {
this.tblMainCont.style.width = this.gridWidth;
}
tbl.parentNode.insertBefore(this.tblMainCont, tf.tbl);
//Table container: div wrapping content table
this.tblCont = Dom.create("div", ["id", tf.prfxTblCont + tf.id]);
this.tblCont.className = this.gridContCssClass;
if (this.gridWidth) {
this.tblCont.style.width = this.gridWidth;
}
if (this.gridHeight) {
this.tblCont.style.height = this.gridHeight;
}
tbl.parentNode.insertBefore(this.tblCont, tf.tbl);
var t = tbl.parentNode.removeChild(tf.tbl);
this.tblCont.appendChild(t);
//In case table width is expressed in %
if (tbl.style.width === "") {
tbl.style.width = (tf.__containsStr("%", tblW) ? tbl.clientWidth : tblW) + "px";
}
var d = this.tblCont.parentNode.removeChild(this.tblCont);
this.tblMainCont.appendChild(d);
//Headers table container: div wrapping headers table
this.headTblCont = Dom.create("div", ["id", tf.prfxHeadTblCont + tf.id]);
this.headTblCont.className = this.gridHeadContCssClass;
if (this.gridWidth) {
this.headTblCont.style.width = this.gridWidth;
}
//Headers table
this.headTbl = Dom.create("table", ["id", tf.prfxHeadTbl + tf.id]);
var tH = Dom.create("tHead"); //IE<7 needs it
//1st row should be headers row, ids are added if not set
//Those ids are used by the sort feature
var hRow = tbl.rows[this.gridHeadRowIndex];
var sortTriggers = [];
for (var n = 0; n < tf.nbCells; n++) {
var c = hRow.cells[n];
var thId = c.getAttribute("id");
if (!thId || thId === "") {
thId = tf.prfxGridTh + n + "_" + tf.id;
c.setAttribute("id", thId);
}
sortTriggers.push(thId);
}
//Filters row is created
var filtersRow = Dom.create("tr");
if (this.gridEnableFilters && tf.fltGrid) {
tf.externalFltTgtIds = [];
for (var j = 0; j < tf.nbCells; j++) {
var fltTdId = tf.prfxFlt + j + tf.prfxGridFltTd + tf.id;
var cl = Dom.create(tf.fltCellTag, ["id", fltTdId]);
filtersRow.appendChild(cl);
tf.externalFltTgtIds[j] = fltTdId;
}
}
//Headers row are moved from content table to headers table
for (var i = 0; i < this.gridHeadRows.length; i++) {
var headRow = tbl.rows[this.gridHeadRows[0]];
tH.appendChild(headRow);
}
this.headTbl.appendChild(tH);
if (tf.filtersRowIndex === 0) {
tH.insertBefore(filtersRow, hRow);
} else {
tH.appendChild(filtersRow);
}
this.headTblCont.appendChild(this.headTbl);
this.tblCont.parentNode.insertBefore(this.headTblCont, this.tblCont);
//THead needs to be removed in content table for sort feature
var thead = Dom.tag(tf.tbl, "thead");
if (thead.length > 0) {
tbl.removeChild(thead[0]);
}
//Headers table style
this.headTbl.style.width = tbl.style.width;
this.headTbl.style.tableLayout = "fixed";
tbl.style.tableLayout = "fixed";
this.headTbl.cellPadding = tbl.cellPadding;
this.headTbl.cellSpacing = tbl.cellSpacing;
//Headers container width
this.headTblCont.style.width = this.tblCont.clientWidth + "px";
//content table without headers needs col widths to be reset
tf.SetColWidths();
tbl.style.width = "";
if (Helpers.isIE()) {
this.headTbl.style.width = "";
}
//scroll synchronisation
var o = this; //TF object
Event.add(this.tblCont, "scroll", function () {
o.headTblCont.scrollLeft = this.scrollLeft;
var _o = this; //this = scroll element
//New pointerX calc taking into account scrollLeft
if (!o.isPointerXOverwritten) {
try {
o.Evt.pointerX = function (e) {
e = e || global.event;
var scrollLeft = tf_StandardBody().scrollLeft + _o.scrollLeft;
return (e.pageX + _o.scrollLeft) || (e.clientX + scrollLeft);
};
o.isPointerXOverwritten = true;
} catch (err) {
o.isPointerXOverwritten = false;
}
}
});
//Sort is enabled if not specified in config object
if (f.sort !== false) {
tf.sort = true;
tf.sortConfig.asyncSort = true;
tf.sortConfig.triggerIds = sortTriggers;
}
if (this.gridEnableColResizer) {
if (!tf.hasExtensions) {
tf.extensions = {
name: ["ColumnsResizer_" + tf.id],
src: [this.gridColResizerPath],
description: ["Columns Resizing"],
initialize: [function (o) {
o.SetColsResizer("ColumnsResizer_" + o.id);
}]
};
tf.hasExtensions = true;
} else {
if (!tf.__containsStr("colsresizer", Str.lower(tf.extensions.src.toString()))) {
tf.extensions.name.push("ColumnsResizer_" + tf.id);
tf.extensions.src.push(tf.gridColResizerPath);
tf.extensions.description.push("Columns Resizing");
tf.extensions.initialize.push(function (o) {
o.SetColsResizer("ColumnsResizer_" + o.id);
});
}
}
}
//Default columns resizer properties for grid layout
f.col_resizer_cols_headers_table = this.headTbl.getAttribute("id");
f.col_resizer_cols_headers_index = this.gridHeadRowIndex;
f.col_resizer_width_adjustment = 0;
f.col_enable_text_ellipsis = false;
//Cols generation for all browsers excepted IE<=7
o.tblHasColTag = Dom.tag(tbl, "col").length > 0 ? true : false;
if (!Helpers.isIE()) {
//Col elements are enough to keep column widths after sorting and
//filtering
var createColTags = function (o) {
if (!o) {
return;
}
for (var k = (o.nbCells - 1); k >= 0; k--) {
var col = Dom.create("col", ["id", o.id + "_col_" + k]);
tbl.firstChild.parentNode.insertBefore(col, tbl.firstChild);
col.style.width = o.colWidth[k];
o.gridColElms[k] = col;
}
o.tblHasColTag = true;
};
if (!o.tblHasColTag) {
createColTags(o);
} else {
var cols = Dom.tag(tbl, "col");
for (var ii = 0; ii < o.nbCells; ii++) {
cols[ii].setAttribute("id", o.id + "_col_" + ii);
cols[ii].style.width = o.colWidth[ii];
o.gridColElms.push(cols[ii]);
}
}
}
//IE <= 7 needs an additional row for widths as col element width is
//not enough...
if (Helpers.isIE()) {
var tbody = Dom.tag(tbl, "tbody"), r;
if (tbody.length > 0) {
r = tbody[0].insertRow(0);
} else {
r = tbl.insertRow(0);
}
r.style.height = "0px";
for (var x = 0; x < o.nbCells; x++) {
var col = Dom.create("td", ["id", o.id + "_col_" + x]);
col.style.width = o.colWidth[x];
tbl.rows[1].cells[x].style.width = "";
r.appendChild(col);
o.gridColElms.push(col);
}
this.hasGridWidthsRow = true;
//Data table row with widths expressed
o.leadColWidthsRow = tbl.rows[0];
o.leadColWidthsRow.setAttribute("validRow", "false");
var beforeSortFn = Types.isFn(f.on_before_sort) ? f.on_before_sort : null;
f.on_before_sort = function (o, colIndex) {
o.leadColWidthsRow.setAttribute("validRow", "false");
if (beforeSortFn) {
beforeSortFn.call(null, o, colIndex);
}
};
var afterSortFn = Types.isFn(f.on_after_sort) ? f.on_after_sort : null;
f.on_after_sort = function (o, colIndex) {
if (o.leadColWidthsRow.rowIndex !== 0) {
var r = o.leadColWidthsRow;
if (tbody.length > 0) {
tbody[0].moveRow(o.leadColWidthsRow.rowIndex, 0);
} else {
tbl.moveRow(o.leadColWidthsRow.rowIndex, 0);
}
}
if (afterSortFn) {
afterSortFn.call(null, o, colIndex);
}
};
}
var afterColResizedFn = Types.isFn(f.on_after_col_resized) ? f.on_after_col_resized : null;
f.on_after_col_resized = function (o, colIndex) {
if (!colIndex) {
return;
}
var w = o.crWColsRow.cells[colIndex].style.width;
var col = o.gridColElms[colIndex];
col.style.width = w;
var thCW = o.crWColsRow.cells[colIndex].clientWidth;
var tdCW = o.crWRowDataTbl.cells[colIndex].clientWidth;
if (Helpers.isIE()) {
tbl.style.width = o.headTbl.clientWidth + "px";
}
if (thCW != tdCW && !Helpers.isIE()) {
o.headTbl.style.width = tbl.clientWidth + "px";
}
if (afterColResizedFn) {
afterColResizedFn.call(null, o, colIndex);
}
};
if (tbl.clientWidth !== this.headTbl.clientWidth) {
tbl.style.width = this.headTbl.clientWidth + "px";
}
tf.refRow = Helpers.isIE() ? (tf.refRow + 1) : 0;
}
},
destroy: {
writable: true,
value: function () {
var tf = this.tf;
var tbl = tf.tbl;
if (!tf.gridLayout) {
return;
}
var t = tbl.parentNode.removeChild(tbl);
this.tblMainCont.parentNode.insertBefore(t, this.tblMainCont);
this.tblMainCont.parentNode.removeChild(this.tblMainCont);
this.tblMainCont = null;
this.headTblCont = null;
this.headTbl = null;
this.tblCont = null;
tbl.outerHTML = tf.sourceTblHtml;
tbl = Dom.id(tf.id); //needed to keep reference
}
}
});
return GridLayout;
})();
exports.GridLayout = GridLayout;
});

1
src/modules/gridLayout.js.map Normal file
View file

File diff suppressed because one or more lines are too long

2
src/modules/loader.js
View file

@ -38,7 +38,7 @@ define(["exports", "../dom", "../types"], function (exports, _dom, _types) {
var containerDiv = Dom.create("div", ["id", tf.prfxLoader + tf.id]); var containerDiv = Dom.create("div", ["id", tf.prfxLoader + tf.id]);
containerDiv.className = this.loaderCssClass; containerDiv.className = this.loaderCssClass;
var targetEl = !this.loaderTgtId ? (tf.gridLayout ? tf.tblCont : tf.tbl.parentNode) : Dom.id(this.loaderTgtId); var targetEl = !this.loaderTgtId ? tf.tbl.parentNode : Dom.id(this.loaderTgtId);
if (!this.loaderTgtId) { if (!this.loaderTgtId) {
targetEl.insertBefore(containerDiv, tf.tbl); targetEl.insertBefore(containerDiv, tf.tbl);
} else { } else {

2
src/modules/loader.js.map
View file

File diff suppressed because one or more lines are too long

0
test/test-grid-layout.html Normal file
View file

0
test/test-grid-layout.js Normal file
View file