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（第四个参数）：如果已定义，则此参数将替换options数组中的editurl参数。如果设置为'clientArray'，则数据不会发布到服务器，而是仅保存到网格中（可能用于以后的手动保存）。参考：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow

事实上，我尝试过这种方式，但我写了'mydata'而不是'clientArray' ......

非常感谢Oleg和Justin，我们得到了它！

Answer 3

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

如果您确实需要在本地使用网格进行最多操作并在结束时发送结果，则可以尝试新的beta版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");
});
});

jqGrid＆gt;数据类型：“local”＆gt;获取并保存（立即）列的所有已编辑单元格？

4 个答案: