2010-07-02 8 views
3

comment travailler sur ajouter une ligne, modifier, del la ligne dans jqgrid? comment invoquer editurl ??Comment travailler sur jqgrid Ajouter, éditer, supprimer? en utilisant php

mon code est ci-dessous ... jqgrid.php page.

var $mygrid= jQuery("#list").jqGrid({ 
         url:'example.php',           
         datatype: 'xml', 
         mtype: 'GET', 
         colNames:['Seq','Name', 'ID','Pass','Mail','Note'], 
         colModel :[ 
         {name:'seq',index:'seq', width:55, resizable:false, editable:true, editoptions:{readonly:true,size:10}}, 
         {name:'name',index:'name', width:90,resizable:false, editable:true, editoptions:{readonly:false,size:10}}, 
         {name:'id',index:'id', width:80, align:'right', editable:true, editoptions:{readonly:false,size:10}}, 
         {name:'pass',index:'pass', width:80, align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}}, 
         {name:'mail',index:'mail', width:80,align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}}, 
         {name:'id',index:'id', width:150, sortable:false} ],        
         pager: jQuery('#pager'), 
         rowNum:10, 
         rowList:[10,20,30,50], 
         sortname: 'seq', 
         sortorder: "Asc", 
         width: 1000, 
         height: 230,                    
         viewrecords: true, 
         multiselect: true, 
         editable: true, 
         toolbar: [true,"top"],        
         multikey: "ctrlKey",       
         editurl:'add.php',       
         caption: 'staff' 


     }); 
      $("#list").jqGrid('navGrid', '#pager', { 
        edit: true,      
        add: true,        
        del: true,      
        search: false,      
        refresh:false 
      }) 

});

et le code example.php est

enter code here <?php 
        $dbhost = 'localhost'; 
        $dbuser = 'test'; 
        $dbpassword = 'test'; 
        $database = 'cs_test'; 

        $page = $_GET['page']; 
        // get how many rows we want to have into the grid - rowNum parameter in the grid 
        $limit = $_GET['rows']; 
        // get index row - i.e. user click to sort. At first time sortname parameter - 
        // after that the index from colModel 
        $sidx = $_GET['sidx']; 

        // sorting order - at first time sortorder 
        $sord = $_GET['sord']; 
        // if we not pass at first time index use the first column for the index or what you want 
        if(!$sidx) $sidx =1; 
        // connect to the MySQL database server 
        $db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error()); 
        // select the database 
        mysql_select_db($database) or die("Error conecting to db."); 
        // calculate the number of rows for the query. We need this to paging the result 
        $result = mysql_query("SELECT COUNT(*) AS count FROM TM_Staff"); 
        $row = mysql_fetch_array($result,MYSQL_ASSOC); 
        $count = $row['count']; 
        // calculation of total pages for the query 
        if($count > 0) { 
       $total_pages = ceil($count/$limit); 
       //$total_pages = 20; 
        } else { 
       $total_pages = 0; 
        } 
        if ($page > $total_pages) $page=$total_pages; 
         $start = $limit*$page - $limit; 
         if($start<0) $start = 0; 
         // the actual query for the grid data 
         $SQL = "SELECT seq,name,id,pass,mail,ins_dt from TM_Staff ORDER BY $sidx $sord LIMIT $start,$limit"; 
         $result = mysql_query($SQL) or die("Couldn t execute query.".mysql_error()); 
         if (stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml"))       { 
          header("Content-type: application/xhtml+xml;charset=utf-8"); 
         } else { 
         header("Content-type: text/xml;charset=utf-8"); 
         } 
         echo "<?xml version='1.0' encoding='utf-8'?>"; 
         echo "<rows>"; 
         echo "<page>".$page."</page>"; 
         echo "<total>".$total_pages."</total>"; 
         echo "<records>".$count."</records>"; 
         // be sure to put text data in CDATA 
         while($row = mysql_fetch_array($result,MYSQL_ASSOC)) { 
         echo "<row id='". $row[seq]."'>"; 
         echo "<cell>". $row[seq]."</cell>"; 
         echo "<cell>". $row[name]."</cell>"; 
         echo "<cell>". $row[id]."</cell>"; 
          echo "<cell>". $row[pass]."</cell>"; 
         echo "<cell>". $row[mail]."</cell>"; 
         echo "<cell><![CDATA[". $row[id]."]]></cell>"; 
         echo "</row>"; 
         } 
         echo "</rows>"; 
     ?> 

plz help me, im en difficulté ...

Répondre

0
  var $mygrid= jQuery("#list").jqGrid({ 
        url:'example.php', 
        editurl: 'edit.php',           
        datatype: 'xml', 
        mtype: 'GET', 
        colNames:['Seq','Name', 'ID','Pass','Mail','Note'], 
        colModel :[ 
        {name:'seq',index:'seq', width:55, resizable:false, editable:true, editoptions:{readonly:true,size:10}}, 
        {name:'name',index:'name', width:90,resizable:false, editable:true, editoptions:{readonly:false,size:10}}, 
        {name:'id',index:'id', width:80, align:'right', editable:true, editoptions:{readonly:false,size:10}}, 
        {name:'pass',index:'pass', width:80, align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}}, 
        {name:'mail',index:'mail', width:80,align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}}, 
        {name:'id',index:'id', width:150, sortable:false} ],        
        pager: jQuery('#pager'), 
        rowNum:10, 
        rowList:[10,20,30,50], 
        sortname: 'seq', 
        sortorder: "Asc", 
        width: 1000, 
        height: 230,                    
        viewrecords: true, 
        multiselect: true, 
        editable: true, 
        toolbar: [true,"top"],        
        multikey: "ctrlKey",       
        caption: 'staff' 


    }); 
     $("#list").jqGrid('navGrid', '#pager', { 
       edit: true,      
       add: true,        
       del: true,      
       search: false,      
       refresh:false 
     }) 

Dans edit.php

if($_GET['oper']=='add') 
{ 
    ... ... ... 
} 
if($_GET['oper']=='edit') 
{ 
    ... ... ... 
} 
if($_GET['oper']=='del') 
{ 
    ... ... ... 
} 
1

En edit.php vous dois le mettre comme ceci:

if($_POST['oper']=='add') 
{ 
    ... ... ... 
} 
else if($_POST['oper']=='edit') 
{ 
    ... ... ... 
} 
else if($_POST['oper']=='del') 
{ 
    ... ... ... 
} 

Si vous voulez voir ce que vous obtenez, utilisez: print_r($_REQUEST);

-1

Je aime vraiment l'idée de PHPjq mais le code qu'ils sont « vendent » Nous ne connaissons aucune des meilleures pratiques pour éviter l'injection SQL. alors achetez leur code et ajoutez les wrappers d'échappement sql appropriés ou écrivez les vôtres .... soyez prudent et pas paresseux.

+0

Êtes-vous en rapport avec PHPjq? –

2
var lastSel; 
$(function() { 

    $("#grid").jqGrid({ 
     colNames: ['Name', 'Address', 'Contact', 'Pan Number', 'Registration Number', 'Email Address', 'File'], 
     colModel: [ 
     { name: 'Name', index: 'Name', sortable: true, align: 'left', title: false, width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} }, 

     { name: 'Address', index: 'Address', sortable: true, title: false, align: 'left', width: 220, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} }, 

      { name: 'Contact', index: 'Contact', sortable: true, title: false, align: 'left', width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} }, 

      { name: 'PanNumber', index: 'PanNumber', sortable: true, title: false, align: 'left', width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} }, 

      { name: 'ServiceTaxRegistrationNo', index: 'ServiceTaxRegistrationNo', title: false, sortable: true, align: 'left', width: 240, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} }, 

      { name: 'Email', index: 'Email', sortable: true, align: 'left', title: false, width: 190, editable: true, edittype: 'text', editrules: { required: true, email: true }, formoptions: { elmprefix: '* ' }, search: false }, 

       { name: 'FilePath', index: 'FilePath', sortable: false, title: false, align: 'left', editable: true, edittype: 'file', width: 190, allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], 
        search: false, editoptions: { 
         enctype: "multipart/form-data" 
        } 
       }, 
     ], 
     pager: jQuery("#pager"), 
     sortname: 'Name', 
     rowNum: 10, 
     rowList: [10, 20, 25], 
     sortOrder: "", 
     height: 225, 
     viewrecords: true, 
     rownumbers: true, 
     caption: "Companies", 
     width: 950, 
     imgpath: '/Content/themes/smoothness/images', 
     url: "/Master/GetCompanies", 
     editurl: "/Master/PerformCompanyCRUDAction", 
     datatype: "json", 
     mtype: "GET", 
     onCellSelect: function (rowid, iCol, aData) { 
      if (rowid && rowid !== lastSel) { 
       if (lastSel) { 
        $("#" + lastSel).removeClass('state-active'); 
        $("#" + lastSel).addClass('ui-widget-content'); 
       } 
       $("#" + rowid).removeClass('ui-widget-content'); 
       $("#" + rowid).addClass('state-active'); 
       lastSel = rowid; 
      } 
     } 

    }); 

    jQuery("#grid").jqGrid('navGrid', '#pager', 
    { edit: true, add: true, del: true, search: true, refresh: true }, 
      { closeOnEscape: true, reloadAfterSubmit: true, modal: true, 
       beforeShowForm: function (formid) { 
        $("#pData, #nData").hide(); 
       }, 
       onInitializeForm: function (formid) { 

        $(formid).attr('method', 'POST'); 
        $(formid).attr('action', ''); 
        $(formid).attr('enctype', 'multipart/form-data'); 
       }, 
       test: function() { 

        var filenam = $("#FilePath").val(); 
       }, 
       afterSubmit: function (response, postdata) { 
        $.ajaxFileUpload({ 
         url: '/Master/CompanyFileUpload?CompanyId=' + postdata.id, 
         secureuri: false, 
         data: postdata, 
         cache: false, 
         contentType: 'multipart/form-data', 
         processData: false, 
         type: 'POST', 
         fileElementId: 'FilePath', 
         dataType: 'json', 

         success: function (data, status) { 
          // $('#notificationDiv').text("Bank Updated Successfully!"); 
         } 
        }); 
        return true; 
       }, 
       closeAfterEdit: true, left: 200, top: 50, width: 500, 

       afterShowForm: function (formid) { 
        $('#Contact').numeric({ allow: "," }); 
       }, 
       afterComplete: function (response, postdata, formid) { 

        if (response.responseText == "true") { 

         $("#notificationDivSuccess").delay(0).fadeIn("slow"); 
         $('#notificationDivSuccess').text("Record Updated Successfully!"); 
         $("#notificationDivSuccess").delay(2500).fadeOut("slow"); 
         $('#notificationDivFail').text(""); 
        } 
        else { 
         $("#notificationDivFail").delay(0).fadeIn("slow"); 
         $('#notificationDivFail').text("Record Already Exist!"); 
         $("#notificationDivFail").delay(2500).fadeOut("slow"); 
         $('#notificationDivSuccess').text(""); 
        } 
       } 
      }, 
      { closeOnEscape: true, reloadAfterSubmit: true, 
       closeAfterAdd: true, left: 200, top: 50, width: 500, 
       onInitializeForm: function (formid) { 

        $(formid).attr('method', 'POST'); 
        $(formid).attr('action', ''); 
        $(formid).attr('enctype', 'multipart/form-data'); 
       }, 

       afterShowForm: function (formid) { 
        $('#Contact').numeric({ allow: "," }); 
       }, 

       afterSubmit: function (response, postdata) { 
        //     var data = $.parseJSON(response.responseText); 
        //     bid = data.id; 
        //     pageNo = data.page; 
        //debugger; 
        var Id = response.responseText; 

        $.ajaxFileUpload({ 
         url: '/Master/CompanyFileUpload?CompanyId=' + Id, 
         secureuri: false, 
         data: postdata, 
         cache: false, 
         contentType: 'multipart/form-data', 
         processData: false, 
         type: 'POST', 
         fileElementId: 'FilePath', 
         dataType: 'json', 
         success: function (data, status) { 
          // $('#notificationDiv').text("Bank Added Successfully!"); 
         } 
        }); 
        return true; 
       } 
       , 
       afterComplete: function (response, postdata, formid) { 

        if (response.responseText != "") { 
         if (response.responseText == "false") { 
          $("#notificationDivFail").delay(0).fadeIn("slow"); 
          $('#notificationDivFail').text("Record Already Exist!"); 
          $("#notificationDivFail").delay(2500).fadeOut("slow"); 
          $('#notificationDivSuccess').text(""); 
         } 
         else { 
          $("#notificationDivSuccess").delay(0).fadeIn("slow"); 
          $('#notificationDivSuccess').text("New Record Added Successfully!"); 
          $("#notificationDivSuccess").delay(2500).fadeOut("slow"); 
          $('#notificationDivFail').text(""); 
         } 

        } 
        else { 
        } 
       } 
      }, 
      { closeOnEscape: true, reloadAfterSubmit: true, left: 300, top: 80, width: 220, 
       afterComplete: function (response, postdata, formid) { 
        if (response.responseText == "true") { 
         $("#notificationDivSuccess").delay(0).fadeIn("slow"); 
         $('#notificationDivSuccess').text("Record Deleted Successfully!"); 
         $("#notificationDivSuccess").delay(2500).fadeOut("slow"); 
         $('#notificationDivFail').text(""); 
        } 
        else { 

         $("#notificationDivFail").delay(0).fadeIn("slow"); 
         $('#notificationDivFail').text("The selected record can not be deleted, Please delete associated record first"); 
         $("#notificationDivFail").delay(2500).fadeOut("slow"); 
         $('#notificationDivSuccess').text(""); 
        } 
       } 
      }, 
      { closeAfterSearch: true, closeOnEscape: true, left: 200, top: 50, enableClear: true, 
       onClose: function() { 
        var postdata = $("#grid").jqGrid('getGridParam', 'postData'); 
        postdata._search = false; 
        postdata.searchString = ""; 
        $("#grid").trigger('reloadGrid'); 
        return true; 
       } 

      }); 

}); 
Questions connexes