jqgrid將數據添加到網格，無需回傳

Question

我需要用戶將數據添加到網格，而不會回發。我認爲cellsubmit：'clientArray'會做到這一點，但我仍然得到「沒有網址已設置」的錯誤。以下代碼是我從Oleg借來的一個網格，但是使用了cellsubmit集。

$(document).ready(function() { 
     'use strict'; 
     var myData = [ 
       { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, 
       { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, 
       { id: "3", invdate: "2011-07-30", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" }, 
       { id: "4", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, 
       { id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, 
       { id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" }, 
       { id: "7", invdate: "2011-07-30", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, 
       { id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, 
       { id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" }, 
       { id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" }, 
       { id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }, 
       { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" } 
      ], 
      myGrid = $("#list"), 
      lastSel = -1, 
      inEdit; 

     myGrid.jqGrid({ 
      datatype: 'local', 
      data: myData, 
      colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'], 
      colModel: [ 
       { name: 'id', index: 'id', width: 70, align: 'center', sorttype: 'int', formatter: 'int', editable: true, 
        editoptions: { 
         //readonly: 'readonly', 
         disabled: 'disabled', 
         dataInit: function (elem) { 
          if (!inEdit) { 
           $(elem).val($.jgrid.randId()); 
          } 
         } 
        } 
       }, 
       { name: 'invdate', index: 'invdate', width: 75, align: 'center', sorttype: 'date', 
        formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y', 
        editable: true 
       }, 
       { name: 'name', index: 'name', width: 65, editable: true }, 
       { name: 'amount', index: 'amount', width: 75, sorttype: 'int', formatter: 'int', editable: true, 
        editoptions: { 
         dataInit: function (elem) { 
          $(elem).mask("99:99"); 
         } 
        } 
       }, 
       { name: 'tax', index: 'tax', width: 52, sorttype: 'int', formatter: 'int', editable: true }, 
       { name: 'total', index: 'total', width: 60, sorttype: 'int', formatter: 'int', editable: true }, 
       { name: 'closed', index: 'closed', width: 67, align: 'center', formatter: 'checkbox', editable: true, 
        edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' } 
       }, 
       { name: 'ship_via', index: 'ship_via', width: 95, align: 'center', formatter: 'select', editable: true, 
        edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime' } 
       }, 
       { name: 'note', index: 'note', width: 60, sortable: false, editable: true, 
        editoptions: { 
         dataInit: function (elem) { 
          $(elem).val(inEdit ? "in Edit" : "in Add"); 
         } 
        } 
       } 
      ], 
      rowNum: 10, 
      rowList: [5, 10, 20], 
      pager: '#pager', 
      gridview: true, 
      ignoreCase: true, 
      rownumbers: true, 
      sortname: 'invdate', 
      viewrecords: true, 
      cellsubmit: 'clientArray', 
      sortorder: 'desc', 
      caption: 'Combining Advanced Searching and Toolbar Searching in one grid', 
      height: 'auto' 
     }); 
     myGrid.jqGrid('navGrid', '#pager', 
      { del: false, search: false }, 
      { // Edit 
       recreateForm: true, 
       beforeInitData: function() { 
        inEdit = true; 
       } 
      }, 
      { // Add 
       recreateForm: true, 
       beforeInitData: function() { 
        inEdit = false; 
       } 
      }); 
    }); 

Answer 1

你試圖做的是使用的形式編輯編輯一個不jqGrid的當前支持本地數據。儘管如此，我如何描述here，其中一個可以實現這一點。

我從the answer獲得演示並修改了一點以使用當前版本的jqGrid。相應的demo。演示可以根據需要做更多的事情，例如上下文菜單。您可以刪除不需要的功能。