JavaScript DHTML/Rico/Grid
Populate a grid from a javascript array.
<source lang="html4strict">
<!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/css/demo.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> Rico.loadModule("LiveGrid","LiveGridMenu","greenHdg.css"); Rico.onLoad( function() {
var myData = [
[1,"Cell 1:2","Cell 1:3","Cell 1:4","Cell 1:5"],
[2,"Cell 2:2","Cell 2:3","Cell 2:4","Cell 2:5"],
[3,"Cell 3:2","Cell 3:3","Cell 3:4","Cell 3:5"],
[4,"Cell 4:2","Cell 4:3","Cell 4:4","Cell 4:5"]
];
var opts = {
useUnformattedColWidth: false,
defaultWidth : 90,
visibleRows : "data",
frozenColumns: 1,
columnSpecs : [{Hdg:"Column 1",type:"number", decPlaces:0, ClassName:"alignright"},
{Hdg:"Column 2"},
{Hdg:"Column 3"},
{Hdg:"Column 4"},
{Hdg:"Column 5"}]
};
var buffer=new Rico.Buffer.Base();
buffer.loadRowsFromArray(myData);
var ex1=new Rico.LiveGrid ("ex1", buffer, opts);
ex1.menu=new Rico.GridMenu();
}); </script>
</head> <body>
This example demonstrates how to populate a grid from a javascript array.
var myData = [
[1,"Cell 1:2","Cell 1:3","Cell 1:4","Cell 1:5"],
[2,"Cell 2:2","Cell 2:3","Cell 2:4","Cell 2:5"],
[3,"Cell 3:2","Cell 3:3","Cell 3:4","Cell 3:5"],
[4,"Cell 4:2","Cell 4:3","Cell 4:4","Cell 4:5"]
];
var buffer=new Rico.Buffer.Base();
buffer.loadRowsFromArray(myData);
</body> </html>
</source>
Populate a grid from an HTML table
<source lang="html4strict">
<!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>
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.
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();
});
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | Column 8 | Column 9 | Column 10 | Column 11 | Column 12 | Column 13 | Column 14 | Column 15 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell 1:2 | Cell 1:3 | Cell 1:4 | Cell 1:5 | Cell 1:6 | Cell 1:7 | Cell 1:8 | Cell 1:9 | Cell 1:10 | Cell 1:11 | Cell 1:12 | Cell 1:13 | Cell 1:14 | Cell 1:15 |
| 2 | Cell 2:2 | Cell 2:3 | Cell 2:4 | Cell 2:5 | Cell 2:6 | Cell 2:7 | Cell 2:8 | Cell 2:9 | Cell 2:10 | Cell 2:11 | Cell 2:12 | Cell 2:13 | Cell 2:14 | Cell 2:15 |
| 3 | Cell 3:2 | Cell 3:3 | Cell 3:4 | Cell 3:5 | Cell 3:6 | Cell 3:7 | Cell 3:8 | Cell 3:9 | Cell 3:10 | Cell 3:11 | Cell 3:12 | Cell 3:13 | Cell 3:14 | Cell 3:15 |
| 4 | Cell 4:2 | Cell 4:3 | Cell 4:4 | Cell 4:5 | Cell 4:6 | Cell 4:7 | Cell 4:8 | Cell 4:9 | Cell 4:10 | Cell 4:11 | Cell 4:12 | Cell 4:13 | Cell 4:14 | Cell 4:15 |
| 5 | Cell 5:2 | Cell 5:3 | Cell 5:4 | Cell 5:5 | Cell 5:6 | Cell 5:7 | Cell 5:8 | Cell 5:9 | Cell 5:10 | Cell 5:11 | Cell 5:12 | Cell 5:13 | Cell 5:14 | Cell 5:15 |
| 6 | Cell 6:2 | Cell 6:3 | Cell 6:4 | Cell 6:5 | Cell 6:6 | Cell 6:7 | Cell 6:8 | Cell 6:9 | Cell 6:10 | Cell 6:11 | Cell 6:12 | Cell 6:13 | Cell 6:14 | Cell 6:15 |
| 7 | Cell 7:2 | Cell 7:3 | Cell 7:4 | Cell 7:5 | Cell 7:6 | Cell 7:7 | Cell 7:8 | Cell 7:9 | Cell 7:10 | Cell 7:11 | Cell 7:12 | Cell 7:13 | Cell 7:14 | Cell 7:15 |
| 8 | Cell 8:2 | Cell 8:3 | Cell 8:4 | Cell 8:5 | Cell 8:6 | Cell 8:7 | Cell 8:8 | Cell 8:9 | Cell 8:10 | Cell 8:11 | Cell 8:12 | Cell 8:13 | Cell 8:14 | Cell 8:15 |
| 9 | Cell 9:2 | Cell 9:3 | Cell 9:4 | Cell 9:5 | Cell 9:6 | Cell 9:7 | Cell 9:8 | Cell 9:9 | Cell 9:10 | Cell 9:11 | Cell 9:12 | Cell 9:13 | Cell 9:14 | Cell 9:15 |
| 10 | Cell 10:2 | Cell 10:3 | Cell 10:4 | Cell 10:5 | Cell 10:6 | Cell 10:7 | Cell 10:8 | Cell 10:9 | Cell 10:10 | Cell 10:11 | Cell 10:12 | Cell 10:13 | Cell 10:14 | Cell 10:15 |
</body> </html>
</source>
