New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
DHTMLGoodies Grid
Demo with remote data | Demo with static data
Licensing
This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.
Download
You can download the DHTML Goodies Grid script from here.
Demo
- Click on column headings to sort
- Hold mouse down on column header to rearrange
- Use menu (top right corner of columns and top right corner of widget) to show/hide columns
- Place mouse pointer between columns to resize
- Move mouse pointer to the bottom edge to resize the Grid.
Configuration
Include files:
You need to include the following files:
<script type="text/javascript" src="js/external/mootools-core-1.3-full-compat.js"></script> <script type="text/javascript" src="js/dg-grid-all.js"></script> <link rel="stylesheet" href="css/grid.css" type="text/css">
Creating a Grid
You create a new grid by calling DG.Grid with a config object.
var grid = new DG.Grid({
...
...
});
How to build the Config object
This is an overview of the config object:
General properties
- title: (string) : Title inside title bar above the grid
- height: (number) : Height of the grid
- minHeight: (number) : Minimum height of the grid (if behaviour.resizable is set to true)
- maxHeight: (number) : Maximum height of the grid (if behaviour.resizable is set to true)
- stretch: (true | false) : True to let last column fill up remaining space of the grid.
- icon: (string/url) : Path to icon shown in the title bar.
- titleBar: (boolean) : True to have a title bar, false to hide the title bar.
els
Code example:
els : {
parent : 'gridContainer'
}
els.parent is used to specify where to render the grid. In this example, the grid will be inserted inside <div id="gridContainer"></div> on my page.
data
Data can be sent to the grid static, by using the "data" property of remote from the server by specifying a value for remote.data
This is an example of static data:
var grid = new DG.Grid({
...
...
data : [
{
firstname : 'John',
lastname : 'Doe',
zipcode : 'AF-2034'
},
{
firstname : 'Anna',
lastname : 'Doe',
zipcode : 'ZA-12323'
}
]
});
Here, we have an array of two people. A person is described by keys and values, example: key "firstname" with value "John".
Data can also be loaded from the server. To do this, you need to specify an url, example:
var grid = new DG.Grid({
...
...
remote : {
url : 'datasource/get-data.php',
params : { 'param1' : 'value1' }
}
});
In this example, an Ajax request will be sent to datasource/get-data.php along with the optional parameters specified in the "params" object.
The "remote" object also supports the attribute "refreshInterval" which is the number of seconds between each reload of data from server. This is default turned off.
get-data.php on the server should return data in this format:
{
data : [
{
firstname : 'John',
lastname : 'Doe',
zipcode : 'AF-2034'
},
{
firstname : 'Anna',
lastname : 'Doe',
zipcode : 'ZA-12323'
}
]
}
columnConfig
The "columnConfig" Array is used to specify how to handle the data sent to the grid.
Example of a columnConfig object for the data above:
columnConfig : [
{
resizable : false,
width : 40,
sortable : false,
txt : 'View',
event : 'viewPerson',
movable : false
},
{
width : 120,
key : 'firstname',
heading : 'First name',
sortable : true,
sortWith : 'lastname'
},
{
width : 120,
key : 'lastname',
sortable : true,
heading : 'Last name',
sortWith : 'firstname'
},
{
width : 50,
key : 'zip',
sortable : true,
heading : 'Zip Code',
hidden : true,
removable : true
}
]
With this config, we will display a link in the first column, first name in the second column and last name in the third column. Zip code will initially be hidden since "hidden" is set to true.
When configuration a column, you have access to these properties:
- heading: (string): Text for the column heading.
- key: (string): Reference to key in the data object
- width: (number): Width of column in pixels
- minWidth: (number): Minimum width of column (Optional)
- maxWidth: (number): Maximum width of column (Optional)
- movable: (true | false): True to make this column movable (Drag and drop)
- removable: (true | false): True to be able to remove the column.
- sortable: (true | false): True to make this column sortable
- sortWith: (key): Use a second key when sorting. If two values are equal (Example: Two persons have the last name "Smith"), the value of the second key will determine how they are sorted. (Smith, Anna will appear before Smith, Jeffrey)
- txt: (string): Static text to display in the column. Example: The string "View" for the first column above.
- event: (string): Name of a event to fire when clicking on the cell. Example: "viewPerson" for the "view" column above.
- align: ("right"): Specify right if you want to right align text. Only supported arguments are "left" and "right"
- renderer: (function): A function used to render values for the cells in this column. Example:
renderer : function(val, dataRecord){
if(val == 0){
return val;
}else if(val > 0){
return '<span style="color:red">' + val + '</span>';
}else{
return '<span style="color:green">' + val + '</span>';
}
} Instead of showing the value directly, the grid will instead show the value returned by this function. If the value sent to this function is 5, it will be displayed in a red color. If it is -2, it will be displayed in green.
The data record will be sent to the renderer function as second argument.
Listenes
Example of a listeners object:
listeners : {
'viewPerson' : viewPlayer,
'renderdata' : function(obj, gridObj){
gridObj.setStatusText('Number of players ' + gridObj.getCountRows());
},
'add' : function(obj, gridObj){
gridObj.setStatusText('Number of players ' + gridObj.getCountRows());
},
'click' : clickOnData,
'dblclick' : dblClickOnData
}
Inside the listeners object, you specify function to call when an event is fired. The script supports the events below in addition to the ones you have defined in the columnConfig object.
- add : Triggered when you add data to the widget
- load : Triggered when data has been loaded from the server
- click : Triggered when you click on a data cell.
- dblclick : Triggered when you double click on a data cell.
- renderdata : This event will be triggered every time data is rendered. This will also happen when data is re-rendered after sorting a column.
Behaviour:
The behaviour object specifies behaviours of the grid widget. These are the available attributes :
- minimizable : (true | false) : True if you want to be able to minimize/maximize the grid.
- closable : (true | false) : True if you want to be able to close/destroy grid.
- resizable : (true | false) : True if you want to be able to vertically resize the grid.
- resizable : (true | false) : True if you want to be able to vertically resize the grid.
Code example:
behaviour : {
resizable : true,
closable : false
}
defaultSort
defaultSort can be used to specify how to initially sort the grid.
Code example:
defaultSort : {
key : 'lastname',
direction : 'asc'
},
With this code, the grid will be initially sorted by "lastname" in ascending order. If you want to sort in descending order use "desc" instead of "asc".
Public methods
- setTitle(string) : Set new title for the title bar
- getConfigObject : This will return an up-to-date config object for the Grid, i.e. the object you can pass to the constructor of DG.Grid(). This may be useful in case you want to preserve the state of the Grid to the next time user visits the page.
- setStatusText(String) : Set new title for the status bar.
- showStatusIcon(String / url) : Show icon in status bar.
- hideStatusIcon() : Hide status bar icon.
CSS Layout
You can change the layout of the grid by modifying CSS classes.
CSS Selectors:
- .DG-grid-data-cell : CSS for data cells
- .DG-grid-data-odd-row : CSS for odd rows in the table
- .DG-grid-data-even-row : CSS for even rows in the table
- .DG-grid-header-container: CSS for the grid headers
- .DG-grid-header-cell: CSS for the a header cell
- .DG-grid-header-cell-over: Mouse over effect for header cell
- .DG-grid-data-cell-menu: CSS class for the menu at the right hand side of column headers.
- .DG-dashboard-item-titlebar: CSS class for the title bar.
- .DG-dashboard-item-titlebar-controls: CSS class for the button container at top right side of title bar.
- .DG-grid-movable-insertion-marker: When moving a column(Drag and Drop), an element with this class is used to indicate where the column will be inserted.
For more info, open css/grid.css in a text editor.
Complete code example
var grid = new DG.Grid({
title : 'Grid demo',
height : 400,
els : {
parent : 'gridContainer'
},
behaviour : {
resizable : false,
closable : false,
minimizable : false
},
listeners : {
'viewPerson' : viewPerson,
'load' : function(obj, gridObj){
gridObj.setStatusText('Count: ' + gridObj.getCountRows());
},
'add' : function(obj, gridObj){
gridObj.setStatusText('Count: ' + gridObj.getCountRows());
},
'preview' : previewElement,
'click' : clickOnData,
'dblclick' : dblClickOnData
},
stretch : true,
defaultSort : {
key : 'score',
direction : 'asc'
},
statusBar : {
visible : true
},
columnConfig : [
{
resizable : false,
width : 40,
sortable : false,
txt : 'View',
event : 'viewPerson',
movable : false
},
{
width : 120,
key : 'firstname',
heading : 'First name',
sortable : true,
sortWith : 'lastname'
},
{
width : 120,
key : 'lastname',
sortable : true,
heading : 'Last name',
sortWith : 'firstname'
},
{
width : 90,
hidden : true,
key : 'zip',
sortable : true,
removable : true,
heading : 'Zip code'
}
],
remote : {
url : 'scripts/dhtmlgoodies-grid/datasource/grid-data.php',
pleaseWaitMessage : 'Loading content...'
}
});
Convert plain HTML Tables to Grid
If you want to convert existing HTML Tables into a grid, include the file grid-autoload.js into your page:
<script type="text/javascript" src="js/grid-autoload.js"></script>
And assign the tables you wish to convert to the CSS class "table-dg-grid". Example:
<table id="myTable" class="table-dg-grid" width="500" gridHeight="400">
You can use the optional gridHeight property as shown above to set a fixed height for the grid
Gracias
'click' : function (obj) {alert("data "+obj);} It says [object Object]. Please help me to get the cell value.
Post your comment
Comment preview: