jQuery Grid Plugin - jqGrid

<div id='basic-modal'><h2>Basic Modal Dialog</h2>
    <a href='#' class='basic'>Demo</a>
</div>
<div id="basic-modal-content">
    <h3>Basic Modal Dialog</h3>
    <table id="list4" class="scroll" cellpadding="0" cellspacing="0"></table>
</div>

<script type="text/javascript">

    $(document).ready(function()
    {
       
       
        $('#basic-modal  a.basic').click(function (e)
        {
            e.preventDefault();
            $("#list4").GridUnload();
            var gridimgpath = '/css/ui-lightness/images';
            $("#list4").jqGrid({ datatype: "local", height: 250,
                colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                colModel:[
                    {name:'id',index:'id', width:60, sorttype:"int"},
                    {name:'invdate',index:'invdate', width:90, sorttype:"date"},
                    {name:'name',index:'name', width:100},
                    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
                    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
                    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
                    {name:'note',index:'note', width:150, sortable:false} ],
                imgpath: gridimgpath, multiselect: true, caption: "Manipulating Array Data" });
            var mydata = [
                {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"} ];

            for(var i=0;i<=mydata.length;i++)
                jQuery("#list4").addRowData(i+1,mydata[i]);

            $('#basic-modal-content').modal();

        });

    });

</script>