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>