【问题标题】:How to work on jqgrid Add, edit, delete? using php如何在 jqgrid 上添加、编辑、删除?使用 php
【发布时间】:2011-03-10 22:17:18
【问题描述】:

如何在 jqgrid 中添加行、编辑、删除行?如何调用editurl??

我的代码在下面... 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>";
      ?>

请帮帮我,我有麻烦了...

【问题讨论】:

    标签: jqgrid-php


    【解决方案1】:
    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;
                    }
    
                });
    
    });
    

    【讨论】:

      【解决方案2】:

      在edit.php中你必须这样写:

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

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

      【讨论】:

        【解决方案3】:
                   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')
         {
            ... ... ...
         }
        

        【讨论】:

          【解决方案4】:

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

          【讨论】:

          • 你和PHPjq有关联吗?
          猜你喜欢
          • 2014-06-02
          • 1970-01-01
          • 1970-01-01
          • 2020-10-15
          • 2014-11-08
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多