jqGrid如何在提交到数据库后删除多个选定的行?

时间:2013-05-15 23:55:17

标签: jquery jqgrid

我有这个解决方案,它将多行数据提交给新数据库。但我想在此操作脚本的末尾附加删除所选行。如何在提交数据后在最后正确添加此功能?我添加了一个脚本,但它什么也没做。

按钮的旧代码:

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

    var selectedrows = $("#list").jqGrid('getGridParam','selarrrow');
if(selectedrows.length) {
for(var i=0;i<selectedrows.length; i++) {

var selecteddatais = $("#list").jqGrid('getRowData',selectedrows[i]);
        var rows=JSON.stringify(selecteddatais)
        var postArray = {json:rows};

    $.ajax({
      type: "POST",
      url: "jsonsend.php",
   data: postArray,       
   dataType: "json",
   success: function () { jQuery("#list").jqGrid('delGridRow', id, options );

    } }); } } });
     });

编辑:我目前正在尝试解决方案

  $(function(){ 
  $("#list").jqGrid({
    url:'request.php',
    editurl: 'jqGridCrud.php',
    datatype: 'xml',
    mtype: 'GET',
    multiselect:true,
    multiboxonly:true,
    height: 450,
    width: 850,

    colNames:['id','Project', 'Assigned To','Assign Date','Check Date','Due Date','Attachments'],
    colModel :[ 
      {name:'id', index:'id', width:25}, 
      {name:'name', index:'name', width:250, align:'left',editable:true, editoptions:{
            size:60} }, 
      {name:'id_continent', index:'id_continent', width:55, align:'right',editable:true,edittype:'select', 
      editoptions:{value: "Henry:Henry; Ramon:Ramon; Paul:Paul" },mtype:'POST'  }, 

      {name:'lastvisit', index:'lastvisit', width:70, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm-d-Y',editable:true, edittype: 'text',mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,


      {name:'cdate', index:'cdate', width:70, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm-d-Y', edittype: 'text',editable:true ,mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,

      {name:'ddate', index:'ddate', width:70, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm-d-Y',date:'true',editable:true, edittype: 'text',editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,


      {name:'email', index:'email', width:70,align:'center',sortable:false,mtype:'POST' } 
    ],
    pager: '#pager',

    rowNum:20,
    rowList:[20,40,80],
    sortname: 'id',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'Pending Assignments',


    ondblClickRow: function(rowid) {

    $(this).jqGrid('editGridRow', rowid,
                        {width:450,Height:400,recreateForm:true,closeAfterEdit:true,
                         closeOnEscape:true,reloadAfterSubmit:false, modal:true,mtype:'post'});}


            });



       $("#list").jqGrid("navGrid", { add: false, search: false }, {}, {}, {
    url: "jsonsend.php",
    onclickSubmit: function (options, ids) {
        var $self = $(this), selectedrows = ids.split(","), selectedData = [], i,
            l = selectedrows.length;

        for (i = 0; i < l; i++) {
            // fill array selectedData with the data from selected rows
            selectedData.push($self.jqGrid("getRowData", selectedrows[i]));
        }

        // the returned data will be combined with the default data
        // posted by delGridRow
        return {
            gridData: JSON.stringify(selectedData)
        }
    }
});


     });

jsonsend.PHP:

<?


    $database = "newhistoricform";
    $dbpassword = "pretty";
    $dbhost = "localhost";
    $dbuser = "root";


// connect to the MySQL database server
$con = mysql_connect($dbhost, $dbuser, $dbpassword);
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
@mysql_select_db($database,$con) or die("Error connecting to db.");




//First decode the array
$arr = $_POST["json"];
$decarr = json_decode($arr, true);
$count = count($decarr);


for ($x=0; $x < $count; $x++){
$newrec = $decarr; 
$id = $newrec['id']; 
$name = $newrec['name']; 
$id_continent = $newrec['id_continent']; 
$email = $newrec['email']; 
$lastvisit = $newrec['lastvisit']; 
$cdate = $newrec['cdate']; 
$ddate = $newrec['ddate']; 

}

// Create insert array
$values[] = "('".$id."', '".$name."', '".$id_continent."', '".$lastvisit."','".$cdate."','".$ddate."','".$email."' )";  





// Insert the records   

$sql = "INSERT INTO finish (id, name, id_continent, lastvisit,cdate,ddate, email)
VALUES ".implode(',', $values);

$result = mysql_query($sql, $con) or die(mysql_error());  


?>

1 个答案:

答案 0 :(得分:3)

抱歉,但我不能完整地关注你。首先,使用从服务器返回的数据(来自url:'request.php')填充网格。数据可能来自数据库。数据项的id也被填充。如果正确填充网格,则每行(rowid)的id属性和id列的内容将包含数据库中的ID。

要删除数据库中的数据,您只需要删除需要删除的行ID。而不是将所有数据从选定的行发送到服务器。你为什么这样做?服务器已经有了所有数据?唯一的解释是您需要并发控制的信息。好的,让我们确实需要发送信息。

现有代码中的主要问题在我看来逻辑中的错误:您首先获得所有选定行的 ID 。然后为每个id进行单独的Ajax调用。在调用的success回调内部(在服务器端成功删除一个行之后),您获得所有选定的行删除所有选定的行来自网格。由于success将以异步方式调用,因此您可以在将数据发送到服务器之前从网格中删除一些行。

此外,您使用已经editGridRow方法编辑行。存在delGridRow方法将选定的ID列表发送到服务器(默认URL为editurl: "sendyo.php"),并在从服务器端成功完成配置后删除行。您可以使用delData参数(请参阅the documentation)将任何其他信息发送到ID列表。在最简单的形式中,代码($("#minibutton").click句柄的句柄)可能就像

$("#list").jqGrid("delGridRow", $("#list").jqGrid("getGridParam", "selarrrow"));

或者,如果您需要发送所有选定行的完整内容,那么

var $grid = $("#list"),
    selectedrows = $grid.jqGrid("getGridParam", "selarrrow"),
    i,
    selectedData = [];

if (selectedrows.length) {
    for (i = 0; i < selectedrows.length; i++) {
        // fill array selectedData with the data from selected rows
        selectedData.push($grid.jqGrid("getRowData", selectedrows[i]));
    }
    $grid.jqGrid("delGridRow", $grid.jqGrid("getGridParam", "selarrrow"), {
        delData: {
            gridData: JSON.stringify(selectedData)
        }
    });
}

以上代码会将 tree 参数发送到服务器:oper,其值为"del"id以逗号分隔的所选(已删除)rowid列表和gridData,其中包含以JSON格式序列化的已删除行的内容数组。

您当前使用#minibutton按钮。如果您使用navGrid代替,那么您可以简化代码。您可以使用为您调用delGridRow的删除按钮。您可以使用onclickSubmit回调来扩展发布的数据。如果您不需要导航栏中的“添加”和“搜索”按钮,则可以使用以下代码

$("#list").jqGrid("navGrid", "#pager", { add: false, search: false }, {}, {}, {
    url: "jsonsend.php",
    onclickSubmit: function (options, ids) {
        var $self = $(this), selectedrows = ids.split(","), selectedData = [], i,
            l = selectedrows.length;

        for (i = 0; i < l; i++) {
            // fill array selectedData with the data from selected rows
            selectedData.push($self.jqGrid("getRowData", selectedrows[i]));
        }

        // the returned data will be combined with the default data
        // posted by delGridRow
        return {
            gridData: JSON.stringify(selectedData)
        }
    }
});