jqGrid > datatype : "local" > 获取并保存（一次）列的所有已编辑单元格？

Question

我有一个带有datatype = "local" 的网格。数据是一个数组，如下：

var mydata = [{id:1,valeur:"a_value",designation:"a_designation"}, {id:2,...}, ...];

第二列（名为valeur）是网格中唯一可编辑的列（editable:true 设置在colModel）

在网格的寻呼机中，我有 2 个按钮：

• 用于编辑名为 valeur 的列的所有单元格（一次）：

  $("#mygrid").jqGrid('navButtonAdd','#pager',{caption:"Edit values",
  onClickButton:function(){ var ids = $('#mygrid').jqGrid('getDataIDs');
  for(var i=0;i<ids.length+1;i++){ $('#mygrid').jqGrid('editRow',ids[i],true);}
  }});
  

• 另一个用于（一次）保存已编辑单元格的所有更改：

  $("#mygrid").jqGrid('navButtonAdd','#pager',{caption:"Save changes",
  onClickButton:function(){var ids = $('#mygrid').jqGrid('getDataIDs');
  for(var i=0;i<ids.length+1;i++){ 
     ... ??? ...
  }}});
  

当我使用时：

var rd = $("#mygrid").jqGrid('getRowData',ids[i]);
alert("valeur="+rd.valeur);

对于每个显示，我都会得到如下信息：

valeur=< input class="editable" role="textbox" name="valeur" id="1_valeur" style="width: 98%;" type="text"> ...

• 因此，当单元格处于编辑模式时，所有 rd.valeur 都是输入文本标记！
• 如果不是，我会得到单元格的初始值！

如何获取并保存此列的所有更改（编辑模式下的所有单元格）？

Answer 1

问题是getRowData 不适合在行处于编辑模式时使用。来自jqGrid Docs：

在编辑行或单元格时不要使用此方法。这将返回单元格内容，而不是输入元素的实际值

正如您所观察到的，如果您在编辑行时尝试使用此方法，您将获得原始 HTML 而不是值。您有两种选择：

• 正如 Qualliarys 建议的那样，您可以先保存数据，例如使用 saveRow。
• 或者，您可以自己解析输入标签，也许使用 jQuery 来协助。

Answer 2

这是解决我的问题的方法。我尝试了任何 id 并且效果很好，更改已保存：

...
onSelectRow: function(id){
  $('#list4').jqGrid('saveRow',lastsel,false,'clientArray');
  if(id && id!==lastsel){
    $('#list4').jqGrid('restoreRow',lastsel);
    lastsel=id;
  }
  $('#list4').jqGrid('editRow',id,false);
},
...

url（第四个参数）：如果已定义，此参数将替换选项数组中的editurl 参数。如果设置为'clientArray'，则数据不会发布到服务器，而是仅保存到网格中（大概是为了以后手动保存）。参考：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow

其实我也试过这种方式，但是我写的是'mydata'而不是'clientArray'...

非常感谢 Oleg 和 Justin，我们知道了！

Answer 3

你尝试用他自己的方式使用jqGrid。为什么？在编辑模式下同时切换 jqGrid 的所有行我发现不是最好的方法。

如果您确实需要在本地对网格进行最多操作并在最后发送结果，您可以尝试新的测试版 jqGrid。这可能是最适合您的方式。详情请见http://www.trirand.com/blog/?page_id=393/releases/jqgrid-3-7-beta/#p17463。

Answer 4

$ ( document).ready(function(){
var lastsel=-1;
$("#list4").jqGrid({
  data:mydata,
  datatype: "local",
  pager: '#pager14',
  height:"100%",
  autowidth: true,
  multiselect: false,
  sortable:false,
  sortname: 'id',
  sortorder: "desc",
  colNames:['Index','Label','Value','Designation','','Name'],
  colModel:[
    {name:'id',index:'id',sorttype:"int",hidden:true},    
    {name:'label',index:'label',sorttype:"text",resizable:false,width:80},
    {name:'valeur',editable:true,resizable:false,width:85},
    {name:'designation',index:'designation',sorttype:"text",resizable:false,width:200},
    {name:'unite',sortable:false,align:'center',resizable:false,width:10},
    {name:'name',index:'name',sorttype:"text",hidden:true}
  ],  
  afterInsertRow: function(rowid){    
    $("#list4").jqGrid('setCell',rowid,'label','',{'font-weight':'bold','border-top':'0px','border-left':'0px'});
    $("#list4").jqGrid('setCell',rowid,'label','','ui-state-default');
  },
  ondblClickRow: function(id, ri, ci) {
    $('#list4').jqGrid('editRow',id,true);
  },
  onSelectRow: function(id){
    if(id && id!==lastsel){
      $('#list4').jqGrid('restoreRow',lastsel);
      lastsel=id;
    }
  },
  footerrow :false,
  pgbuttons:true,
  editurl: "client_test2.php",
  caption: "Event identity : attention il faut mettre un certificat en S_SESSION !!!"
});

var mydata = [
  {id:1,label:"Buyer",valeur:"<?php echo $_SESSION["certificats"][0]["acheteur"]?>",designation:"Nom de l'acheteur de la marchandise",unite:"",name:'acheteur'},
  {id:2,label:"Contract",valeur:"<?php echo $_SESSION["certificats"][0]["contrat"]?>",designation:"Liste des contrats établis entre les vendeurs et l'acheteur",unite:"",name:'contrat'},
  {id:3,label:"Seller",valeur:"<?php echo $_SESSION["certificats"][0]["vendeur"]?>",designation:"Nom du vendeur de la marchandise",unite:"",name:'vendeur'},
  {id:4,label:"Network",valeur:"<?php echo $_SESSION["certificats"][0]["filiere"]?>",designation:"Filière complète des vendeurs",unite:"",name:'filiere'},
  {id:5,label:"Product",valeur:"<?php echo $_SESSION["certificats"][0]["produit"]?>",designation:"Nom de la marchandise",unite:"",name:'produit'},
  {id:6,label:"Variety",valeur:"<?php echo $_SESSION["certificats"][0]["variete"]?>",designation:"Nom de la variété de la marchandise",unite:"",name:'variete'},
  {id:7,label:"Weight",valeur:"<?php echo $_SESSION["certificats"][0]["poids"]?>",designation:"Nombre de tonnes contracté",unite:"<img src=\'/img/v3/aide0.png\'title=\'Metric Ton : 1000,000 mt\'/>",name:'poids'},
  {id:8,label:"Controler",valeur:"<?php echo $_SESSION["certificats"][0]["controleur"]?>",designation:"Identitées du contrôleur",unite:"",name:'controleur'},
  {id:9,label:"Start",valeur:"<?php echo $_SESSION["certificats"][0]["debut"]?>",designation:"Date et heure de début de l'événement",unite:"<img src=\'/img/v3/aide0.png\'title=\'Datetime : 2008-02-23 08:00:00\'/>",name:'debut'},
  {id:10,label:"End",valeur:"<?php echo $_SESSION["certificats"][0]["fin"]?>",designation:"Date et heure de fin de l'événement",unite:"<img src=\'/img/v3/aide0.png\'title=\'Datetime : 2008-02-23 08:00:00\'/>",name:'fin'},
];

for(var i=0;i<=mydata.length;i++){
  $("#list4").jqGrid('addRowData',i+1,mydata[i]);
}

$("#list4").jqGrid('navGrid',"#pager14",{view:false,edit:false,add:false,del:false,search:false,refresh:false,refreshtext:''});
$("#list4").jqGrid('sortableRows');

$("#list4").jqGrid('navButtonAdd','#pager14',{
  caption:"Edit values &nbsp;",buttonicon:"ui-icon-pencil",
  onClickButton:function(){
    var ids = $('#list4').jqGrid('getDataIDs');
    for(var i=0;i<ids.length+1;i++){
      $('#list4').jqGrid('editRow',ids[i],true);
    }
  }
});


$("#list4").jqGrid('navButtonAdd','#pager14',{
  caption:"Save changes &nbsp;",buttonicon:"ui-icon-disk",
  onClickButton:function(){
    var ids = $('#list4').jqGrid('getDataIDs');
    for(var i=0;i<ids.length+1;i++){
      $('#list4').jqGrid('saveRow',ids[i],false,'mydata');
    }
  }
});

$("#list4").jqGrid('navButtonAdd','#pager14',{
  caption:"",buttonicon:"ui-icon-info",
  onClickButton:function(){

  }
});


$("#list4 tr").hover(
  function(){$(this).find("td").eq(1).removeClass('ui-state-default'); $(this).addClass("ui-state-hover");},
  function(){ if(!$(this).hasClass("ui-state-active")) $(this).find("td").eq(1).addClass('ui-state-default'); }
);

$("#list4 tr").click(
    function(){$("#list4 tr").each(function() {$(this).find("td").eq(1).addClass('ui-state-default'); });
    $(".ui-state-active").removeClass("ui-state-active");
    $(".ui-state-highlight").removeClass("ui-state-highlight");
    $(this).find("td").eq(1).removeClass('ui-state-default');
    $(this).addClass("ui-state-active");
});
});