How should jquery used in this plugin to Add,Edit & Delete?? Suggestions Please..

 <html>
 <head>
 <title>Manipulation</title>

 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery-ui.js"></script>
 <script type="text/javascript" src="i18n/grid.locale-en.js"></script>
 <script type="text/javascript" src="jquery.jqGrid.min.js"></script>

 <link rel="stylesheet" type="text/css" href="jquery-ui-css.css">
 <link rel="stylesheet" type="text/css" href="ui.jqgrid.css">

 </head>
 <script type="text/javascript">

 $(document).ready(function(){

 jQuery("#grid").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}       
],
multiselect: false,
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"},
    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ];

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

   $("#deleteButton").click(function() {
      var rowId = $("#grid").getGridParam("selrow");
      if(rowId == null) {
        alert("select a row!");
        return;
      }
      var recordId =  $("#grid").getCell(rowId, 2);
      alert(recordId);
    // Deletion of row selected
    // Addition of row
    // Updating of row selected

    });               
    });

    </script>
    <body>

    <div id="pager5">
    <table id="list5"></table>
    <input id="deleteButton" type="button" value="delete"/>

    </div>

    </body>
    </html>

I got the Row Id alone. I want to delete the selected row,add a row, update the selected row. How to make this 3 buttons to work? help out..

ansaurus

tags:

views:

answers:

How should jquery used in this plugin to Add,Edit & Delete?? Suggestions Please..

related questions