Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is a very custom GUI, so I'd use a fairly home-grown solution. I'd break down the problem into a few steps and make the browser responsible for most of the work (ergo JavaScript).</p> <p>First, you want object to represent the data. Based on the problem, I'd suggest you have a three-tier object structure: one to represent the user (each row in the example); a child array in this object would hold each day's data; and each member of the array would be an object that holds the cells the user chose. JSP would be responsible for writing out this data structure, but JavaScript would take it from there. Here's what the constructors would look like:</p> <pre><code>function DayOfData(dateString, dataObject) { this.date = Date.parse(dateString); //storing a Date is cleaner separation of presentation &amp; data this.dataCells = dataObject; } function User(name, email, role) { this.name = name; //and so on this.data = []; this.addData = function(date, dataSet) { this.data.push( new DayOfData(date, dataObject) ); } } </code></pre> <p>The instantiations as written by JSP (or whatever is in the middle tier) would look like this:</p> <pre><code>var users = []; //a global to hold it all users[someId] = new User("foo", "foo@something.org", "boss"); users[someId].addData("1/1/1970", {"label 1": 23, "label 2": "test"} ); //...and so on </code></pre> <p>Notice the JSON object that stores the data cells that the user chose to display. In this anonymous object, I'm correlating the visual label with the value; this is simpler than creating yet another child object to abstract the label from some unique ID. You could go that extra step if it was really necessary, but it's one more level in the hierarchy, so I think it's best to go the simpler route.</p> <p>(Of course, you'd want to namespace all this properly... I'm using naked global variables to simplify the syntax. For a really robust system, I'd use private members as well.)</p> <p>I would use TrimPath in the display phase (after JSP has written out the data in this structure). Simply pass the users array to a template that would look something like this (this would get placed in a table by the display code after TrimPath processes it):</p> <pre><code>&lt;tbody&gt; {for user in user} &lt;tr&gt; &lt;td&gt;${user.name}&lt;/td&gt; &lt;!-- and so on --&gt; {for day in user.data} {for datum in day} &lt;td&gt;${datum}&lt;/td&gt; {/for} {/for} &lt;/tr&gt; {for} &lt;/tbody&gt; </code></pre> <p>You'd need to do a slight variation on this pattern to write the header row, though you probably could do that easier in the server-side code, since it's not a dynamic part of the GUI. To get the label row to "freeze" at the top of the table (it will be in a THEAD element), just use CSS to set the TBODY's height, then set overflow-y to "scroll". That ought to achieve the effect you want.</p> <p>To re-sort the columns, you'd actually re-sort the users array (see descriptions of <a href="http://www.w3schools.com/jsref/jsref_sort.asp" rel="nofollow noreferrer">Array.sort</a>) based on the column the user clicks. Then, clear out the TBODY and reprocess the template with <a href="http://code.google.com/p/trimpath/wiki/JavaScriptTemplates" rel="nofollow noreferrer">TrimPath</a>.</p> <p>This sounds complicated and involved, but it's really not. You want to avoid making it difficult to change the layout, so separating data and presentation is key. A collection of data-only JavaScript objects coupled with TrimPath (or similar) templates as outlined above accomplishes a good MVC pattern, and makes the problem simpler by breaking it down into discrete steps. Managing a sortable table of data (not to mention data that is grouped horizontally into major divisions) -- that would be next to impossible without good MVC.</p>
    singulars
    1. This table or related slice is empty.
    1. POFor the Web UI gurus
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USpluckyglen
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload