title: Jquery Easy UI access the data in the rows individually to make custom ajax calls
body: <p>In the demo file datagrid2.html of jquery-easyui-1.2.6, I am trying to access the data in rows through javascript so that I can use this to construct my ajax url to save UI changes on the server side.</p>
  
  <p>The entire html code is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;title&gt;Editable DataGrid - jQuery EasyUI Demo&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="../themes/icon.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="demo.css"&gt;
      &lt;script type="text/javascript" src="../jquery-1.7.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../jquery.easyui.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var products = [
              {productid:'FI-SW-01',name:'Koi'},
              {productid:'K9-DL-01',name:'Dalmation'},
              {productid:'RP-SN-01',name:'Rattlesnake'},
              {productid:'RP-LI-02',name:'Iguana'},
              {productid:'FL-DSH-01',name:'Manx'},
              {productid:'FL-DLH-02',name:'Persian'},
              {productid:'AV-CB-01',name:'Amazon Parrot'}
          ];
          function productFormatter(value){
              for(var i=0; i&lt;products.length; i++){
                  if (products[i].productid == value) return products[i].name;
              }
              return value;
          }
          $(function(){
              var lastIndex;
              $('#tt').datagrid({
                  toolbar:[{
                      text:'Add New',
                      iconCls:'icon-add',
                      handler:function(){
                          $('#tt').datagrid('endEdit', lastIndex);
                          $('#tt').datagrid('appendRow',{
                              itemid:'',
                              productid:'',
                              listprice:'',
                              unitprice:'',
                              attr1:'',
                              status:'P'
                          });
                          lastIndex = $('#tt').datagrid('getRows').length-1;
                          $('#tt').datagrid('selectRow', lastIndex);
                          $('#tt').datagrid('beginEdit', lastIndex);
                      }
                  },'-',{
                      text:'Delete',
                      iconCls:'icon-remove',
                      handler:function(){
                          var row = $('#tt').datagrid('getSelected');
                          if (row){
                              var index = $('#tt').datagrid('getRowIndex', row);
                              $('#tt').datagrid('deleteRow', index);
                          }
                      }
                  },'-',{
                      text:'Edit Save',
                      iconCls:'icon-save',
                      handler:function(){     
                          $('#tt').datagrid('acceptChanges');                     
                      }
                  },'-',{
                      text:'Undo',
                      iconCls:'icon-undo',
                      handler:function(){
                          $('#tt').datagrid('rejectChanges');
                      }
                  },'-',{
                      text:'GetChanges',
                      iconCls:'icon-search',
                      handler:function(){
                          var rows = $('#tt').datagrid('getChanges');
                          alert('changed rows: ' + rows.length + ' lines');
                      }
                  }],
                  onBeforeLoad:function(){
                      $(this).datagrid('rejectChanges');
                  },
                  onClickRow:function(rowIndex){
                      if (lastIndex != rowIndex){
                          $('#tt').datagrid('endEdit', lastIndex);
                          $('#tt').datagrid('beginEdit', rowIndex);
                      }
                      lastIndex = rowIndex;
                  }
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h2&gt;Editable DataGrid&lt;/h2&gt;
      &lt;div class="demo-info" style="margin-bottom:10px"&gt;
          &lt;div class="demo-tip icon-tip"&gt;&lt;/div&gt;
          &lt;div&gt;Click the row to start editing.&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;table id="tt" style="width:700px;height:auto"
              title="Editable DataGrid" iconCls="icon-edit" singleSelect="true"
              idField="itemid" url="datagrid_data2.json"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th field="itemid" width="80"&gt;Item ID&lt;/th&gt;
                  &lt;th field="productid" width="100" formatter="productFormatter" editor="{type:'combobox',options:{valueField:'productid',textField:'name',data:products,required:true}}"&gt;Product&lt;/th&gt;
                  &lt;th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}"&gt;List Price&lt;/th&gt;
                  &lt;th field="unitcost" width="80" align="right" editor="numberbox"&gt;Unit Cost&lt;/th&gt;
                  &lt;th field="attr1" width="250" editor="text"&gt;Attribute&lt;/th&gt;
                  &lt;th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}"&gt;Status&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Let me know for more clarifications</p>