Dom Table by francesco gasparetto

Abstract

Generate a DOM based table, starting from a data matrix, tipically from JSON server side

Description

Generate a DOM based table, starting from a data matrix, tipically from JSON server side

Code Snippet

function DOMTable(){
    this.thTop = 1; // 0001
    this.thLeft = 2; // 0010
    this.thRight = 4; // 0100
    this.thBottom = 8; // 1000
    this.colonne = new Array();
	this.colvals = new Array();
	this.ordcol = "";
	this.ordasc = "ASC";
    this.tableStyle = {
        backgroundColor: "#ffffff",
        margin: "0",
        borderCollapse: "collapse",
        border: "1px solid #000000",
        fontFamily: "Verdana, Tahoma, Helvetica, Arial, sans-serif",
        fontSize: "10pt",
        color: "black",
        padding: "0",
        letterSpacing: "0.1em"
    };
    this.tdStyle = {
        border: "1px solid #d0d0d0",
        padding: "1px 5px",
        //fontWeight: "bold",
        textAlign: "left"
    };
    this.thStyle = {
        border: "1px solid #d0d0d0",
        padding: "1px 5px",
        fontWeight: "bold",
        backgroundColor: "#f0f0f0",
        textAlign: "right"
    };
	this.curPointer = {
		cursor: "pointer"
	}
	this.curDefault = {
		cursor: "default"
	}


}

/* Crea mini-table per debug e messaggi errore */
DOMTable.prototype.msgTable = function(testo){
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    var headtr = document.createElement("tr");
    var cellText = document.createTextNode(testo);
    var cell = document.createElement("th");
    cell.appendChild(cellText);
    headtr.appendChild(cell);
    tblBody.appendChild(headtr);
    tbl.appendChild(tblBody);
    return tbl;
}

DOMTable.prototype.clearCols = function() {
	for (i=0;i<this.colonne.length;i++) {
		$(this.colonne[i]).innerHTML = this.colvals[i];
	}
}


/* Riceve un hash pointer e restituisce elemento tr pieno */
DOMTable.prototype.dbRow2Tr = function(dbrow, trId){
    var headtr = document.createElement("tr");
    for (key in dbrow) {
        var testo = trId == -1 ? key : dbrow[key];
        var id = trId == -1 ? key : trId;
        var cellText = document.createTextNode(testo);
        tag = trId == -1 ? "th" : "td";
        var cell = document.createElement(tag);
        cell.setAttribute("id", key + "_" + id);
        cell.appendChild(cellText);
        headtr.appendChild(cell);
    }
    return headtr;
}
/* Crea table DOM
 /* input:  array di array [[nome,cognome],[sam,smith],...]
 * output: elemento table
 */
DOMTable.prototype.create = function(dati, thBin){
    xDOMTable = document.createElement("table");
    xtblBody = document.createElement("tbody");
    Element.extend(xDOMTable);
    xDOMTable.setAttribute("id", "domtable");
    Element.extend(xDOMTable);
    if (typeof(dati[0]) != 'object')
        return this.msgTable(typeof(dati) + " not in [[\"A1\",\"A2\"],[\"B1\",\"B2\"]] format");
    var th = 0;
    var th0 = 0;
//	alert(dati[0][1]);
    for (r = 0; r < dati.length; r++) {
        var domtr = document.createElement("tr");
		Element.extend(domtr);
        th0 = ((r == 0 && (thBin & this.thTop)) || (r == (dati.length - 1) && (thBin & this.thBottom))) ? 1 : 0;
        for (c = 0; c < dati[r].length; c++) {
			if (c == 0) {
				this.xid = dati[r][c];
				continue;
			}
			if (!th0)
                th = ((c == 0 && (thBin & this.thLeft)) || (c == (dati[r].length - 1) && (thBin & this.thRight))) ? 1 : 0;
            var tag = (th || th0) ? "th" : "td";
			var cell = document.createElement(tag);
			Element.extend(cell);
            var tstyle = (tag == "th" ? this.thStyle : this.tdStyle);
		    var tdid = dati[0][c]+'_'+this.xid;//c+'_'+r;
			if (r==0)
				tdid = dati[0][c]+'_0';

            cell.setAttribute("id", tdid);
            var cellText = document.createTextNode(dati[r][c]);
			if (tag == "th") {
				var oThis = this;
				this.colonne.push(tdid);
				this.colvals.push(dati[r][c]);

			    Event.observe(cell,"click",function(){
				    asc = ordarr[1] == 'ASC' ? 'DESC' : 'ASC';
				    buf = this.innerHTML.split('<');
				    ord = buf[0];
				    asc = ordarr[0] != ord ? 'ASC' : asc;
				    doSearch(0,ord,asc);
				    //alert(ordarr[0]);
			    });
				cell.appendChild(cellText);
			}
			else {
				newlink = document.createElement('a');
				newlink.setAttribute('href', '#');
				cellText += " lll";
				newlink.appendChild(cellText);
				cell.appendChild(newlink);
				oThis = this;
				Event.observe(cell,"click",function(){
					var buf = new Array();
					buf = this.id.split('_');
					var id_servizio = buf[1];
					window.open("scheda.php?id_servizio="+id_servizio);
				});
			}



			domtr.appendChild(cell);
        }
        xtblBody.appendChild(domtr);
    }
    //xDOMTable.setStyle(this.tableStyle);

    xDOMTable.appendChild(xtblBody);
    return xDOMTable;
}