Grid behavior

grid1.jpg

Grid is a scrollable <table> where each <row> represents set of related fields (<cell>s). To define such a grid you would use something like this:

Letters in the Latin-1 Set:
<table #thetable fixedrows=1>
  <tr><th>Character<th>Entity<th>Description</th></tr>
  <tr><td>&Aacute;<td>&amp;Aacute;<td>capital A with acute</td></tr>
  <tr><td>&Acirc;<td>&amp;Acirc;<td>capital A with circumflex</td></tr>
  ...
</table>

Such markup combined with desired styling:

  table 
  { 
    overflow: auto;
    width:100%%;
    height:100%%;
    prototype:Grid; /* see sources below*/
  }
  ...

and scripting class Grid below will give us interactive grid that can be browsed by the user.

Full source code

//|
//| grid behavior, must be applied to tables.
//|
//| add style="overflow:auto" and fixedrows="1" if you need it scrollable
//|
//| NOTIFICATIONS:
//|   Row Click:
//|       calls this.onRowClick(rowElement) 
//|   Header Click:
//|       calls this.onHeaderClick(headerCellElement) 
//|
// Click on Header cell,
// override it for particular grid instance
// E.g. you may chose to reorder table using this column as a key.
// Click on some row 
// override it for particular grid instance
// returns current row (if any)
"tr:current"// returns current column (if any)
"td:current,th:current"// return current cell in first header row
// set current row
// get previously selected row:
// already here, nothing to do.
// drop state flag
// set state flag
// get previously selected column:
// already here, nothing to do.
// drop state flag
// set state flag
// get number of fixed Rows in the table
"fixedrows""table""grid: attached to wrong element - %s\n"// auxiliary function, returns row this target element belongs to
// auxiliary function, returns row this target element belongs to
// click on the row
// click on the header cell
// as it is always ours then stop event bubbling
// handling only KEY_DOWN
//stdout.printf("onKey:%x\n",evt.keyCode);
// this row is further than scroll pos - height of scroll area 
// to last fully visible
// just in case
// this row is further than scroll pos - height of scroll area 
// to last fully visible
// just in case
// type Grid
 

sciter/snippets/grid.txt · Last modified: 2008/02/12 22:25 by andrew
chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0