Combining ext-table with data from HTML markup

[John-Paul Herold]

Greetings,

I'm in a situation where I have the tree data I need being passed via JSTL into a JSP. I also am using the table extension for structuring extra data I show in the tree. I have been trying to get both the extension and markup data to work together but have been unsuccessful thus far. I know the markup data can be read properly as I can render it without the table extension. Here is an example of what I have been trying:

<table id=tree>

  <ul id="treeData" style="display: none;">
    <c:forEach items="${nodes}" var="node">
      <li id="${node.key}" title="${node.fullPath}">
        ${node.description}
      </li>
    </c:forEach>
  </ul>
  <colgroup>
    <col width="100px"></col>
    <col width="20px"></col>
  </colgroup>
  <thead>
    <tr>
      <th>Tree</th>
      <th></th>
    </tr>

  </thead>
  <tbody></tbody>
</table>

I would then try to build fancytree off of the '#tree' selector. Any ideas on how to get this to work?

Cheers,

[John-Paul Herold]

I ended up going a different route. I didn't define a treeOptions.source and used:

<div id="treeData" style="display: none;">

 <c:forEach items="${nodes}" var="node">

   <span data-tree-key="${node.key}"

     data-tree-path="${node.fullPath}"

     data-tree-title="${node.tooltip}"></span>

 </c:forEach>

</div>

...to get the initial data from JSP, then used a simple loop to create an array of objects, and set the tree's option.source with the return:

var treeDataFromHTML = function (div) {

  // TODO use ajax instead of embedded tree data in HTML

  var treeData = [],

  $sel = $(div);

  

  $.each($sel, function(i, o) {

    var category = {"key" : o.dataset.treeKey, "title" : o.dataset.treeTitle, "tooltip" : o.dataset.treePath};

    treeData.push(category);

  });

  

  return treeData;

};

Little bit chaotic but the cleanest solution, without embedding js/java into JSP, I came up with until I can get an ajax call wired up. The tree itself is very basic though (<20 nodes), no nesting, and limited node data.