Unofficial JDA (Javascript Dataflow Architecture) WikiPublic Space

The TabularListing blueprint creates a table DOM element under the node of the infotron instance, and creates rows from the provided array on the "collection_in" input terminal. Whenever a row is clicked, the row is posted on the output terminal "clicked_row_out"

Demos that use it

• map.html
• multi_map.html

BLUEPRINT(
"~011DB4973313E34549A9FCE7499BBB6F81",
[
 ["collection_in", "onCollection", 10]
],
[
 "clicked_row_out"
],
function (Class)
{
  Class.prototype._onInit = function(props)
  {
    var self = this;

    function _onClick(e)
    {
      var t;
      e = e || __w.event;
      t = e.srcElement || e.target;
      self.postMessage("clicked_row_out", [t.cellIndex + 1, t.parentNode.eform]);
    }
    
    this._tbody = this.dom_node.getElementsByTagName("TBODY")[0];
    this._n_rows = this._tbody.getElementsByTagName("TR").length;
    this._n_cols = this._tbody.getElementsByTagName("TR")[0].getElementsByTagName("TD").length;
    
    this.dom_node.onclick = _onClick;
  };


    Class.prototype.onCollection = function(msg)
    {
        var i, n, row, col, ef;
        var thead = this.dom_node.getElementsByTagName("THEAD")[0];
        var keys = [];

        n = thead.getElementsByTagName("TH").length;

        for (i = 0; i < n; i ++) {
            keys[i] = thead.getElementsByTagName("TH")[i].getAttribute("key");
        }
    
    n = Math.max(msg.length, this._n_rows);
    

        for (i = 0; i < n; i ++) {
            row = this._tbody.getElementsByTagName("TR")[i];
        if (row) {
          ef = msg[i];
          
          if (ef) {
        if (row.eform) {
          for (key in ef) {
            row.eform[key] = ef[key];
          }
        } else {
          row.eform = ef;
        }
          }
          
          for (j = 0; j < this._n_cols; j ++) {
                col = row.getElementsByTagName("TD")[j];               
        
                if (ef && keys[j] && ef[keys[j]]) {
          col.innerHTML = ef[keys[j]];
                } else { // clone
          col.innerHTML = "";
                }
          }
        }
       }
    }

}, "Tabular View");