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

Вот способ решить мою проблему. Я пытался с любым идентификатором, и он работает хорошо, изменения сохраняются:

...
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' ...

Так что большое спасибо, Олег и Джастин, мы получили!

Answer 2

Проблема в том, что getRowData не предназначен для использования, когда строка находится в режиме редактирования. Из jqGrid документов :

Не используйте этот метод при редактировании строки или ячейки. Это вернет содержимое ячейки, а не действительное значение элемента ввода

Как вы заметили, если вы попытаетесь использовать этот метод при редактировании строки, вы получите необработанный HTML вместо значения. У вас есть два варианта здесь:

• Как предполагает Qualliarys, вы можете сначала сохранить данные, например, используя saveRow.
• Кроме того, вы можете самостоятельно проанализировать входные теги, возможно, с помощью jQuery.

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