|
JavaXT
|
|||||||||||||||||
DataGrid ClassScrollable table with a fixed header. Supports remote loading, sorting, and infinite scroll via HTTP.
Here's a simple example of how to instantiate a DataGrid that will render a list of users returned from a REST endpoint:
var grid = new javaxt.dhtml.DataGrid(parent, {
//Set style
style: config.style.table,
//Define columns
columns: [
{header: 'ID', hidden:true},
{header: 'Name', width:'100%'},
{header: 'Role', width:'240'},
{header: 'Enabled', width:'75', align:'center'},
{header: 'Last Active', width:'175', align:'right'}
],
//Set path to REST endpoint to get list of users
url: "/manage/users",
//Define function used to parse the response
parseResponse: function(request){
return JSON.parse(request.responseText);
},
//Define function used to render data for individual rows
update: function(row, user){
row.set('Name', user.fullname);
row.set('Role', user.role);
var status = user.status;
if (status===1){
row.set('Enabled', createElement("i", "fas fa-check"));
}
},
//Set flag to automatically load data once the component is rendered
autoload: true
}); Once the grid is instantiated you can call any of the public methods. You can also add event listeners by overriding any of the public "on" or "before" methods like this:
grid.onRowClick = function(row, e){
console.log(row.record);
}; ConstructorsUsed to instantiate this class
Config Optionsstyle Style config. See default styles in javaxt.dhtml.Table for a list of options. In addition to the table styles, you can also specify a checkbox style.
columns Used to define columns to display. Each entry in the array should include a "header" label (see example above) along with a "width". Note that one of the columns should have a width of 100%. Additional options include "align" and "field". If a "field" is provided it will be used to construct a "fields" parameter to that is sent to the server (see "fields" config). Fially, you can specify a checkbox column by setting the "header" to "x" (e.g. header: 'x'). If a checkbox column is defined, a checkbox will be created in the header and in individual rows. The checkbox is typically used to support multi-select operations.
payload Data to send in the body of the request. This parameter is optional. If payload is not null, the component executes a POST request.
post If true, and if the payload is empty, will sent params as a URL encoded string in a POST request. Otherwise the params will be appended to the query string in the request URL. Default is false.
limit Used to specify the page size (i.e. the maximum number records to fetch from the server at a time). Default is 50.
count If true, the server will be asked to return a total record count by setting the "count" parameter to true when requesting the first page. Otherwise, the count parameter is set to false. Note that the count is NOT required for pagination and is not used internally in any way. Rather it is for informational purposes only. Default is false.
autoload If true, the grid will automatically fetch records from the server on start-up. Default is false.
localSort If true, the grid will sort values in the grid locally using whatever data is available. If fetching data from a remote server, recommend setting localSort to false (default)
fields Optional list of field names used to specify which database fields should be returned from the server. If not provided, uses the "field" attributes in the column definition. If both are provided, the list of fields are merged into a unique list.
multiselect If true, the table will allow users to select multiple rows using control or shift key. Default is false (only one row is selected at a time).
getResponse Default method used to get responses from the server. Typically, you do not need to override this method.
payload
contentType
success
failure
parseResponse Default method used to parse responses from the server. Should return an array of rows with an array of values in each row. Example: [["Bob","12/30","$5.25"],["Jim","10/28","$7.33"]]
update Default method used to update a row with values. This method can be overridden to render values in a variety of different ways (e.g. different fonts, links, icons, etc). The row.set() method accepts strings, numbers, and DOM elements.
mask DOM element with custom show() and hide() methods. The mask is typically rendered over the grid control to prevent users from interacting with the grid during load events. It is rendered before load and is hidden after data is rendered. If a mask is not defined, a simple mask will be created automatically using the "mask" style config.
EventsonPageChange( currPage, prevPage ) Called whenever the table advances to the next page of records or scrolls to a previous page. onKeyEvent( keyCode, modifiers ) Called whenever a keyboard event is initiated from the table. onCheckbox( value, checked, checkbox ) Called whenever a client clicks on a checkbox, either in the header or one of the rows. Columns with checkboxes are defined in the "columns" config (e.g. header: 'x'), Public MethodsforEachRow( callback ) Used to traverse all the rows in the table using a callback function. The first argument in the callback is a DOM element with a record. Example:
grid.forEachRow(function(row){
console.log(row, row.record);
}); Note that you can return true in the callback function if you wish to stop processing rows. Example:
grid.forEachRow(function(row, content){
//Do something with the row
//Stop iterating once some contition is met
if (1>0) return true;
});
refresh( callback ) Used to clear the grid and reload the first page.
load( ) Used to load records from the remote store. Optionally, you can pass an array of records, along with a page number, to append rows to the table. scrollTo( obj ) Scrolls to the top of a page or to a row in the table
getSelectedRecords( key, callback ) Returns an array of selected records from the grid.
setSortIndicator( idx, sortDirection ) Used to update the sort indicator for a given column
|
|||||||||||||||||