working jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>

JavaScript

var data = [
    {id: 1, text: 'row1'},
    {id: 2, text: 'row2'},
    {id: 3, text: 'row3'},
    {id: 4, text: 'row4'},
    {id: 5, text: 'row5'},
];
$("#grid").jqGrid({
    datatype: "local",
    height: "auto",
    colNames: ['Id', 'Text', 'edit'],
    colModel: [
        { name: 'id', key: true, sorttype: "int", width: 40 },
        { name: 'text' },
        { name: 'edit', align: 'center', sortable: false, width: 40,
         formatter: function () { return "<a href='#'>edit</a>"; } }
    ],
    caption: "Custom buttons",
    data: data,
    gridview: true,
    sortname: "id",
    beforeSelectRow: function (rowid, e) {
        var $self = $(this),
            $td = $(e.target).closest("td"),
            rowid = $td.closest("tr.jqgrow").attr("id"),
            iCol = $.jgrid.getCellIndex($td[0]),
            cm = $self.jqGrid("getGridParam", "colModel");
        if (cm[iCol].name === "edit" && e.target.tagName.toUpperCase() === "A") {
            alert('Edit id: ' + rowid);
            return false; // don't select the row on click
        }
        return true;
    }
});