|
JavaXT
|
|||||||||||||||||
DataGrid ClassCustom grid control based on javaxt.dhtml.Table. Supports remote loading, sorting, and infinite scroll.
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, {
style: config.style.table,
url: "/manage/users",
parseResponse: function(request){
return JSON.parse(request.responseText);
},
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'}
],
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"));
}
},
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
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.
limit Used to specify the page size (i.e. the maximum number records to fetch from the server at a time)
count If true, the server will be asked to return a total record count. This is a legacy feature and is NOT required for pagination.
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.
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.
EventsPublic MethodsforEachRow( callback ) Used to traverse all the rows in the table and extract contents of each cell. Example:
grid.forEachRow(function(row, content){
console.log(row, row.record, content);
});
Optional: return true in the callback function if you wish to stop processing rows.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
|
|||||||||||||||||