2010-09-16 7 views
0

J'utilise Jgrid. J'injecte les données à la grille en utilisant Xml comme nous le faisons la plupart d'entre nous.Problème Jgrid Génération XML

je veux la mise à jour par lots à la base de données, mon exigence que lorsque je clique sur le "Save Change", il génère le Xml des données de grille en cours (mis à jour). Donc, comment puis-je générer le Xml des données Jgrid.

aidez s'il vous plaît.

Voici le code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
    <link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" /> 
    <link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" /> 

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

    <script type="text/javascript"> 

    jQuery(document).ready(function() { 
    //debugger; 
    var lastsel3; 
    jQuery("#test").jqGrid({ 
    url:'/Content/xml/user.xml', 
    datatype: "xml", 
    colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'], 
    colModel:[ 
     {name:'id',index:'id', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}}, 
     {name:'tax',index:'tax', width:80, align:"right",editable:true}, 
     {name:'tax',index:'tax', width:80, align:"right",editable:true}, 
     {name:'invdate',index:'invdate', width:90,editable:true}, 
     {name:'invdate',index:'invdate', width:90,editable:true}, 
     {name:'tax',index:'tax', width:80, align:"right",editable:true}, 
     {name:'note',index:'note', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:"}}  
    ], 

    onSelectRow: function(id){ 
     if(id && id!==lastsel3){ 
      jQuery('#test').jqGrid('restoreRow',lastsel3); 
      jQuery('#test').jqGrid('editRow',id,true,pickdates); 
      lastsel3=id; 
     } 
    }, 

    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pcelltbl', 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
    caption:"Cell Edit Example", 
    forceFit : true, 
    cellEdit: true, 
    cellsubmit: 'clientArray', 
    afterEditCell: function (id,name,val,iRow,iCol){ 
    if(name=='invdate') { 
      jQuery("#"+iRow+"_invdate","#test").datepicker({dateFormat:"yy-mm-dd"}); 
     } 
    }, 
    afterSaveCell : function(rowid,name,val,iRow,iCol) { 
     if(name == 'amount') { 
      var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1); 
      jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)}); 
     } 
     if(name == 'tax') { 
      var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1); 
      jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)}); 
     } 
    } 
}); 
jQuery("#test").jqGrid('navGrid','#pgwidth',{edit:true,add:true,del:true}); 

     }); 
    </script> 

</head> 
<body> 
    <form id="form1"> 
     <div> 
      <table id="test"> 
      </table> 
     </div> 
    </form> 
</body> 
</html> 

Merci.

+0

Il est étrange que vous ayez défini 3 fois la même colonne "taxe" et deux fois la même colonne "invocation". Avez-vous le même problème dans votre programme ou c'est juste une erreur dans l'affichage du code ici? – Oleg

Répondre

0

Salut Oleg J'utilise le même code ths mais produit pas la sortie correcte .. Mon code est

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
    <!-- <script type="text/javascript"> 
      debugger; 
      alert($!retrivexml); 
      </script>--> 
    <link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" /> 
    <link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css" 
     type="text/css" media="screen" /> 
    <link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css" 
     media="screen" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" /> 

    <script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script> 
    <script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script> 
    <script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script> 
    <!--<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>--> 
    <script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script> 
    <script src="../../Content/js/Jgrid js/json2.js" type="text/javascript"></script> 
    <script src="../../Content/js/Jgrid js/JsonXml.js" type="text/javascript"></script> 
    <script src="../../Content/js/Jgrid js/grid.import.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

     jQuery(document).ready(function() { 


     var grid = jQuery("#test"); 
      var MyExportToXml = function (grid) {debugger; 
       var dataFromGrid = {row: grid.jqGrid ('getGridParam', 'data') }; 
       var xmldata = '<?xml version="1.0" encoding="utf-8" standalone="yes"?>\n<rows>\n' + 
           xmlJsonClass.json2xml (dataFromGrid, '\t') + '</rows>'; 
       alert(xmldata); 
      }; 


     var lastsel3; 
     jQuery("#test").jqGrid({ 
     url:'/Content/xml/user.xml', 
     //url: $!retrivexml, 
     datatype: "xml", 
     colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'], 
     colModel:[ 
      {name:'Consultant',index:'Consultant', width:90, editable: true,edittype:"select",editoptions:{value:"K:Kin;R:Rajesh;R:Renee;S:Sandeep"}}, 
      {name:'Role',index:'Role', width:80, align:"right",editable:true}, 
      {name:'Task',index:'Task', width:80, align:"right",editable:true}, 
      {name:'SDate',index:'SDate', width:90,editable:true}, 
      {name:'EDate',index:'EDate', width:90,editable:true}, 
      {name:'Deliverables',index:'Deliverables', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"25"}}, 
      {name:'Complete',index:'Complete', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:Incomplete"}}  
     ], 


     rowNum:10, 
     //rowList:[10,20,30], 
     pager: '#pagediv', 
     sortname: 'id', 
     viewrecords: true, 
     sortorder: "desc", 
     caption:"Project Planning", 
     forceFit : false, 
     cellEdit: true, 
     editurl:'clientArray', 
     cellsubmit: 'clientArray', 


     afterEditCell: function (id,name,val,iRow,iCol){ 


     if(name=='SDate') { 
       jQuery("#"+iRow+"_SDate","#test").datepicker({dateFormat:"yy-mm-dd"}); 

      } 



     if(name=='EDate') { 
       jQuery("#"+iRow+"_EDate","#test").datepicker({dateFormat:"yy-mm-dd"}); 
      } 
     }, 


//  afterSaveCell : function(rowid,name,val,iRow,iCol) { 
//   if(name == 'amount') { 
//    var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1); 
//    jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)}); 
//   } 
//   
//   
//   
//   if(name == 'tax') { 
//    var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1); 
//    jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)}); 
//   } 
//  } 
    }); 
    jQuery("#test").jqGrid('navGrid','#pagediv',{edit:false,add:false,del:false}); 


    $("#export").click(function(){ 
       MyExportToXml (grid); 
      }); 



    jQuery("#bedata").click(function(){ 

    jQuery("#test").jqGrid('navButtonAdd','#pagediv',{caption:"New", buttonicon :'ui-icon-circle-plus', 
        onClickButton:function(id){ 
         var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"", 
             Deliverables:"",Complete:""}; 
         var lastsel2 = id; 
         //debugger; 
         var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ; 
//     if (su) { 
//       jQuery('#test').editRow(lastsel2,true); 
//            
//      
//       } 
         }, 
       title:"New Button", 
       position:"last" 
       }); 
     //jQuery("#test").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false}); 
    }); 

      }); 
    </script> 

</head> 
<body> 
    <form id="form1"> 
     <div id="pagediv"> 
     </div> 
     <table id="test"> 
     </table> 
     <input type="BUTTON" id="bedata" value="Edit Selected" /> 
     <input type="BUTTON" id="export" value="Export" /> 
    </form> 
</body> 

Please..correct le code si im faire une erreur ici

+0

Reconnaissez-vous une erreur mesaage ou un mauvais XML est-ce que vous cliquez sur le bouton "Exporter"? Ce que vous faites sur 'jQuery (" # bedata "). Click' est faux. D'abord vous acc acc un nouveau bouton au navigateur sur evry lick. Ensuite, si une ligne est sélectionnée, vous ajoutez une ligne vide ** avec le même identifiant que la ligne sélectionnée a **. C'est tres mauvais! Ids ** doit ** être unique pour avoir le bon HTML. – Oleg

+0

je revive le xml vide juste avec le tag codé dur quand je clique sur le bouton d'exportation. – Shivi

+0

S'il vous plaît répondre ASAP ... – Shivi

1

Pour exporter des données au format XML, vous pouvez utiliser jQuery("#test").jqGrid ('getGridParam', 'data') en combinaison avec xmlJsonClass.json2xml de JsonXml.js inclus dans jqGrid.

J'ai créé un exemple de travail qui montre de cette façon: http://www.ok-soft-gmbh.com/jqGrid/ExportInXml.htm. Vous pouvez utiliser le bouton externe ou un bouton dans le navigateur jqGrid pour effectuer l'exportation. Dans l'exemple, je viens d'afficher les données exportées par rapport à la fonction alert. Les mêmes données qu'un fichier que vous trouvez here.

+0

Merci beaucoup Oleg – Shivi

+0

Salut Oleg J'utilise le même code mais il ne produit pas la sortie correcte .. – Shivi