2010-07-02 93 views
3

如何在添加行,编辑,删除jqgrid中的行?如何调用editurl?如何使用jqgrid添加,编辑,删除?使用php

我的代码是... jqgrid.php页面。

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 
      }) 

});

而且使用example.php代码

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帮助我,麻烦IM ...

回答

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 
     }) 

在edit.php

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

在edit.php你必须这样说:

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

如果你想看到什么你得到,使用:print_r($_REQUEST);

-1

我真的很喜欢PHPjq的想法但他们是“卖”的代码没有任何的最佳做法,以防止SQL注入。所以购买他们的代码,并添加适当的SQL转义包装或编写自己的....安全不懒。

+0

您是否与PHPjq关联? – 2012-09-24 04:47:06

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; 
       } 

      }); 

}); 
相关问题