如何在jqgrid中實現內聯編輯

-1

我想在jqgrid中實現內聯編輯。我有形式像下面的圖片 enter image description here 如何在jqgrid中實現內聯編輯

我希望用戶可以在數量textBox中輸入正確的數字，然後選擇CurrencyUnit到第2行並輸入數量等，但是當選擇第2行數據第1行重置像圖片下面 enter image description here 在此pictute我輸入金額，並選擇CurrencyUnit和我罠選擇Row 2當選擇行2

我寫此代碼

jQuery(document).ready(function() { 
      var localstr = "0:Select Ones;"; 
      localstr = "1:Rial"; 
      localstr += ";2:Dollar"; 
      localstr += ";3:Youro"; 
      localstr += ";4:Derham"; 
      localstr += ";6:Pond"; 

      var lastSel; 
      var grid = jQuery("#list"); 
      grid.jqGrid({ 
       url: 'jQGridHandler.ashx', 

       postData: { ActionPage: 'ClearanceCost', Action: 'Fill' }, 
       ajaxGridOptions: { cache: false }, 
       loadonce: true, 
       direction: "rtl", 

       datatype: 'json', 
       height: 'auto', 
       colNames: ['RequestID', 'WayBillNo', 'CostId', 'CostName', 'Amount', 'CurrencyUnit '], 
       colModel: [ 
        { name: 'REQUEST_ID', width: 100, sortable: true, hidden: true }, 
         { name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true }, 
         { name: 'COST_ID', index: '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: 'Subcategory', index: 'Subcategory', width: 200, formatter: 'select', editable: true, edittype: 'select', editoptions: { value: localstr} } 
       ], 
       sortname: 'Name', 
       viewrecords: true, 
       rownumbers: true, 
       sortorder: "desc", 
       editurl: 'jQGridHandler.ashx?ActionPage=ClearanceCost&Action=Insert', 
       onSelectRow: function (id) { 
        if (id && id !== lastSel) { 
         grid.jqGrid('restoreRow', lastSel); 
         var cm = grid.jqGrid('getColProp', 'CURRENCY_ID'); 
         cm.editable = false; 
         grid.jqGrid('editRow', id, true, null, null, 'jQGridHandler.ashx?ActionPage=ClearanceCost&Action=Insert'); 
         cm.editable = true; 
         lastSel = id; 
        } 
       }, 
       pager: '#pager', 
       caption: "" 
      }).jqGrid('navGrid', '#pager', { edit: true, add: true, del: false, search: false, refresh: false }); 

      $("#btnsave").click(function() { 
       var totalAmount = 0, totalTax = 0, i = getColumnIndexByName(grid, 'CURRENCY_ID'); 

       $("tbody > tr.jqgrow > td:nth-child(" + (i + 1) + ")", grid[0]).each(function() { 
        alert(getTextFromCell(this)); 

       }); 
       //    i = getColumnIndexByName(grid, 'tax'); 
       //    $("tbody > tr.jqgrow > td:nth-child(" + (i + 1) + ")", grid[0]).each(function() { 
       //     totalTax += Number(getTextFromCell(this)); 
       //    }); 
      }); 

      function getColumnIndexByName(grid1, columnName) { 
       var cm = grid1.jqGrid('getGridParam', 'colModel'); 
       for (var i = 0, l = cm.length; i < l; i++) { 
        if (cm[i].name === columnName) { 
         return i; // return the index 
        } 
       } 
       return -1; 
      } 

      function getTextFromCell(cellNode) { 
       return cellNode.childNodes[0].nodeName == "INPUT" ? cellNode.childNodes[0].value : cellNode.textContent || cellNode.innerText; 
      } 

     });

我想要用戶輸入所有金額項目，然後當輸入所有金額點擊ClickMe按鈕和數據發送到服務器，但我不知道如何實現這一點。感謝所有

來源

2012-09-03 Pouya

更改代碼這個

onSelectRow: function (id) { 
        if (id && id !== lastSel) { 
         grid.jqGrid('restoreRow', lastSel); 
         grid.saveRow(lastSel,true,'clientArray'); 
         grid.jqGrid('restoreRow',lastSel); 

         grid.jqGrid('editRow', id, true, null, null, 'clientArray'); 

        } 
       },

來源

2012-09-03 15:19:12 Pouya

如何在jqgrid中實現內聯編輯

回答

相關問題