How to specify row id using data option in jqgrid - jqgrid

Question

I am using jqgrid and tableToGrid plugin but found that it's relatively slow with a large table. So I would like to rewrite it using the jqgrid's data option instead of using the original addRowData method. However, I cannot find any reference about specifying the row id using the data option. The grid just generate the id starting from 1 but I would like to specific the id in my row of data.
Do I need to use localReader together to make it work? A sample piece of code will be appreciated.
Here's my grid declaration. (edited from the original tabletogrid)
jQuery(this).jqGrid(jQuery.extend({
datatype: "local",
data:data,
width: w,
colNames: colNames,
colModel: colModel,
multiselect: selectMultiple
//inputName: inputName,
//inputValueCol: imputName != null ? "__selection__" : null
}, options || {}));

Answer 1

OK I figured it out using localReader. Here's the modified tableToGrid with better performance.
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('input[type=checkbox]:first', jQuery(this));
var inputRadio = jQuery('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 rowobj = {};
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);
rowobj["id"] = rowId || data.length;
if (input.attr("checked")) {
rowChecked.push(rowId);
}
//row[colModel[rowPos].name] = input.attr("value");
row.push( input.attr("value"));
} else {
//row[colModel[rowPos].name] = jQuery(this).html();
row.push(jQuery(this).html());
}
rowPos++;
});
if(rowPos >0) { rowobj["cell"] = row; data.push(rowobj); }
});
// Clear the original HTML table
jQuery(this).empty();
// Mark it as jqGrid
jQuery(this).addClass("scroll");
jQuery(this).jqGrid(jQuery.extend({
datatype: "local",
data:data,
localReader: {
repeatitems: true,
cell: "cell",
id: "id"
},
gridview: true,
width: w,
colNames: colNames,
colModel: colModel,
multiselect: selectMultiple
//inputName: inputName,
//inputValueCol: imputName != null ? "__selection__" : null
}, options || {}));
// Set the selection
for (a = 0; a < rowChecked.length; a++) {
jQuery(this).jqGrid("setSelection",rowChecked[a]);
}
});
};