108 lines
3.6 KiB
JavaScript
108 lines
3.6 KiB
JavaScript
"use strict";
|
|
|
|
var LinkedTable;
|
|
|
|
+function($) {
|
|
LinkedTable = function(element, options) {
|
|
var _this = this;
|
|
this.$element = $(element);
|
|
this.options = $.extend({}, LinkedTable.DEFAULTS, options);
|
|
this.$selectedRow = null;
|
|
this.selectionHandler = function(event) {
|
|
$(this).addClass(_this.options.selectionCSS).siblings().removeClass(_this.options.selectionCSS);
|
|
_this.$selectedRow = $(this);
|
|
};
|
|
};
|
|
|
|
LinkedTable.DEFAULTS = {
|
|
url: '', //The absolute or relative path to use to query the data. Server is expected to respond with a JSON array of objects.
|
|
attr: 'data-key-name',
|
|
selectionCSS: 'selected',
|
|
selection: 'row', //Currently only row is supported.
|
|
postAddRowHandler: null, //Optional function that is passed the jquery table row and the data object sent by the server for that row. Allows post processing of the row prior to display.
|
|
parameters: null //Optional function that returns an object, or an object whose attributes are passed to the URL as parameters.
|
|
};
|
|
|
|
LinkedTable.prototype.getSelectedRow = function() {
|
|
return this.$selectedRow;
|
|
};
|
|
|
|
//A function that will clean and rebuild the table displaying all the users.
|
|
//Note that each row of the table will have a data element attached to the table row. The key will be "model" and the value will be the object sent by the server.
|
|
LinkedTable.prototype.refresh = function() {
|
|
var _this = this;
|
|
var table = this.$element;
|
|
var thead = table.find("thead tr");
|
|
var tbody = table.find("tbody");
|
|
var selection = this.options.selection;
|
|
var attr = this.options.attr;
|
|
var selectionHandler = this.selectionHandler;
|
|
var params;
|
|
|
|
if(thead.length == 0) {
|
|
return;
|
|
}
|
|
|
|
//Empty or Create the table body.
|
|
if(tbody.length != 0) {
|
|
//Remove the row selection handler.
|
|
if(selection == 'row') this.$element.off('click', 'tbody tr', selectionHandler);
|
|
//Empty the table of data.
|
|
tbody.empty();
|
|
}
|
|
else {
|
|
tbody = $("<tbody></tbody>");
|
|
tbody.appendTo(table);
|
|
}
|
|
|
|
if(typeof this.options.parameters == 'function') {
|
|
params = this.options.parameters();
|
|
|
|
//Must be an object.
|
|
if(typeof params != 'object') {
|
|
params = {};
|
|
}
|
|
}
|
|
else if(typeof this.options.parameters == 'object') {
|
|
params = this.options.parameters;
|
|
}
|
|
else {params = {};}
|
|
|
|
$.getJSON(this.options.url, params, function(data) {
|
|
var headers = thead.children();
|
|
var attributes = [];
|
|
|
|
//Read the table headers to get the data object keys.
|
|
for(var headerIndex = 0; headerIndex < headers.length; headerIndex++) {
|
|
var nextHeader = headers[headerIndex];
|
|
|
|
attributes[headerIndex] = $(nextHeader).attr(attr);
|
|
}
|
|
|
|
//Add the table data.
|
|
for(var dataIndex = 0; dataIndex < data.length; dataIndex++) {
|
|
var rowData = data[dataIndex];
|
|
var row = $("<tr></tr>");
|
|
|
|
row.appendTo(tbody);
|
|
//Save the model attached to the table row. Can be retrieved later to get the model sent by the server.
|
|
row.data("model", rowData);
|
|
|
|
for(var attributeIndex = 0; attributeIndex < attributes.length; attributeIndex++) {
|
|
var attribute = attributes[attributeIndex];
|
|
var cellData = rowData[attribute];
|
|
|
|
row.append("<td>" + cellData + "</td>");
|
|
}
|
|
|
|
if(_this.options.postAddRowHandler) {
|
|
//Call the optional handler after adding the row, passing the jquery row object, and the row data object sent by the server. Allows post processing on the row (adding classes to the row for example).
|
|
_this.options.postAddRowHandler(row, rowData);
|
|
}
|
|
}
|
|
|
|
//Setup the row selection handler.
|
|
if(selection == 'row') table.on('click', 'tbody tr', selectionHandler);
|
|
});
|
|
}
|
|
}(jQuery); |