This code is an ALPHA level release. Please help us work out the bugs and use at your own risk :)
- FooTable.Editable is a jQuery plugin for FooTable that makes all of your FooTables editable.
- FooTable.Editable requires jQuery
- Footable.Editable requires Footable
- FooTable.Editable is a Footable extensible plugin that makes all of your Footables editable. Simply add the "fooEditable" class to any th tag, and that column suddenly becomes editable.
- The plugin also transports FooTable data and changes via AJAX between the client and server in JSON format which should be suitable for just about any scnerio.
- All JSON updates are sent to the server via a dataHandlerURL: provided by the user.
- The dataHandlerURL can also respond back to the client with "Success", "Error", "Load", or "Update" including any JSON data or messages for the client.
- A special fooId class can be added to any th tag to ensure that Primary and Composite key fields are sent to the server with every transaction. These fooId fields can also be hidden using other standard footable data attributes.
- The data attribute (data-ft-buttons="Add,Delete") can be used to include "add" and / or "delete" buttons on each table row.
- Users can create a blank row for new records by simply marking the blank row with the class "fooNewRecord".
- Customer FooTable parsers can be applied to display values sent back from the server using the data-return-type= attribute.
- Finally, an ftEditable API is included to expose many of the internal functions included within the FooTable.Editable plugin providing advanced users with greater flexibility.
The best place to get started is the demo's folder. There are several html demo markups and a full ASP.net solution including a generic handler written in C#.
- Place a referece to footable.editable.js under footable.js.
- Place a referece to footable.editable-1.0.css under footable-0.1.css.
- If no dataHandlerURL is provided, the plugin operates in demo mode and posts alerts showing all JSON that would be transported between the client and the server.
FooTables are defined just like always, but can include a few new FooTable.Editable classes and data attributes:
<table id="tblFootable" class="footable">
<thead>
<tr>
<!--class="fooId" marks this row as the table's primary key-->
<!--Other Footable data attributes are used to hide the column from view-->
<th class="fooId" data-hide="all" data-ignore="true">
EmpId
</th>
<!--class="fooEditable" makes all the values in a column editable-->
<th class="fooEditable" data-class="expand">
First Name
</th>
<th class="fooEditable">
Last Name
</th>
<th class="fooEditable" data-hide="phone,tablet">
Job Title
</th>
<!--data-return-type="JSONDate" apply's a custom Parser to the value displayed-->
<!--A JSON formatted date /Date(1234....)/ would be displayed in dd/mm/yy format-->
<th class="fooEditable" data-hide="phone,tablet" data-return-type="JSONDate">
DOB
</th>
<th class="fooEditable" data-hide="phone">
Status
</th>
<!--data-ft-buttons is used to create add and/or delete buttons for each record-->
<th data-ft-buttons="Add,Delete" data-hide="phone, tablet"></th>
</tr>
</thead>
<tbody>
<!--class="fooNewRecord" defines a blank row for new records at the end of the table-->
<tr class="fooNewRecord">
<td></td>
<td>First</td>
<td>Last</td>
<td>Title</td>
<td>DOB</td>
<td>Active</td>
<tr>
</tbody>
</table>The FooTable.Editable plugin also includes a few new startup options:
$(function () {
$('#tblFootable').footable({
serverTableName: "Employees",
dataHandlerURL: "/FooTableHandler.ashx",
autoLoad: true
});
}); ftEditable Startup Options
- serverTableName - The name of the server table you wish to update.
- dataHandlerURL - The URL for the generic handler processing requests.
- autoLoad - Sends a "Load" request to the server each time the footable is created. The "Load" request fills up the table with data from the server.
Disclaimer!
The ftEditable API is not needed for the normal function of FooTable.Editable. The API is exposed for JavaScript ninjas who want to do things with FooTable.Editable that I may not have thought of yet. Consider the API as a last resort before digging into the source and changing it. You will also find that the documentation below is very helpful in understanding the source, since the API exposes most of the source functions. Good luck!
The ftEditable API can be used for more advanced FooTable.Editable transactions and table manipulations. All API functions can be accessed through the jQuery ftEditable function which returns the ftEditable object. The following example demonstrates using the ftEditable function to delete all rows from a footable and add any new rows contained in a javascript Array of dataRecords.
var ftEditable = $().ftEditable();
ftEditable.deleteAllRows('#tblFootable');
ftEditable.addRows('#tblFootable',dataRecords);Using the ftEditable object, a "Load" request is sent to the sever. If the request is successful, the server responds back with an array of JSON records containing data which is then loaded into the FooTable. This is the exact same command issued when the autoLoad: option is set to true.
var ftEditable = $().ftEditable();
ftEditable.processCommand('#tblFootable', 'Load');Disclaimer!
The ftEditable API is not needed for the normal function of FooTable.Editable. The API is exposed for JavaScript ninjas who want to do things with FooTable.Editable that I may not have thought of yet. Consider the API as a last resort before digging into the source and changing it. You will also find that the documentation below is very helpful in understanding the source, since the API exposes most of the source functions. Good luck!
- target - The DOM element generating the command. The target detemines what record / row / cell / button in the table data has triggered the command. The target also determines what record / row will be impacted by any server responses.
- command - Valid commands are "Load","Add","Update", and "Delete". These commands determine what required data is packaged in the updateRecord and sent to the server.
The processCommand() function generates a command from the client that:
- Creates a valid updateRecord that will be sent to the server.
- Calls the transportData() function sending the updateRecord to the server.
- Any server resposnse is also processed by processServerResponse() function indirectly called by transportData().
- target - The DOM element generating the command. The target detemines what record / row in the table data has changed. The target also determines what record / row will be impacted by any server responses.
- updateRecord - This is the valid JavaScript object containing the data transaction information that is transformed into a JSON string and then sent to the server via AJAX. This object is typically created by the processCommand() function.
The transportData() function:
- Transforms the updateRecord into a JSON string.
- Sends the updateRecord to the handler URL specified by dataHandlerURL.
- Calls the processServerResponse() function to process the respsonse send by the server.
-
target - The DOM element targeted by the server response. The target detemines what record / row in the table data has changed. The target also determines what record / row will be impacted by any server responses.
-
data - This is the response data sent by the server.
- data.response - must always contain a valid server response command ("Success", "Load", "Append", "Update", "Delete", "DeleteAll", or "Error")
- data.message - used to transmit specific messages, such as error message text, from the server.
- data.responseData - contains any fields and values that are needed for the transaction.
-
updateRecord - This is original client updateRecord that generated the response.
The processServerResponse() function:
Uses a valid data.response command to process the server response.
//Handle processing AJAX server responses.
if (data.response == "Success") {
//Do nothing!
}
else if (data.response == "Load") {
deleteAllRows(table);
addRows(table, data.responseData);
}
else if (data.response == "Append") {
addRows(table, data.responseData);
}
else if (data.response == "Update") {
updateRow(curRow, data.responseData);
}
else if (data.response == "Delete") {
deleteRow(curRow);
}
else if (data.response == "DeleteAll") {
deleteAllRows(table);
}
else if (data.response == "Error") {
alert("The update was not successful\r\n" + data.message);
if (updateRecord.command == 'Update') {
//if a cell update fails, revert back to the previous value.
var updateIndex = $.data(w.footable
, $(ft.table).attr('id') + '_colNames').indexOf(updateRecord.updatedFieldName);
$(target).closest('tr').find('td').eq(updateIndex)
.text(updateRecord.updatedFieldOldValue);
}
}
else {
alert('Invalid server response! Response recieved: ' + data.response);
}- row - A reference to the row to be updated.
- rowData - Valid JavaScript object with valid field name properties and values.
The updateRow() function:
- Locates the row to be updated.
- Updates every field in the row that is contained within the rowData object to the value contained within the rowData object.
- row - A reference to the row to be deleted.
- The DeleteRow() function:
- Deletes the row at the location provided in the row variable.
- table - A reference to the table containing the rows to be deleted.
- The deleteAllRows() function:
- Deletes all rows in the table provided in the table variable.
- table - A reference to the table that should be checked for a new record row.
- The checkNewEmptyRecord() function:
- Check a table for a new record row.
- Clones a new record row and adds it to the bottom of the table provided, if one does not exist.
- table - A reference to the table that should be checked for a new record row.
- tableRows - A JavaScript Array of table records.
The addRows() function:
- Converts a JavaScript Array of table rows into a valid set of tr tags and adds them to the table provided.
- Checks for any required fooButtons and adds them to each row.