Table Grid style and sort the style : Table Grid « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » GUI Components » Table Grid 
Table Grid style and sort the style
 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Adv. Example: Setting and Using Styles</title>
  <!-- examples.css -->
  <style type="text/css" rel="stylesheet">
html, body {
  height: 100%;
  width:  100%;
  font-family: Arial, Verdana, sans-serif;
  color: #cccc99;
  font-size: 1em;
  /* overflow: auto; */
  margin-left: 0px;
  margin-top:  0px;
  margin-bottom: 0px;
  margin-right: 0px;
}

#block_top {
  margin: 5px;
  background-color: #d0d0d0;
  border: 1px solid #000;
}

#block_left {
  margin-left: 5px;
  left: 0px;

  background-color: #76808b;
  border: 1px solid #000;
  float: left;

  width: 15%;
}

#block_middle {
  margin-left: 18%;
  margin-right: 5%;
  padding: 5px;

  background-color: #959595;
  border: 1px solid #000;
}

.block {
  margin: 5px;
  border: 1px solid #000;
}


  text-decoration: none;
  margin-left: 5px;
  }

a:hover {
    text-decoration: underline overline ;
    
  }
  

h1,h2,h3,h4,h5,h6.center text-align: center; }


body {
  color: #000000;
  background: #666666;
}

/* Menu */
.menu_title 
  margin:  4px;
  padding: 5px;
  border: 1px solid #000;
  background-color: #454545;
  color: white;
  font-weight: bold;
}

/* Description Menu */
.descr_menu border: 1px solid black; background-color: #353535}
.descr_menu th width:150px; background:#8080ff; }
.descr_menu th a text-decoration:none; color:#000000}
.descr_menu td 
      font-weight: bold; 
      background:  #add8e6; 
      padding: 5px;
    }

/* Form 1 */
.form1   
    border: 1px solid black; 
    padding: 5px;
    margin: 5px;
    background-color: #a5a5cc;
    display: none;
  }

.field_descr   {
      text-align: right;
      font-weight: bold;
      margin-right: 5px;
    }

.code {
    padding: 5px;
    margin: 5px;
    font-family: courier;
    background: #ccccff;
    white-space: pre;
  }

.result {
    padding: 3px;
    margin: 2px;
    background: #eee;
  }

.note {
    padding: 5px;
    margin: 2px;
    background: #ffaaaa;
    border: solid;
    border-width: 1px;
  }
  
  </style>
  <!-- os3grid.css -->
  <style type="text/css" rel="stylesheet">
.g_table {
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0px;
   }

.g_header {   
    border: 2px solid;
    border-color: #fff #333 #333 #fff;
    background-color: #eeeeee; 
    padding-right: 9px;
    padding-left: 9px;
    padding-bottom: 2px;
    cursor: pointer; 
    text-align: center;
    color: black; 
    font-size: 12px;
       }

.g_resize {
    cursor: e-resize;
  }

.g_header_down {
      border: solid;
      border-color: #333 #555 #555 #333;
      border-width: 2px;
      background-color: #eeeeee; 
      padding-top: 2px;
      padding-left: 10px;
      padding-right: 8px;
      text-align: center;
      color: black; 
      cursor: pointer;
      font-size: 12px;
      }

.g_cell {
    border: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #ccc;
    padding: 4px;
    font-size: 10px;
  }

.g_cell_hl {
      border: dashed;
      border-width: 1px;
      border-color: #f00;
      background-color: #ddd;
     }

.g_edit_box {
      border: solid;
      border-width: 1px;
      border-color: #999;
      padding: 3px;
      background: white;
      }
  
  </style>
  
  <!-- os3grid.js -->
  <script type="text/javascript">
/*
  OS3Grid v0.5

  by Fabio Rotondo - fsoft ( at ) sourceforge.net

  0.5:   - ATTR: start_counter
    - resize_cols
    - set_col_render ()

*/

// ===================================================================
// GLOBAL STUFF - Init global data class
// ===================================================================
function os3_grid_global_data ()
{
  this.grid_arr = new Array ();
  this.sort_field = 0;
  this.sort_inverted = 0;
}

var _os3_grid_global_data = new os3_grid_global_data ();
var _os3g_resize_cell;
var _os3g_resize_start_x = -1;

// Flag T/F to know if the current browser is the almighty bugged Internet Exploder.
var _os3g_is_ie = document.all != null );

// ===================================================================
// Grid Resize Functions
// ===================================================================
function grid_resize_cell_down id )
{
  _os3g_resize_cell = document.getElementById id );

  document.onmousemove = grid_resize_callback;
  if ! _os3g_is_ie 
  {
    document.captureEvents(Event.MOUSEMOVE);
  else {
    while ! _os3g_resize_cell )
    {
      _os3g_resize_cell = document.getElementById id );
      if confirm "The buggy Internet Explorer cannot get the ID: " + id + ". Try again?\nBTW: You should really consider to switch to Mozilla Firefox (www.getfirefox.com)" == false break;
    }
  }
}

function grid_resize_cell_up ()
{
  if ! _os3g_resize_cell return;

  document.onmousemove = null;

  // later
  if ! _os3g_is_ie )
  {
    document.releaseEvents(Event.MOUSEMOVE);
  }

  if _os3g_resize_cell.old_className _os3g_resize_cell.className = _os3g_resize_cell.old_className;
  _os3g_resize_start_x = -1;

  // Save the new column width inside _column_width array;
  var res = _os3g_resize_cell.id.split "_th" );
  var name = res ];
  var num  = res ];

  var grid = _os3_grid_global_data.grid_arr name ];

  grid._column_width num = _os3g_resize_cell.width;

  _os3g_resize_cell = null;
}

function grid_resize_callback )
{
  var cur_x, cur_y;

  if ( ( ! _os3g_is_ie && e.pageX ) )
    cur_x = e.pageX;
  else 
    cur_x = event.x;

  if _os3g_resize_start_x == -
  {
    _os3g_resize_start_x = 1;
    _os3g_resize_start_x = cur_x - _os3g_resize_cell.offsetWidth;
  }

  if cur_x <= _os3g_resize_start_x cur_x = _os3g_resize_start_x +1;

  _os3g_resize_cell.width = cur_x - _os3g_resize_start_x );
}

// ===================================================================
// Grid Edit Functions
// ===================================================================
function grid_edit_abort_or_blur input, cell_id, evt )
{
        evt = (evt? evt : event;

  var ccode = evt.charCode ? evt.charCode : ( ( evt.which ? evt.which : evt.keyCode );
        var ch = String.fromCharCode ccode );

  // User confirmed input by pressing "enter key"
  if ccode == 13 return input.blur ();

  // User aborted input
  if ccode == 27 )
  {
    var v = cell_id.split ":" );
    var grid = _os3_grid_global_data.grid_arr ] ];
    input.value = grid.rows ] ] [ "data" ] [ ] ];
    input.blur ();
  }

  return true;
}

function grid_edit_end input, cell_id )
{
  var v = cell_id.split ":" );
  var grid = _os3_grid_global_data.grid_arr ] ];
  var oldv = grid.rows ] ] [ "data" ] [ ] ];

  if oldv != input.value )
  {
    if grid._column_validator ] ] )
      if grid._column_validator ] ] ( input.value == false )
      {
        alert "Invalid input: " + input.value );
        return input.focus ();
      }

    grid.rows ] ] [ "data" ] [ ] ] = input.value;
    if grid.onchange grid.onchange grid, v ], v ], input.value );
    if grid.sort_on_edit grid.sort ();
  }

  return grid.render ();
}

function grid_cell_txt_edit cell )
{
  var v = cell.id.split ":" );
  var grid = _os3_grid_global_data.grid_arr ] ];
  var val;
  var s, el, size;
  var type = grid._column_type ] ];

  if ! type type = 'str';

  val = String grid.rows ] ] [ "data" ] [ ] ] );

  s  = '<input type="text" id="grid_edit_cell" value="' + val + '" ';
  s += ' onblur="grid_edit_end ( this, \'' + cell.id + '\' )" ';
  s += ' onfocus="this.select()" ';


  if grid._column_chars ] ] ) 
    s += 'onkeypress="return grid_edit_filter_chars ( event, \'' + grid._column_chars [ v [ 1 ] ] + '\' )" ';

  s += ' onkeydown="grid_edit_abort_or_blur(this, \'' + cell.id + '\', event)" ';
  s += ' size="'+ val.length + '" ';
  s += ' class="g_edit_box" ';
  if type == 'int' ) s += ' style="text-align: right;" ';
  s += '/>';

  cell.innerHTML = s;

  el = document.getElementById "grid_edit_cell" );
  el.focus ();
}

function grid_edit_filter_chars evt, valids ) {
        evt = (evt? evt : event;

        if evt.charCode < 32 return true;
                                                                                                                                                   
        var ccode = evt.charcode ? evt.charcode : ( ( evt.which ? evt.which : evt.keycode );
        var ch = String.fromCharCode ccode ).toLowerCase ();

  valids = valids.toLowerCase ();

        if valids.indexOf ch == -return false;

        return true;
}


function grid_header_mdown header )
{
  if header.className == 'g_header_down' ) return;

  header.old_className = header.className;
  header.className = 'g_header_down';
  
}

function grid_header_mup header )
{
  if header.old_className header.className = header.old_className;
}

function grid_header_click header )
{
  var name, num, res, grid;
  
  res = header.id.split "_gh" );
  name = res ];
  num  = res ];

  grid = _os3_grid_global_data.grid_arr name ];

  grid.set_sort_field num );

  grid.sort ()
}

function grid_row_over row )
{
  var old_col = row.style.backgroundColor;
  var hover_col = _os3_grid_global_data.grid_arr row.firstChild.id.split ":" ) [ ] ].cols "hover" ];

  if _os3g_resize_cell grid_resize_cell_up ();

  if ( ( row.selected || old_col == hover_col ) ) return;

  row.old_color = old_col;
  row.style.backgroundColor = hover_col;
}

function grid_row_out row )
{
  if ! row.selected row.style.backgroundColor = row.old_color;
}

function grid_cell_click cell )
{
  var v = cell.id.split ":" );
  var grid = _os3_grid_global_data.grid_arr ] ];
  var val;

  val = grid.rows ] ] [ "data" ] [ ] ];

  sel = grid._cell_click grid, cell, v ], v ], val );
  
  if sel )
  {
    cell.old_border = cell.style.borderColor;
    cell.style.borderColor = grid.cols "rowsel" ) ];
  else
    cell.style.borderColor = cell.old_border;

  cell.selected = sel;
}

// ===================================================================
// Row selection function
// ===================================================================
function grid_row_click cell, grid_id, row_num )
{
  var grid = _os3_grid_global_data.grid_arr grid_id ];
  var row = cell.parentNode;

  if row.selected )
  {
    row.selected = false;
    grid_row_out row );
  else {
    row.selected = true;
    row.style.backgroundColor = grid.cols "rowsel" row_num % ) ];
  }

  grid.rows_selected row_num = row.selected;

  if grid.onrowselect grid.onrowselect grid, row_num, row.selected );
}

// ===================================================================
// Internal Functions
// ===================================================================
function os3_grid_int_sort a, b )
{
  var res = 0;
  var v1, v2;

  v1 = parseInt "data" ][ _os3_grid_global_data.sort_field ] );
  v2 = parseInt "data" ][ _os3_grid_global_data.sort_field ] );

  if  v1 < v2 res = -1;
  else if v1 > v2 res = 1;

  if _os3_grid_global_data.sort_inverted res *= -1;

  return res;
}

function os3_grid_str_sort a, b )
{
  var res = 0;
  var v1, v2;

  v1 = a "data" ][ _os3_grid_global_data.sort_field ];
  v2 = b "data" ][ _os3_grid_global_data.sort_field ];

  if v1 < v2 res = -1;
  else if v1 > v2 res = 1;

  if _os3_grid_global_data.sort_inverted res *= -1;

  return res;
}

function _os3g_set_headers ()
{
  this.headers = arguments;
}

function _os3g_set_sort_field num )
{
  if num == this.sort_field 
    this.sort_inverted = ! this.sort_inverted;
  else
  {
    this.sort_field = num;
    this.sort_inverted = false;
  }
}

function _os3g_set_cell_click fname )
{
  this._cell_click = fname;

  if this.id && this.autorender this.render ();
}

function _os3g_set_size w, h )
{
  this._width = w;
  this._height = h;
  if this.id && this.autorender this.render ();
}

function _os3g_set_scrollbars sbars )
{
  this._scrollbars = sbars;
  if this.id && this.autorender this.render ();
}

function _os3g_set_border bsize, style, color )
{
  this._border = bsize;
  if style this._border_style = style;
  if color this._border_color = color;

  if this.id && this.autorender this.render ();
}

function _os3g_set_sortable sortable )
{
  this._sortable = sortable ;

  if this.id && this.autorender this.render ();
}

function _os3g_set_highlight hl )
{
  this._row_hl = hl ;

  if this.id && this.autorender this.render ();
}

function _os3g_sort ()
{
  if this.sort_field == -return;

  var ctype = this._column_type this.sort_field ];
  var sfunc;

  if ! ctype ctype = "str";
  sfunc = "str" : os3_grid_str_sort,
        "int" : os3_grid_int_sort,
        "date": os3_grid_str_sort } [ ctype ];

  _os3_grid_global_data.sort_field = this.sort_field;
  _os3_grid_global_data.sort_inverted = this.sort_inverted;
  this.rows.sort sfunc );
  this.render this.id );
}

function _os3g_add_row ()
{
  var arr;

  arr = "data" : arguments, "style" this.current_style };

  this.rows.push arr );
}

function _os3g_get_str ()
{
  var t, len;
  var s = '<table class="g_table">';
  var id, td_id;

  // Row selections are discarted on rendering
  this.rows_selected = new Array ();

  if this.headers )
  {
    s += '<tr>';
    if this._show_row_num s+= '<td><div class="g_header">&nbsp</div></td>';

    len = this.headers.length;

    for t = 0; t < len; t ++ )
    {
    
      td_id = this.id + "_th" + t;
      id = this.id + "_gh" + t;

      s += '<td id="' + td_id + '" ';
      if this._column_width ] ) s += 'style="width: ' + this._column_width [ t ] + 'px;" ';
      s +='><div id="' + id + '" class="g_header"';
      if this._click_cb ] )
      {
        if this._click_cb != -
        {
          s += ' onclick="' + this._click_cb [ t ] +  '"';
          s += ' onmousedown="grid_header_mdown(this)"';
          s += ' onmouseup="grid_header_mup(this)"';
          // s += ' onmouseout="grid_header_mup(this)" ';
        }
      else if this._sortable ) {
          s += ' onclick="grid_header_click(this)"';
          s += ' onmousedown="grid_header_mdown(this)"';
          s += ' onmouseup="grid_header_mup(this)"';
          //s += ' onmouseout="grid_header_mup(this)" ';
      }

      s += '>'this.headers "</div></td>"

      if this.resize_cols )
        s += '<tclass="g_resize" onmousedown="grid_resize_cell_down(\'' + td_id + '\')" onmouseup="grid_resize_cell_up()"></td>';
    }
    s += '</tr>';
  }

  var r, i, rlen, bgc, align, hl, style, rowcol, fullrow, v;

  len = this.rows.length;
  rlen = this.rows[0]['data'].length;  // All rows must be equal size
  for t = 0; t < len; t ++ )
  {
    fullrow = this.rows ];
    r   = fullrow 'data' ];
    style  = fullrow 'style' ];
    rowcol  = fullrow 'color' ];

    if rowcol )
      bgc = ' bgcolor="' + rowcol + '"';
    else 
      bgc = ' bgcolor="' + this.cols [ style + ( t % 2 ) ] + '"';

    if this._row_hl )
      hl = ' onmouseover="grid_row_over(this)" onmouseout="grid_row_out(this)" ';
    else
      hl = '';
      
    s += '<t' + hl + bgc + '>';
    if this._show_row_num 
    {
      s+= '<tclass="g_header"';
      if this._row_sel )
      {
        s += ' onmousedown="grid_header_mdown(this)"';
        s += ' onmouseup="grid_header_mup(this)"';
        s += ' onclick="grid_row_click(this,\'' + this.id + '\',' + t + ')"';
      }

      s += ' id="' + this.id + ':' + t + '"';

      s+= '>' this.start_counter + t '</td>';
    }

    for i = 0; i < rlen; i ++ )
    {
      if this._column_align ] )
        align = 'align="' + this._column_align [ i ] + '"';
      else if ( ( this._column_type ] ) && this._column_type != 'str' ) )
        align = 'align="right"';
      else
        align = "";
      
      s += '<tclass="g_cell" valign="top" ' + align;
      if this.resize_cols s += ' colspan="2"';
      if this._column_edit ] ) s += ' ondblclick="grid_cell_' + this._column_edit [ i ] + '_edit(this)" ';
      if this._cell_click s += ' onclick="grid_cell_click(this)" ';
      s += ' id="' + this.id + ':' + i + ':' + t + '"';
      s += '>'
      if this._column_render ] )
        v = this._column_render ] ( ] );
      else
        v = r ];
      s += v;
      s += '</td>';
    }
    s += '</tr>';
  }

  s += "</table>";
  
  return s;
}

function _os3g_render objId )
{
  if objId == undefined objId = this.id;

  this.id = objId;
  var obj = document.getElementById objId );

  obj.innerHTML = this.get_str ();

  if this._scrollbars )
    obj.style.overflow = "auto";
  else
    obj.style.overflow = "visible";  // was "none"


  if this._width )  obj.style.width = this._width;
  if this._height obj.style.height = this._height;
  if this._border 
  {
    if this._border_style obj.style.border = this._border_style;
    if this._border_color obj.style.borderColor = this._border_color;
    obj.style.borderWidth = this._border + "px";
  }
  
  // Bind element to the os3_grid_array
  _os3_grid_global_data.grid_arr objId this;

  if this.onrender this.onrender this );
}

function _os3g_set_row_color col, row_num )
{
  if ( ( row_num == undefined || row_num == -)  ) row_num = this.rows.length -1;

  this.rows row_num ] [ 'color' ] = col;
}

function _os3g_set_row_style style, row_num )
{
  if ( ( row_num == undefined || row_num == -)  ) row_num = this.rows.length -1;
  
  this.rows row_num ] [ 'style' ] = style;
}

function _os3g_set_col_align col, align )
{
  this._column_align col = align;
}

function _os3g_set_col_editable col, edit )
{
  this._column_edit col = edit;
}


function _os3g_get_value x, y )
{
  return this.rows ] [ ];
}

function _os3g_set_col_valid_chars col, chars )
{
  this._column_chars col = chars;
}

function _os3g_set_col_validation col, func )
{
  this._column_validator col = func;
}

function _os3g_set_row_select rsel )
{
  this._row_sel = rsel;
  if this._row_sel this._show_row_num = true;

  if this.id && this.autorender this.render ();
}

function _os3g_show_row_num show )
{
  this._show_row_num = true;
  if this.id && this.autorender this.render ();
}

function _os3g_set_col_type col, type )
{
  this._column_type col = type;
}

function _os3g_set_col_render col, render )
{
  this._column_render col = render;
}


function _os3g_get_row row )
{
  return this.rows row ] [ "data" ];
}

function _os3g_set_click_cb col, callback )
{
  this._click_cb col = callback;

  if this.id && this.autorender this.render ();
}

function _os3g_set_style style )
{
  this.current_style = style;

  if this.id && this.autorender this.render ();
}


function OS3Grid auto_render )
{
  // ===========================================
  // Public attribs
  // ===========================================

  this.id = 0;

  this.start_counter = 0;

  // ===========================================
  // PUBLIC FLAGS
  // ===========================================

  // Flag T/F. If True, any modification (done with set_* funcs) will immediately renderd on grid
  this.autorender = auto_render;  

  // Flag T/F. If True, grid will be re-sorted on value changes
  this.sort_on_edit = false;

  // ===========================================
  // PUBLIC CALLBACKS
  // ===========================================
  // Function to be called when data in grid changes
  this.onchange = false;

  // Function to be called after the grid redraws
  this.onrender = false;

  // Callback to be called when the user selects / deselects a row
  this.onrowselect = false;

  // Flag T/F. If True, user can resize column at runtime
  this.resize_cols = false;
  
  // ===========================================
  // PUBLIC ATTRIBUTES
  // ===========================================

  // Array rows_selected
  this.rows_selected = false;  // This array keeps track of selected rows


  // Colors
  this.cols = "hover"   "#8ec4cf",
         "rowsel0"  "#ffa07f",
         "rowsel1"  "#df8c6f",
         "normal0"  "#ffffff",
         "normal1"  "#dfdfdf",
         "error0"  "#ff0033",
         "error1"  "#cc0033",
         "warn0"  "#ffff99",
         "warn1"  "#ffff66",
         "note0"  "#9aff9a",
         "note1"  "#4eee94"
        };

  // Default style
  this.current_style = "normal";

  // =============================================================================================
  // Private Stuff - Do not directly modify these values!
  // =============================================================================================
  this.headers = 0;
  this.rows = new Array ();
  this.sort_field = -1;
  this.sort_inverted = false;
    
  this._row_style = new Array ();
  this._column_align = new Array ();
  this._column_edit  = new Array ();
  this._column_chars  = new Array ();
  this._column_validator = new Array ();
  this._column_width = new Array ();
  this._column_render = new Array ();

  // This array stores the custom click callbacks
  this._click_cb = new Array ();
  
  // This array contains the column type. By default it is "str"
  // Valid values are: "str", "int", "date"
  this._column_type = new Array ();

  // Flag T/F. If True, the grid is sortable (by clicking on the headers)
  this._sortable = false;

  // Flag T/F. If True, scrollbars are used.
  this._scrollbars = false;

  // Force grid container width
  this._width = 0;

  // Force grid container height
  this._height = 0;

  // Grid container border size (in pixels)
  this._border = 0;

  // Grid container border style (solid, dashed, dotted...)
  this._border_style = 0;

  // Grid container block color
  this._border_color = 0;

  // Function callback for every cell click
  this._cell_click = 0;

  // Function callback for every row click
  this._row_click = 0;

  // Flag T/F. If True rows will be highlighted when the mouse scrolls over them.
  this._row_hl = false;

  // Flag T/F. If True rows number are shown and rows are selectable by clicking on them.
  this._show_row_num = false;

  // Flag T/F. If True rows number are shown and rows are selectable by clicking on them.
  this._row_sel = false;

  // Public methods
  this.add_row     = _os3g_add_row;
  this.get_row     = _os3g_get_row;
  this.get_str     = _os3g_get_str;
  this.getv    = _os3g_get_value;
  this.render     = _os3g_render;
  this.set_border   = _os3g_set_border;
  this.set_cell_click   = _os3g_set_cell_click;
  this.set_click_cb  = _os3g_set_click_cb;
  this.set_col_align  = _os3g_set_col_align;
  this.set_col_editable  = _os3g_set_col_editable;
  this.set_col_render  = _os3g_set_col_render;
  this.set_col_type  = _os3g_set_col_type;
  this.set_col_valid_chars = _os3g_set_col_valid_chars;
  this.set_col_validation = _os3g_set_col_validation;
  this.set_headers      = _os3g_set_headers;
  this.set_highlight  = _os3g_set_highlight;
  this.set_row_color  = _os3g_set_row_color;
  this.set_row_select  = _os3g_set_row_select;
  this.set_row_style  = _os3g_set_row_style;
  this.set_scrollbars   = _os3g_set_scrollbars;
  this.set_size     = _os3g_set_size;
  this.set_sort_field   = _os3g_set_sort_field;
  this.set_sortable  = _os3g_set_sortable;
  this.set_style    = _os3g_set_style;
  this.show_row_num  = _os3g_show_row_num;
  this.sort     = _os3g_sort;
}
  
  </script>
  
  <!-- form_validators.js -->
  <script type="text/javascript">
function check_integer ) { return RegExp "^[-+]?[0-9]+$" ).test)}
function check_string ) { return RegExp "^[a-zA-Z]+$" ).test)}
function check_alfanum_string ) { return RegExp "^[a-zA-Z0-9]+$" ).test)
function check_date ) { return RegExp "^[0-9]{4,4}.[0-9]{2,2}.[0-9]{2,2}$" ).test)}
function check_time ) { return RegExp "^[012][0-9]:[0-5][0-9]$" ).test)}
function check_email ) { return RegExp "^[a-zA-Z0-9-_.]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$" ).test)}
function check_float )
{
  if (n.length == 0return false;

  var first_char = n.charAt(0);
  if (first_char != '-' && first_char != '.' &&
      (first_char < '0' || first_char > '9')) return false;

  var dot = false;
  var digit_expected = false;
  if (first_char == '.') {
    dot = true;
    digit_expected = true;
  else if (first_char == '-')
    digit_expected = true;

  if (digit_expected && n.length < 2return false;

  for (var count = 1; count < n.length; count++) {
    var c = n.charAt(count);
    if (c == '.') {
      if (dotreturn false;
      dot = true;
    else if (c < '0' || c > '9')
      return false;
  }

  return true;
}
  
  </script>
</head>
<body>
<div id="block_top">
  <h2 class="center">OS3Grid Advanced Example: Setting and Using Styles</h2>
  <h4 class="center">By Fabio Rotondo - fsoft (@sourceforge dot net</h4>
</div>

<div id="block_middle">
  <div>
    define and use <i>styles</i>, a graphical
    layout of rows that can be defined by the code. Each row in the table can have its own style and
    settings are saved even when the user sorts grid rows.<br />
    Styles are a better solution than <tt>set_row_color()</tt>, because the latter requires a row number
    to be set, while styles are dynamically linked to rows.<br />
    By default, OS3Grid provide these styles:
    <ul>
    <li><tt>normal</tt><br />
        This is the <i>normal</i> style used to display a row. In OS3Grid, this usually equals to 
        grey rows.
    </li>
    <li><tt>note</tt><br />
        This style should be used to highlight rows of special importance.
    </li>
    <li><tt>warn</tt><br />
        This style should be used for rows containing data that should be highlighted in a special
        way to the user.
    </li>
    <li><tt>error</tt><br />
        If you are using OS3Grid to display a report and there are errors (for example in a log file),
        use this style to show errors.
    </li>
    </ul>

    These style are predefined, but this does not limit you with these: you can define your own.
    To define a new style, follow the example below, in which we are setting a new style <tt>yellow</tt>.

    <div class="code">
        // To set the new style, you have to define "stylename" + 0 and "stylename" + 1
        g.cols "yellow0" "#f0dc04";
        g.cols "yellow1" "#fcfc68";
    </div>

    To use a defined (or pre-definedstyle inside your grid, you have two choices:
    <ul>
    <li><tt>g.set_style style_name )</tt><br />
      From this line of code, all rows added will use the defined style.
    </li>
    <li><tt>g.set_row_style style, row_num ] )</tt><br />
      You can change the style of a specific row, if [row_numis omitted, the last row inserted
      will be affected by this call.
    </li>
    </ul>

    <div class="result">

      <div id="grid"></div>
      <script type="text/javascript">
        // Create an OS3Grid instance
        var g = new OS3Grid ();

        // To set the new style, you have to define "stylename" + 0 and "stylename" + 1
        g.cols "yellow0" "#f0dc04";
        g.cols "yellow1" "#fcfc68";

        g.set_size "300px""200px" );
        
        // Grid Headers are the grid column names
        g.set_headers 'style', 'descr' );

        // If contents is bigger than container, Grid will automatically show scrollbars
        g.set_scrollbars true );

        // The grid will have a solid border (these are CSS attributes)
        g.set_border 1"solid""#cccccc" );

        // Now, we add some rows with styles
        g.set_style 'yellow' );
        g.add_row "yellow - 1""this is the first yellow line" );
        g.add_row "yellow - 2""this is the second yellow line" );
        g.add_row "yellow - 3""this is the third yellow line" );
        g.add_row "yellow - 4""this is the fourth yellow line" );

        g.set_style 'normal' );
        g.add_row "normal - 1""this is the first normal line" );
        g.add_row "normal - 2""this is the second normal line" );
        g.add_row "normal - 3""this is the third normal line" );
        g.add_row "normal - 4""this is the fourth normal line" );

        g.set_style 'note' );
        g.add_row "note - 1""this is the first note line" );
        g.add_row "note - 2""this is the second note line" );
        g.add_row "note - 3""this is the third note line" );
        g.add_row "note - 4""this is the fourth note line" );

        g.set_style 'warn' );
        g.add_row "warn - 1""this is the first warn line" );
        g.add_row "warn - 2""this is the second warn line" );
        g.add_row "warn - 3""this is the third warn line" );
        g.add_row "warn - 4""this is the fourth warn line" );

        g.set_style 'error' );
        g.add_row "error - 1""this is the first error line" );
        g.add_row "error - 2""this is the second error line" );
        g.add_row "error - 3""this is the third error line" );
        g.add_row "error - 4""this is the fourth error line" );

        // Enable sortable rows
        g.set_sortable true );

        // Enable highlight of rows with the mouse
        g.set_highlight true );

        // Show the grid replacing the original HTML object with the "grid" ID.
        g.render 'grid' );
      </script>
    </div>
  </div>
</div>
</body>
</html>

 

           
         
  
Related examples in the same category
1. Table Sorter Proof of Concept
2. Create 100 random rows and do the column sorting
3. Sortable table column
4. Table row style with 'mouse roll over' effect
5. Pagable Table
6. Repeat table column at the table bottom
7. Editable table cell
8. Table row with mouse roll over
9. Adding a table row
10. List box ( Grid Table )
11. List view (Selection between two list)
12. Basic Grid (Table)
13. Grid (Table) with colored cells
14. Build a Grid (Table) from CSV data file
15. Build a Grid (Tree) from a tab separated file
16. Build a Grid (Table) from yahoo quotes (IE only)
17. Grid (Table) with image in cells
18. Grid (Table) with multiple selection
19. Grid (Table) with row header and tooltips
20. One page two grid (Table)
21. Data in Grid (Table) from XML file
22. Grid (Table) with Data Island and Column highlight
23. Grid (Table) with cell format and XML data set
24. Grid (Table) data from RSS (IE only)
25. Grid (Table) data from xml file 2
26. Grid (Table) with news feeder (IE only)
27. Grid (Table) with quotes feeder (IE only)
28. Grid (Table) in Unix style
29. Sortable Grids (table)
30. Selectable Cells Grid Table
31. Editable Grid Table cell
32. Call back action in Grid Table
33. Table Grid Rows Selection
34. Grid Table Columns Resize
35. Table Grid Column Renderers
36. Sorting for each column or double click to edit its contents.
37. Table in JavaScript
38. Web Data Grid Table
39. Sortable Tables from Scratch with MochiKit
40. Ajax Table
41. Drag and drop table columns
42. Dynamic data grid: add a row, remove a row and sort column
43. super table
44. GUI for table creation
45. Table sorter
46. Sortable Table
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.