Populate a grid from an HTML table
<!--
Apache License, Version 2.0
Revised from Rico 2.0 demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rico LiveGrid-Example 1</title>
<script src="rico21/src/prototype.js" type="text/javascript"></script>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<link href="rico21/examples/client/client/css/demo.css" type="text/css" rel="stylesheet" />
<script type='text/javascript'>
Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');
Rico.onLoad( function() {
var opts = {
frozenColumns: 1,
defaultWidth : 90,
useUnformattedColWidth: false,
columnSpecs : ['specQty'] // display first column as a numeric quantity
};
var buffer=new Rico.Buffer.Base($('ex1').tBodies[0]);
var ex1=new Rico.LiveGrid ('ex1', buffer, opts);
ex1.menu=new Rico.GridMenu();
});
</script>
</head>
<body>
<div id='explanation'>
This example demonstrates how to populate a grid from an HTML table.
In this case, the table whose data is to be loaded into the grid
has an id="ex1", and the table's body element is passed
to the buffer constructor which then loads the data.
<pre>
Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');
Rico.onLoad( function() {
var opts = {
frozenColumns: 1,
defaultWidth : 90,
useUnformattedColWidth: false,
columnSpecs : ['specQty'] // display first column as a numeric quantity
};
var buffer=new Rico.Buffer.Base($('ex1').tBodies[0]);
var ex1=new Rico.LiveGrid ('ex1', buffer, opts);
ex1.menu=new Rico.GridMenu();
});
</pre>
</div>
<p class="ricoBookmark"><span id="ex1_bookmark"> </span></p>
<table id="ex1" class="ricoLiveGrid" cellspacing="0" cellpadding="0">
<thead>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th><th>Column 6</th><th>Column 7</th><th>Column 8</th><th>Column 9</th><th>Column 10</th><th>Column 11</th><th>Column 12</th><th>Column 13</th><th>Column 14</th><th>Column 15</th></tr>
</thead><tbody>
<tr><td>1</td><td>Cell 1:2</td><td>Cell 1:3</td><td>Cell 1:4</td><td>Cell 1:5</td><td>Cell 1:6</td><td>Cell 1:7</td><td>Cell 1:8</td><td>Cell 1:9</td><td>Cell 1:10</td><td>Cell 1:11</td><td>Cell 1:12</td><td>Cell 1:13</td><td>Cell 1:14</td><td>Cell 1:15</td></tr>
<tr><td>2</td><td>Cell 2:2</td><td>Cell 2:3</td><td>Cell 2:4</td><td>Cell 2:5</td><td>Cell 2:6</td><td>Cell 2:7</td><td>Cell 2:8</td><td>Cell 2:9</td><td>Cell 2:10</td><td>Cell 2:11</td><td>Cell 2:12</td><td>Cell 2:13</td><td>Cell 2:14</td><td>Cell 2:15</td></tr>
<tr><td>3</td><td>Cell 3:2</td><td>Cell 3:3</td><td>Cell 3:4</td><td>Cell 3:5</td><td>Cell 3:6</td><td>Cell 3:7</td><td>Cell 3:8</td><td>Cell 3:9</td><td>Cell 3:10</td><td>Cell 3:11</td><td>Cell 3:12</td><td>Cell 3:13</td><td>Cell 3:14</td><td>Cell 3:15</td></tr>
<tr><td>4</td><td>Cell 4:2</td><td>Cell 4:3</td><td>Cell 4:4</td><td>Cell 4:5</td><td>Cell 4:6</td><td>Cell 4:7</td><td>Cell 4:8</td><td>Cell 4:9</td><td>Cell 4:10</td><td>Cell 4:11</td><td>Cell 4:12</td><td>Cell 4:13</td><td>Cell 4:14</td><td>Cell 4:15</td></tr>
<tr><td>5</td><td>Cell 5:2</td><td>Cell 5:3</td><td>Cell 5:4</td><td>Cell 5:5</td><td>Cell 5:6</td><td>Cell 5:7</td><td>Cell 5:8</td><td>Cell 5:9</td><td>Cell 5:10</td><td>Cell 5:11</td><td>Cell 5:12</td><td>Cell 5:13</td><td>Cell 5:14</td><td>Cell 5:15</td></tr>
<tr><td>6</td><td>Cell 6:2</td><td>Cell 6:3</td><td>Cell 6:4</td><td>Cell 6:5</td><td>Cell 6:6</td><td>Cell 6:7</td><td>Cell 6:8</td><td>Cell 6:9</td><td>Cell 6:10</td><td>Cell 6:11</td><td>Cell 6:12</td><td>Cell 6:13</td><td>Cell 6:14</td><td>Cell 6:15</td></tr>
<tr><td>7</td><td>Cell 7:2</td><td>Cell 7:3</td><td>Cell 7:4</td><td>Cell 7:5</td><td>Cell 7:6</td><td>Cell 7:7</td><td>Cell 7:8</td><td>Cell 7:9</td><td>Cell 7:10</td><td>Cell 7:11</td><td>Cell 7:12</td><td>Cell 7:13</td><td>Cell 7:14</td><td>Cell 7:15</td></tr>
<tr><td>8</td><td>Cell 8:2</td><td>Cell 8:3</td><td>Cell 8:4</td><td>Cell 8:5</td><td>Cell 8:6</td><td>Cell 8:7</td><td>Cell 8:8</td><td>Cell 8:9</td><td>Cell 8:10</td><td>Cell 8:11</td><td>Cell 8:12</td><td>Cell 8:13</td><td>Cell 8:14</td><td>Cell 8:15</td></tr>
<tr><td>9</td><td>Cell 9:2</td><td>Cell 9:3</td><td>Cell 9:4</td><td>Cell 9:5</td><td>Cell 9:6</td><td>Cell 9:7</td><td>Cell 9:8</td><td>Cell 9:9</td><td>Cell 9:10</td><td>Cell 9:11</td><td>Cell 9:12</td><td>Cell 9:13</td><td>Cell 9:14</td><td>Cell 9:15</td></tr>
<tr><td>10</td><td>Cell 10:2</td><td>Cell 10:3</td><td>Cell 10:4</td><td>Cell 10:5</td><td>Cell 10:6</td><td>Cell 10:7</td><td>Cell 10:8</td><td>Cell 10:9</td><td>Cell 10:10</td><td>Cell 10:11</td><td>Cell 10:12</td><td>Cell 10:13</td><td>Cell 10:14</td><td>Cell 10:15</td></tr>
</tbody></table>
</body>
</html>
Related examples in the same category