Table of Contents

Description

Convert existing html table to grid.

Author:

Peter Romianowski

Installation

In order to use this module you should mark the Table to Grid (in Other modules) when you download the grid. For more information refer to Download.
For Developers - this is the grid.tbltogrid.js in the src directory.

Calling Convention:

tableToGrid(selector, options)
This is function and not a method

where

  • selector(string) can be either the table's class or id
  • options is array with grid options

The html table should have the following structure: 

<table class="mytable"> (or <table id="mytable">) 
  <tr> 
     <th> header 1 </th> 
     <th> header 2 </th> 
     ... 
  </tr> 
  <tbody> 
    <tr> 
      <td> data 1 </td> 
      <td> data 1 </td> 
      ... 
    </tr> 
    <tr> 
      ... 
    </tr> 
    .... 
  </tbody> 
<table>

Discussion

James Nail, 2010/10/22 20:17

Above it says: “selector(string) can be either the table's class or id”

Using the class as the selector does work, but only if the table has an id.

I tried the above example using the class selector (code posted below) and it did not work, as it generated the following js error (in Google Chrome):

» Uncaught Syntax error, unrecognized expression: # jquery-1.4.2.min.js:75

Upon adding an id to the table, everything was fine.

Here's the code of my failing test: 

<table class="table-to-grid">
    <tr>
        <th>header 1</th>
        <th>header 2</th>
    </tr>
    <tbody>
        <tr>
            <td>data 1</td>
            <td>data 1</td>
        </tr>
        <tr>
            <td>data 2</td>
            <td>data 2</td>
        </tr>
    </tbody>
</table>

javascript (before end of html body): 

$(function () {
    tableToGrid(".table-to-grid", {});
});
Webmaster Grumpy, 2011/12/22 22:18

Try

$(function () { tableToGrid(”#table-to-grid”, {}); });

You could leave a comment if you were logged in.

QR Code
QR Code wiki:table_to_jqgrid (generated for current page)