EasyUI Forum
March 28, 2024, 08:47:08 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Easyui edatagrid save data remotly and general perfomance issues  (Read 6192 times)
saddok
Newbie
*
Posts: 4


View Profile Email
« on: April 26, 2018, 08:02:08 AM »

Hello all,
Thanks to help with issue mentioned in the subject. My Edatagrid is meant to do the following :
- Load data from remote oracle table at once (server), load footer for summary, filtering data all in pagination mode.
- give the user the opportunity to update table data inline editing.
- save the data to remote oracle table.
- want to add  the follwing : Freeze first row, local order by (ASC, DSC). Any suggestion for addons and enhacement are warmly welcome.

The application worked fine in the beggining. actually i have two issues :
- I'm afraid data will load slowly as the Oracle table grows bigger, for the moment i'm loading 30 rows and it's slow....
i attached some screenshots showing datagrid definition.

- Edatagrid was saving data to Oracle database flawlessly. i wanted to add some options to it like collapsible and freeze TH header Row.... the datagrid didn't behave as i expected as i failed to understand it's mechanics. i decided to remove collapsible and freeze ROW. since then no data could be written to the remote Oracle table. i've tried to restore my work but no way ...

header main page :
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>

  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js"></script>
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
  <script type="text/javascript" src="THEMES/easy UI/plugins/datagrid-cellediting.js"></script>

<!--
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js"></script>
  <script type="text/javascript" src="THEMES/easy UI/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="THEMES/easy UI/plugins/jquery.edatagrid.js"></script>
  <script type="text/javascript" src="THEMES/easy UI/jquery.min.js"></script>
  <script type="text/javascript" src="THEMES/easy UI/plugins/datagrid-filter.js"></script>
-->
 
    <style type="text/css">
  .panel-body .datagrid-footer .datagrid-row{
    background: #b3e6ff;
    font-weight: 900;
    font-family :Arial Narrow;
  }
  .datagrid-row{
    background: #b3e6ff;
    font-weight: 700;
   }

     
</style>
  <link rel="stylesheet" type="text/css" href="THEMES/easyui.css">
  <link rel="stylesheet" type="text/css" href="THEMES/easy UI/THEMES/icon.css">
<link rel="stylesheet" type="text/css" href="ms-Dropdown-master/css/msdropdown/dd.css"/>
  <meta http-equiv="Content-Type" content="text/html;charset=utf8">
</head>

Datagrid HTML definiton code
Code:
<table id="table1" name="table1" 
      style="width:auto;height:auto"
       >
 
    <thead frozen="true">
            <tr>
                  <th data-options="field:'DATE_HEURE_SAISIE_FINALE', editor:{type:'datetimebox'}">DATE SAISIE FIN</th>
                  <th data-options="field:'QUANTITE_FINALE',align:'right',editor:{type:'numberbox'}">QTE FIN</th>
                  <th data-options="field:'PRIX_FINAL',align:'right', editor:{type:'numberbox'}">PRIX FIN</th>
                  <th data-options="field:'MONTANT_FINAL',align:'right'">MTNT FIN</th>
            </tr>
    </thead>
    <thead>
    <tr>
                  <th data-options="field:'DATE_PAIEMENT', editor:{type:'datetimebox'}">DATE PAIEMENT</th>
                  <th data-options="field:'DATE_LIVRAISON', editor:{type:'datetimebox'}">DATE LIVRAISON</th>
                  <th data-options="field:'CODE_ORDRE',align:'right'">N°</th>
                  <th data-options="field:'LIBELLE_OPV'">OPV</th>
                  <th data-options="field:'TITRE_OPV'">TITRE</th>
                  <th data-options="field:'NOM_COMPLET_CLIENT'">CLIENT</th>
                  <th data-options="field:'CODE_CLIENT'">CIF CLIENT</th>
                  <th data-options="field:'DATE_HEURE_SAISIE'">DATE SAISIE</th>
                  <th data-options="field:'QUANTITE_DEMANDEE'">QTE</th>
                  <th data-options="field:'MONTANT'">MONTANT</th>
                  <th data-options="field:'PRIX_DEMANDE'">PRIX</th>
                  <th data-options="field:'CODE_PORTFEUILLE'">PORTFEUILLE</th>
                  <th data-options="field:'COMPTE_CLIENT'">COMPTE</th>
            </tr>
  </thead>
</table>

Edatagrid Javascript definion and operations :
Code:
<?php
if (isset($_POST['submit']))
{
echo 
" <script type='text/javascript'>
    $(function(){
            
            $('#table1').edatagrid({    
                url: 'charger.php?A="
.$_POST['text_opv']."',
                
                updateUrl: 'save_user1.php',
                
                
                remoteFilter: false,
                showFooter : true,
                nowrap: true,
                title : 'LISTE DES ORDRES A EXECUTER',
                loadMsg : 'Chargement des données veuillez patienter SVP',
                emptyMsg : 'Données introuvable veuillez reesayer SVP',     
        
                rownumbers:true, 
                fitColumns:true,
      
                striped:true,
                singleSelect:true,  
                pagination:true, 
                pageSize: 10,
                idField:'CODE_ORDRE',
                pagePosition : top,
                pageList : [5,10,20,30,40,50,100],

                autoRowHeight: true
            }).edatagrid('enableFilter',[{
                field:'QUANTITE_FINALE',
                type:'numberbox',
                options:{precision:1},
                op:['equal','notequal','less','greater']
            },{
                field:'MONTANT_FINAL',
                type:'numberbox',
                options:{precision:1},
                op:['equal','notequal','less','greater']
            }])
        });
           
var lastIndex;
$('#table1').datagrid({
     onClickRow:function(rowIndex){
        if (lastIndex != rowIndex){
            $('#table1').datagrid('endEdit', lastIndex);
            $('#table1').datagrid('beginEdit', rowIndex);
        }
        lastIndex = rowIndex;
    },
    onBeginEdit:function(rowIndex){
        var editors = $('#table1').datagrid('getEditors', rowIndex);
        var row = $('#table1').datagrid('getSelected');
        var n1 = $(editors[1].target);
        var n2 = $(editors[2].target);
        
        n1.add(n2).numberbox({
            onChange:function(){
                var cost = n1.numberbox('getValue')*n2.numberbox('getValue');
                row.MONTANT_FINAL=cost;
           }
        })
    },
    onEndEdit:function(index,row){somma()}/*, 
    onLoadSuccess:function(index,row){somma()}*/

}
);

 
  function somma ()
   {
            var data = $('#table1').datagrid('getData');
           
      var rows = data.rows;
      
      var sum = 0;
      var sum1 = 0;
      
      
      for (i=0; i < rows.length; i++) 
          {
              if (isNaN(parseFloat(rows[i].QUANTITE_FINALE))) 
                {
                  sum+=0;
                }
              else sum+=parseFloat(rows[i].QUANTITE_FINALE);
        
              if (isNaN(parseFloat(rows[i].MONTANT_FINAL))) 
                {
                  sum1+=0;
                }
              else        
                  sum1+=parseFloat(rows[i].MONTANT_FINAL);
          }
 //alert('Total Qté=' + sum);
 //alert('Total Montant=' + sum1);
 $('#quantit').textbox('setText', sum);
 $('#montant').textbox('setText', sum1);
 }

</script>"
;
}
?>



Remote save php file :
Code:
<?php
$D 
=htmlspecialchars($_REQUEST["DATE_HEURE_SAISIE_FINALE"]);
$DATE_HEURE_SAISIE_FINALE substr($D,3,2).'/'.substr($D,0,2).'/'.substr($D,6,4).' '.substr($D,11,2).':'.substr($D,14,2).':'.substr($D,17,4); 
$S=htmlspecialchars($_REQUEST["DATE_PAIEMENT"]);
$DATE_PAIEMENT substr($S,3,2).'/'.substr($S,0,2).'/'.substr($S,6,4).' '.substr($S,11,2).':'.substr($S,14,2).':'.substr($S,17,4);
$P=htmlspecialchars($_REQUEST["DATE_LIVRAISON"]);
$DATE_LIVRASION substr($P,3,2).'/'.substr($P,0,2).'/'.substr($P,6,4).' '.substr($P,11,2).':'.substr($P,14,2).':'.substr($P,17,4); 
$QUANTITE_FINALE =htmlspecialchars($_REQUEST["QUANTITE_FINALE"]);
$PRIX_FINAL =htmlspecialchars($_REQUEST["PRIX_FINAL"]);
$MONTANT_FINAL =htmlspecialchars($_REQUEST["MONTANT_FINAL"]);
$CODE_ORDRE htmlspecialchars($_REQUEST["CODE_ORDRE"]);

include (
"connexionbadrtest3.php");

$sql "
UPDATE ordre 
SET QUANTITE_FINALE='
$QUANTITE_FINALE',
PRIX_FINAL='
$PRIX_FINAL',
MONTANT_FINAL='
$MONTANT_FINAL',
DATE_HEURE_SAISIE_FINALE= to_date('
$DATE_HEURE_SAISIE_FINALE','DD/MM/RRRR HH24:MI:SS'),
DATE_PAIEMENT =to_date('
$DATE_PAIEMENT','DD/MM/RRRR HH24:MI:SS'),
DATE_LIVRAISON = to_date('
$DATE_LIVRASION','DD/MM/RRRR HH24:MI:SS')
WHERE CODE_ORDRE = '
$CODE_ORDRE'";
//echo $sql;
$connexion->prepare($sql);
if (
$connexion->query($sql)) 
$resultat ='Sauvegarde reussie';
else 
$resultat $connexion->errorInfo();
print_r ($resultat);
?>

a question here how can update url cofirm and print the data posted by main datagrid page? i mean i want saveurl to print in a div the data posted by Edatagrid and cofirm that data wase successfuly or failed to save?

Below is Url page to fetch data romotly (i disabled paging)
Code:
<?php
/*$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 5;
$offset = ($page-1)*$rows;
$limite = $offset + $rows;
//print ('offset = '.$offset.'limite =  '.$limite.'rows ='.$rows);*/
$output=$_GET['A'];

include (
"connexionbadrtest3.php");
$result = array();

$req1 "SELECT 'TOTAL QTE:' DATE_HEURE_SAISIE_FINALE ,sum(QUANTITE_FINALE) QUANTITE_FINALE, 'TOTAL MNT :' PRIX_FINAL , sum(MONTANT_FINAL) MONTANT_FINAL FROM ordre where LIBELLE_OPV='$output'";
$req2 "SELECT count(code_ordre) total FROM ordre where LIBELLE_OPV='$output'" ;

$req"SELECT * FROM
( SELECT rownum r, TO_CHAR(DATE_HEURE_SAISIE_FINALE, 'DD/MM/RRRR HH24:MI:SS') DATE_HEURE_SAISIE_FINALE ,
QUANTITE_FINALE,
PRIX_FINAL,
MONTANT_FINAL,
CODE_ORDRE,
LIBELLE_OPV,
TITRE_OPV,
NOM_COMPLET_CLIENT,
CODE_CLIENT,
TO_CHAR(DATE_HEURE_SAISIE, 'DD/MM/RRRR HH24:MI:SS') DATE_HEURE_SAISIE,
QUANTITE_DEMANDEE,
MONTANT,
PRIX_DEMANDE,
CODE_PORTFEUILLE,
COMPTE_CLIENT,
TO_CHAR(DATE_PAIEMENT, 'DD/MM/RRRR HH24:MI:SS') DATE_PAIEMENT ,
TO_CHAR(DATE_LIVRAISON, 'DD/MM/RRRR HH24:MI:SS') DATE_LIVRAISON

from ordre where LIBELLE_OPV='
$output')";

//Fetch data
$stmt=$connexion->prepare($req);
$stmt->execute() or print_r($connexion->errorInfo());
$item = array();
while (
$row $stmt-> fetch(PDO::FETCH_OBJ))
{
        
array_push($item$row);
}

$item1 = array();
//fetch footer data
$stmt1=$connexion->prepare($req1);
$stmt1->execute() or print_r($connexion->errorInfo());
while (
$row $stmt1-> fetch(PDO::FETCH_ASSOC))
{
        
array_push($item1$row);
}

$stmt2=$connexion->prepare($req2);
$stmt2->execute() or print_r($connexion->errorInfo());
$item2 = array();
while (
$row $stmt2-> fetch(PDO::FETCH_ASSOC))
{
        
array_push($item2$row);
}

$result["total"] = $item2[0]['TOTAL'];
$result["rows"] = $item;
$result["footer"]=$item1;


//"footer":[{"name":"Total","price":18.00}]}

echo json_encode($result);
?>

See the attached screenchots for more details.

I have a lot of pressure to finish my work.

appreciate your efforts highly.

thanks to reply ASAP
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: April 27, 2018, 05:25:55 PM »

Too large data requires you to load data from remote server page by page. So you should:

1. Set 'pagination' to true and 'remoteFilter' to true. Please take a look at this remote filtering example https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=Remote%20Filtering%20on%20DataGrid&sort=

2. The local sorting should be disabled because you only load parts of you data from remote server. Please set 'remoteSort' to true.

3. If you save the posted data successfully, you should return the updated row to the browser. If some errors occur, you should return a error message that looks like this:
Code:
echo json_encode(array(
'isError' => true,
'msg' => 'error message.'
));
On your browser, you can listen to the 'onError' event to retrieve this error message.
Code:
//client side code
$('#dg').edatagrid({
onError: function(index,row){
alert(row.msg);
}
});
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!