Comment mettre en œuvre modifier en ligne dans jqGrid

Question

i STARTER jqGrid, je veux mettre en œuvre modifier en ligne dans jqGrid j'ai cette grille

$(function() { 
    var grid = $('#list'); 
    grid.jqGrid({ 
     url: 'jQGridHandler.ashx', 
     postData: { ActionPage: 'ClearanceCost', Action: 'Fill' }, 
     ajaxGridOptions: { cache: false }, 
     loadonce: true, 
     datatype: 'json', 
     height: 490, 
     colNames: ['REQUEST_ID','WAYBILL_NO', 'COST_ID', 'COST_NAME','COST_AMOUNT', 'CURRENCY_ID ', 'CURRENCY_NAME','REMARK'], 
     colModel: [ 
      { name: 'REQUEST_ID', width: 100, sortable: true,hidden:true }, 
      { name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true }, 
      { name: 'COST_ID', width: 200, sortable: true, hidden: true }, 
      { name: 'COST_NAME', width: 200, sortable: true }, 
      { name: 'COST_AMOUNT', width: 100, sortable: true }, 
      { name: 'CURRENCY_ID', width: 100, sortable: true, hidden: true }, 
      { name: 'CURRENCY_NAME', width: 200, sortable: true }, 
      { name: 'REMARK', width: 200, sortable: true } 
     ], 
     gridview: true, 
     rowNum: 20, 
     rowList: [20, 40, 60], 
     pager: '#pager', 
     sortname: 'REQUEST_ID', 
     viewrecords: true, 
     sortorder: 'ASC', 
     rownumbers: true, 
     editurl: 'jQGridHandler.ashx', 
     onSelectRow: function (id) { 
      if (id && id !== lastsel) { 
       jQuery('#list').jqGrid('restoreRow', lastsel); 
       jQuery('#list').jqGrid('editRow', id, true); 
       lastsel = id; 
      } 
     } 
     }); 
     grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {}, 
      { multipleSearch: true, overlay: false, width: 460 }); 

i d'abord remplir tous costType dans jqGrid et je veux l'utilisateur Entrez Montant en cellule et sélectionnez l'unité monétaire dans la cellule currency_unit, dans cette grille lorsque l'utilisateur clique sur la ligne, cette ligne change de façon modifiable, mais je veux quand la page est chargée, toute la ligne est modifiable. merci à tous.

i Changer le code Mais je ne peux pas obtenir la ligne de données pour la base de données de sauvegarde dans j'écris ce code

$(function() { 
    var lastSel; 
    var grid = $('#list'); 
    calculateTotal = function() { 
     var totalAmount = grid.jqGrid('getCol', 'COST_AMOUNT', false, 'd'); 
     var totalTax = grid.jqGrid('getCol', 'COST_NAME', false, 'd'); 
     alert(totalAmount.length); 
     for (var i = 0; i <= totalAmount.length - 1; i++) { 
      alert(totalTax[i] + "=" + totalAmount[i]); 
     } 
    }; 
    grid.jqGrid({ 
     url: 'jQGridHandler.ashx', 
     postData: { ActionPage: 'ClearanceCost', Action: 'Fill' }, 
     ajaxGridOptions: { cache: false }, 
     loadonce: true, 
     direction: "rtl", 
     datatype: 'json', 
     height: 490, 
     colNames: ['REQUEST_ID','WAYBILL_NO', 'COST_ID', 'COST_NAME','COST_AMOUNT', 'CURRENCY_ID ', 'CURRENCY_NAME','REMARK'], 
     colModel: [ 
      { name: 'REQUEST_ID', width: 100, sortable: true, hidden: true }, 
      { name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true }, 
      { name: 'COST_ID', width: 200, sortable: true, hidden: true }, 
      { name: 'COST_NAME', width: 200, sortable: true }, 
      { name: 'COST_AMOUNT', width: 100, sortable: true, editable: true }, 
      { name: 'CURRENCY_ID', width: 100, sortable: true, hidden: true }, 
      { name: 'CURRENCY_NAME', width: 200, sortable: true, editable: true }, 
      { name: 'REMARK', width: 200, sortable: true, editable: true } 
     ], 
     gridview: true, 
     rowNum: 30, 
     rowList: [30, 60, 90], 
     pager: '#pager', 
     sortname: 'REQUEST_ID', 
     viewrecords: true, 
     sortorder: 'ASC', 
     caption: 'درخواست ها......', 
     rownumbers: true, 
     loadComplete: function() { 
      var $this = $(this), rows = this.rows, l = rows.length, i, row; 
      for (i = 0; i < l; i++) { 
       row = rows[i]; 
       if ($.inArray('jqgrow', row.className.split(' ')) >= 0) { 
        $this.jqGrid('editRow', row.id, true); 
       } 
      } 
     } 
    }); 
    grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {}, 
     { multipleSearch: true, overlay: false, width: 460 }); 

    $("#btnsave").click(function() { 
     calculateTotal(); 
    }); 
}); 

mais ce code, pas de travail m oleg merci de me aide.

EDIT02: Je crée cette

avec ce code. je veux lorsque l'utilisateur cliquez sur le bouton enregistrer toutes les données toutes les ligne envoyer au serveur, mais fonctionne pas

$(document).ready(function() { 
    var mydata = [ 
      { COST_NAME: "A", COST_AMOUNT: "", CURRENCY_NAME: "" }, 
      { COST_NAME: "b", COST_AMOUNT: "", CURRENCY_NAME: "" }, 
      { COST_NAME: "c", COST_AMOUNT: "", CURRENCY_NAME: "" }, 
      { COST_NAME: "d", COST_AMOUNT: "", CURRENCY_NAME: "" }, 
      { COST_NAME: "e", COST_AMOUNT: "", CURRENCY_NAME: "" }, 
      { COST_NAME: "f", COST_AMOUNT: "", CURRENCY_NAME: "" }, 
      { COST_NAME: "g", COST_AMOUNT: "", CURRENCY_NAME: "" } 
     ]; 
    var lastSel; 
    var grid = $('#list'); 
    calculateTotal = function() { 
     var totalAmount = grid.jqGrid('getCol', 'COST_AMOUNT', false, 'd'); 
     var totalTax = grid.jqGrid('getCol', 'COST_NAME', false, 'd'); 
     alert(totalAmount.length); 
     for (var i = 0; i <= totalAmount.length - 1; i++) { 
      alert(totalTax[i] + "=" + totalAmount[i]); 
     } 
    }; 
    grid.jqGrid({ 
     postData: { ActionPage: 'ClearanceCost', Action: 'Fill' }, 
     ajaxGridOptions: { cache: false }, 
     loadonce: true, 
     datatype: "local", 
     data: mydata, 
     mtype: 'POST', 
     height: 'auto', 
     colNames: [ 'COST_NAME', 'COST_AMOUNT', 'CURRENCY_NAME'], 
     colModel: [ 
      { name: 'COST_NAME', width: 200, sortable: true }, 
      { name: 'COST_AMOUNT', width: 100, sortable: true, editable: true }, 
      { name: 'CURRENCY_NAME', width: 200, sortable: true, editable: true } 
     ], 
     gridview: true, 
     rowNum: 30, 
     rowList: [30, 60, 90], 
     pager: '#pager', 
     viewrecords: true, 
     sortorder: 'ASC', 
     rownumbers: true, 
     loadComplete: function() { 
      var $this = $(this), rows = this.rows, l = rows.length, i, row; 
      for (i = 0; i < l; i++) { 
       row = rows[i]; 
       if ($.inArray('jqgrow', row.className.split(' ')) >= 0) { 
        $this.jqGrid('editRow', row.id, true); 
       } 
      } 
     } 
    }); 
    grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {}, 
     { multipleSearch: true, overlay: false, width: 460 }); 

    $("#btnsave").click(function() { 
     calculateTotal(); 
    }); 
}); 

et le corps

<table id="list"></table> 
<input type="button" value="Save" id="btnsave"/> 

remercie tous

NEW EDIT: i pour ce problème écrire ce code

grid.jqGrid({ 
    url: 'jQGridHandler.ashx', 
    postData: { ActionPage: 'ClearanceCost', Action: 'Fill' }, 
    ajaxGridOptions: { cache: false }, 
    loadonce: true, 
    direction: "rtl", 
    pgtext: "صفحه {0} از {1}", 
    datatype: 'json', 
    height: 490, 
    colNames: ['شماره درخواست', 'شماره بارنامه', 'شماره هزینه', 'نام هزینه', 'مبلغ', 'کد واحدهزینه ', 'توضیحات'], 
    colModel: [ 
     { name: 'REQUEST_ID', width: 100, sortable: true, hidden: true }, 
     { name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true }, 
     { name: 'COST_ID', width: 200, sortable: true, hidden: true }, 
     { name: 'COST_NAME', width: 200, sortable: true }, 
     { name: 'COST_AMOUNT', width: 100, sortable: true, editable: true }, 
     { name: 'CURRENCY_ID', width: 100, sortable: true, editable: true, edittype: 'select', editoptions: { 
       url: "JQGridHandler.ashx?ActionPage=CurrencyUnit&Action=FillDrop", 
       dataInit: function (data) { 
        var response = jQuery.parseJSON(data.responseText); 
        var s = '<select>'; 
        s += '<option value="0">انتخاب کنید</option>'; 
        if (response && response.length) { 
         for (var i = 0, l = response.length; i < l; i++) { 
          var ri = response[i]; 
          s += '<option value="' + ri.CURRENCY_ID + '">' + ri.CURRENCY_NAME + '</option>'; 
         } 
        } 
        return s + "</select>"; 

       } 
      } 
     }, 
     { name: 'REMARK', width: 200, sortable: true, editable: true } 
    ], 
    gridview: true, 
    rowNum: 30, 
    rowList: [30, 60, 90], 
    pager: '#pager', 
    sortname: 'REQUEST_ID', 
    viewrecords: true, 
    sortorder: 'ASC', 
    caption: 'درخواست ها......', 
    rownumbers: true, 
    loadComplete: function() { 
     var strOption = ""; 
     $.ajax({ 
      url: 'JQGridHandler.ashx', 
      contentType: 'application/json; charset=utf-8', 
      data: { ActionPage: 'CurrencyUnit', Action: 'FillDrop' }, 
      success: function (data) { 
       var rows = data.rows; 
       strOption = '<option value=0>انتخاب کنید</option>'; 
       if (data.rows.length > 0) { 
        for (var i = 0, l = rows.length; i < l; i++) { 
         var ri = rows[i]; 
         strOption += '<option value="' + ri.cell[0] + '">' + ri.cell[1] + '</option>'; 
        } 
       } 
      }, 
      dataType: 'json' 
     }); 

     var $this = $(this); 
     rows = this.rows; 
     var l = rows.length, i, row; 

     for (i = 0; i < l; i++) { 
      row = rows[i]; 

//    var $t = grid.jqGrid('getCell', row.id, 'CURRENCY_ID'); 
//    var $id = $($t).attr("id"); 

//    $("#" + $id).val(strOption); 
        // console.log(row.id); 

      var selRowId = grid.jqGrid('getGridParam', row.id); 
       console.log(selRowId); 
       console.log(grid.jqGrid('getCell', row.id, 'CURRENCY_ID')); 

      if ($.inArray('jqgrow', row.className.split(' ')) >= 0) { 
       $this.jqGrid('editRow', row.id, true); 
      } 

     } 
    }, 
    editurl: "jQGridHandler.ashx" 
}); 
grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {}, 
    { multipleSearch: true, overlay: false, width: 460 }); 

première question: ce code est vrai? et maintenant je ne peux pas remplir dropdownlist. s'il vous plaît aidez-moi mr.Oleg. merci

Answer 1

Vous pouvez énumérer toutes les lignes de la grille et appeler editRow à l'intérieur de loadComplete (voir here pour l'exemple de code). Vous devez comprendre certains inconvénients de l'approche:

• La définition d'une ligne de grille en mode d'édition en ligne dans la boucle peut fonctionner lentement en cas de grand nombre de lignes. Donc, vous devriez choisir avec soin dans le cas. La raison de la lenteur de la performance est simple: chaque changement d'un élément sur la page suit recalcul des positions de tous les autres éléments sur la page ou au moins à reflow. editRow méthode changer une cellule dans la ligne, puis changer un autre et ainsi de suite. L'application de editRow dans la boucle pour toutes les lignes suit pour reflow de la page entière après chaque modification de cellule. En cas de grosse grille, vous aurez beaucoup de reflows.
• Si vous devez lire des informations à partir des lignes d'édition, vous devrez faire quelques astuces car getRowData et getCol ne fonctionneront pas dans l'affaire. Dans the answer vous pouvez trouver la solution correspondante. S'il vous suffit d'obtenir les dernières données sauvegardées, vous pouvez utiliser la méthode getLocalRow.

MISE À JOUR: La navigation du clavier entre les lignes modifiables est en réalité tout à fait une autre question. Néanmoins, vous pouvez lier keydown événement sur la grille par exemple et changer de focus sur l'autre cellule si cela est nécessaire.Par exemple the next demo montre sur la façon dont Up et vers le bas touches fléchées peuvent être utilisées conjointement avec la norme Tab et Maj + Tab clés:

$('#list').keydown(function (e) { 
    var $td = $(e.target).closest("td"), 
     $tr = $td.closest("tr.jqgrow"), 
     ci, ri, rows = this.rows; 
    if ($td.length === 0 || $tr.length === 0) { 
     return; 
    } 
    ci = $.jgrid.getCellIndex($td[0]); 
    ri = $tr[0].rowIndex; 
    if (e.keyCode === $.ui.keyCode.UP) { // 38 
     if (ri > 0) { 
      $(rows[ri-1].cells[ci]).find("input,select").focus(); 
     } 
    } 
    if (e.keyCode === $.ui.keyCode.DOWN) { // 40 
     if (ri + 1 < rows.length) { 
      $(rows[ri+1].cells[ci]).find("input,select").focus(); 
     } 
    } 
});