如何实现的jqGrid

Question

编辑内嵌我在jqGrid的首发，我想实现的jqGrid我有这个网格

$(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 }); 

我首先要填写所有相应的costType中的jqGrid联编辑，我想用户量的细胞输入量和在currency_unit单元格中选择货币单位，在这个网格中，当用户点击行时，这一行更改可编辑，但是当页面加载时我想要所有行都是可编辑的。 谢谢大家。

我更改代码，但我不能保存在数据库中，我写这篇文章的代码

$(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(); 
    }); 
}); 

但是这个代码不工作，奥列格先生感谢帮助我得到的数据排。

EDIT02：我使用此代码创建这个

。我想，当用户点击保存按钮，所有的数据都排发送到服务器，但无法工作

$(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(); 
    }); 
}); 

和身体

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

感谢所有

新的编辑：我对这个问题编写代码

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

第一个问题：这段代码是真的吗？我现在无法填充下拉列表。请帮我先生先生。谢谢

Answer 1

您可以枚举网格中的所有行并在loadComplete（请参阅here代码示例）中调用editRow。您应该了解该方法的一些缺点：

• 在循环中以行内编辑模式设置网格线可以在行数很大的情况下缓慢工作。所以你应该在案件中慎重选择rowNum。性能下降的原因很简单：页面上一个元素的每次更改都会跟着重新计算页面上所有其他元素的位置或至少reflow。 editRow方法更改行中的一个单元格，然后更改另一个单元格，依此类推。在所有行的循环中应用editRow会在每次修改单元格后重新整个页面。在大电网的情况下，你将会有很多回流。
• 如果您需要从编辑行中读取信息，您将需要做一些技巧，因为getRowData和getCol在这种情况下不起作用。在the answer中可以找到相应的解决方案。如果如果足以让您获取上次保存的数据，则可以使用getLocalRow方法。

已更新：可编辑行之间的键盘导航实际上绝对是另一个问题。不过，您可以在网格上绑定​​事件，并在需要时将焦点更改为另一个单元格。例如the next demo显示如何最多和向下箭头键可以连同标准标签和Shift + Tab键键使用：

$('#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(); 
     } 
    } 
});