/* Transform a table to a jqGrid. Peter Romianowski If the first column of the table contains checkboxes or radiobuttons then the jqGrid is made selectable. */ // Addition - selector can be a class or id function tableToGrid(selector, options) { jQuery(selector).each(function() { if(this.grid) {return;} //Adedd from Tony Tomov // This is a small "hack" to make the width of the jqGrid 100% jQuery(this).width("99%"); var w = jQuery(this).width(); // Text whether we have single or multi select var inputCheckbox = jQuery('tr td:first-child input[type=checkbox]:first', jQuery(this)); var inputRadio = jQuery('tr td:first-child input[type=radio]:first', jQuery(this)); var selectMultiple = inputCheckbox.length > 0; var selectSingle = !selectMultiple && inputRadio.length > 0; var selectable = selectMultiple || selectSingle; //var inputName = inputCheckbox.attr("name") || inputRadio.attr("name"); // Build up the columnModel and the data var colModel = []; var colNames = []; jQuery('th', jQuery(this)).each(function() { if (colModel.length === 0 && selectable) { colModel.push({ name: '__selection__', index: '__selection__', width: 0, hidden: true }); colNames.push('__selection__'); } else { colModel.push({ name: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'), index: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'), width: jQuery(this).width() || 150 }); colNames.push(jQuery(this).html()); } }); var data = []; var rowIds = []; var rowChecked = []; jQuery('tbody > tr', jQuery(this)).each(function() { var row = {}; var rowPos = 0; jQuery('td', jQuery(this)).each(function() { if (rowPos === 0 && selectable) { var input = jQuery('input', jQuery(this)); var rowId = input.attr("value"); rowIds.push(rowId || data.length); if (input.is(":checked")) { rowChecked.push(rowId); } row[colModel[rowPos].name] = input.attr("value"); } else { row[colModel[rowPos].name] = jQuery(this).html(); } rowPos++; }); if(rowPos >0) { data.push(row); } }); // Clear the original HTML table jQuery(this).empty(); // Mark it as jqGrid jQuery(this).addClass("scroll"); jQuery(this).jqGrid(jQuery.extend({ datatype: "local", width: w, colNames: colNames, colModel: colModel, multiselect: selectMultiple //inputName: inputName, //inputValueCol: imputName != null ? "__selection__" : null }, options || {})); // Add data var a; for (a = 0; a < data.length; a++) { var id = null; if (rowIds.length > 0) { id = rowIds[a]; if (id && id.replace) { // We have to do this since the value of a checkbox // or radio button can be anything id = encodeURIComponent(id).replace(/[.\-%]/g, "_"); } } if (id === null) { id = a + 1; } jQuery(this).jqGrid("addRowData",id, data[a]); } // Set the selection for (a = 0; a < rowChecked.length; a++) { jQuery(this).jqGrid("setSelection",rowChecked[a]); } }); };