Statement of the Problem
We needed to create a grid. Grid must have multilevel headers. The whole grid looks like:
-------------------------------
| | Group |
| Num |-----------------------|
| | Date | Text |
|------------------------------|
| 1 | 01.01.2000 | row 1 |
| 2 | 17.03.2000 | row 2 |
--------------------------------
For example, the types of data in the column must be:
- number - for "
num" column - date - for "
date" column - text - for "
text" column
Solution
We will use the AWeb library. The library allows you to create visual components, in this case this is grid. It is necessary to describe a header and data for the grid.
Method of Data Storage
When using the AWeb library, data is usually described as a tree structure. It does not matter whether there is nesting or not. List is a special kind of the tree. To create a list, you need to create the root element. Its' children describe list cells.
You can create a tree structure in 3 ways:
- By calling the constructor for the cell tree -
AWeb.Utils.TreeNode - Describing the tree in JSON format
- Describing the tree in XML format
Let us consider the second method. Trees can be named or not. In named trees, cell can be found by its name.
Named trees are described by the format:
{ name1 : { value : "value1", parentNode : "parent1" },
...
nameN : { value : "valueN", parentNode : "parentN" }
}
In which:
name1-nameN - is a cell name value - is a cell value parentNode - is a parent cell name. Can be undefined.
Not named trees are described by nested arrays:
[ { value : "value1", children : [ ... ] },
...
{ value : "valueN", children : [ ... ] }
]
In which:
value - is a cell name children - contain nested cells. Can be undefined.
Grid Header
Grid header must be named. Let's describe a header from an example with JSON format.
One cell of the tree describes a single cell in header.
{ col_num : { value : "Num" },
col_group : { value : "Group" },
col_date : { value : "Date", parentNode : "col_group" },
col_text : { value : "Text", parentNode : "col_group" }
}
It is not necessary to describe the root cell of the tree.
Grid Data
Grid lines can be either named or not. Let's make them not named. One cell line describes the grid. The value of the cell must contain the name of the column and the values for these columns.
[{ value : { col_num : 1, col_date : new Date(2000,0,1), col_text : "row1" } },
{ value : { col_num : 2, col_date : new Date(2000,2,17), col_text : "row2" } }
]
Grid and Data Types in Columns
Grid is created by using object AWeb.UI.Grid. It is possible to define grids' header and grids' data by functions AWeb.UI.Grid.loadCols and AWeb.UI.Grid.loadRows.
It's possible to define the column types by setting the property columnType for the selected column. In our example, the following types are used: "text", "date", "number".
The whole code is:
<!DOCTYPE HTML>
<html>
<head>
<title>Sample project</title>
<!--
<link rel="stylesheet" type="text/css" href="http://a-web.me/styles/default/a-web.css" >
<!--
<script type="text/javascript" src="http://a-web.me/scripts/a-web.js"></script>
</head>
<body>
<script>
function main() {
var grid = new AWeb.UI.Grid()
.loadCols({
col_num : { value : "Num" },
col_group : { value : "Group" },
col_date : { value : "Date", parentNode : "col_group" },
col_text : { value : "Text", parentNode : "col_group" }
}).loadRows([
{ value : { col_num : 1, col_date : new Date(2000,0,1), col_text : "row1" } },
{ value : { col_num : 2, col_date : new Date(2000,2,17), col_text : "row2" } }
]).appendTo( document.body ).update();
grid.columns['col_num'].columnType = "number";
grid.columns['col_date'].columnType = "date";
grid.columns['col_text'].columnType = "text";
grid.bestFit();
}
</script>
</body>
</html>
Other Articles About the Library
