Online Book Reader

Home Category

JQuery_ Novice to Ninja - Earle Castledine [130]

By Root 1165 0
rows

var reveal = function (current) {

$back.removeClass("paging-disabled");

$next.removeClass("paging-disabled");

$rows

.hide()

.slice(current * pageLength, current * pageLength + pageLength)

.show();

$nav.find("a.paging-this b").text(current + 1);

}


reveal starts by clearing the disabled classes, so that our buttons avoid becoming stranded in a disabled state. We then use the slice method again to select the correct rows to display.

Note: Nested Functions

The structure we’ve used here is a little odd—but when you think about it, it’s straightforward: we’ve nested a function declaration inside another function. All this does is restrict the scope of the function (see the section called “Scope” in Chapter 6), so it can only be called from within its parent function. Why is this a good idea? In this case our function has no purpose outside its parent, and placing it in a wider scope would only put it at greater risk of conflicting with other function or variable names.

Editing a Row

We’ve already handled inline editing on a single element, but what if you want to make an entire table editable? We’ll add editing functionality to the data grid by inserting an Edit button at the end of each row, turning that entire row of cells into input elements, as shown in Figure 8.8.

Figure 8.8. Editable rows in action

The cells that contain your tabular data provide an excellent opportunity to store information as we manipulate the markup; this is actually a trick we used in our form controls. What we’ve yet to experience, though, is a row element to group our work area. Let’s see how to use it:

chapter_08/09_editable_table_cells/index.html (excerpt)

…


Looks quite normal, right? And so it should, as all the editable features will be added progressively—the better to keep your visitors happy and coming back for more! And there’s another payoff: by not including any of the editing controls in the table’s HTML, we can easily add any number of rows to it, relying on jQuery to do our heavy lifting.

We’ll start with a setup method, to initialize our table and add the required buttons:

chapter_08/09_editable_table_cells/script.js (excerpt)

TABLE.formwork = function(table) {

var $tables = $(table);

$tables.each(function () {

var _table = $(this);

_table

.find('thead tr')

.append($('

'));

_table

.find('tbody tr')

.append($('

'))

});

$tables.find('.edit :button').live('click', function(e) {

TABLE.editable(this);

e.preventDefault();

});

}


Our TABLE.formwork method looks for the selector we pass in, and then the rows in the thead and tbody, adding an extra edit cell to each. The thead cell is empty, but it’s there to retain the table’s column structure, and the tbody addition holds the button that switches the row into edit mode. Even though we know that the buttons exist prior to attaching our click event, event delegation through live is the way of the future. This is why we’re using it to ensure that no matter how we move our buttons around, remove them, or reinstate them, the click handlers will stay in place.

The other point to remember here is that we’re applying the live method outside the each loop. By applying it to $tables outside the loop, rather than _table inside, we ensure that the event listener is only added once. We achieve the full effect, but our code runs faster. And ninjas love fast code!

Now comes the good part. We want our buttons to work in two states—an edit mode and a save mode—and we want all the cells other than our button-containing cells to become editable. Here’s how we’re going to do it:

chapter_08/09_editable_table_cells/script.js (excerpt)

TABLE.editable = function (button)

®Online Book Reader

IDNameOccupationApprox. LocationPrice
203AJohny StardustFront-manLos Angeles$39.95
 ↵value="Edit"/>