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: 250,
    colNames: ['Id', 'Text', 'edit'],
    colModel: [
        { name: 'id', index: 'id', sorttype: "int" },
        { name: 'text', index: 'text' },
        { name: 'edit', index: 'edit', align: 'center', sortable: false, width: '40px' }
    ],
    caption: "Custom buttons",
    data: data,
    afterInsertRow: function(id, currentData, jsondata) {
        var button = "<a class='gridbutton' data-id='"+id+"' href='#'>edit</a>";
        $(this).setCell(id, "edit", button);
    },
    loadComplete: function(data) {
        $(".gridbutton").on('click', function(e) {
           e.preventDefault();
           alert('Edit id: ' + $(this).data("id"));
        });
    }
});