jqGrid和jqPivot：它是否支持內聯或單元格編輯？

我使用jqGrid和jqPivot API。jqGrid和jqPivot：它是否支持內聯或單元格編輯？

我的問題是我需要編輯樞軸列（PHI，JAP，美國，KOR，CHI和SIN）。 jqGrid中使用jqPivot支持內聯編輯或單元格編輯功能嗎？

這裏是我下面的代碼：

var mydata = [ 
 
    {id: "1", segment: "Transfer", type:"Revenue", weekName: "Week Total" , week:"7/6/2013", PHI:"8", JAP:"12", USA:"54", KOR:"67", CHI:"65", SIN:"3" }, 
 
\t {id: "1", segment: "Transfer", type:"Revenue", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"8", USA:"8", KOR:"67", CHI:"8", SIN:"54" }, 
 
\t {id: "1", segment: "Transfer", type:"Revenue", weekName: "Week Two", week:"6/22/2013", PHI:"8", JAP:"8", USA:"43", KOR:"8", CHI:"8", SIN:"8" }, 
 
\t {id: "1", segment: "Transfer", type:"Revenue", weekName: "Week Three", week:"6/29/2013", PHI:"8", JAP:"43", USA:"8", KOR:"43", CHI:"43", SIN:"8" }, 
 
\t {id: "1", segment: "Transfer", type:"Revenue", weekName: "Week Four", week:"7/6/2013", PHI:"34", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" }, 
 
    
 
\t {id: "1", segment: "Transfer", type:"QWPE", weekName: "Week Total", week:"7/6/2013", PHI:"8", JAP:"45", USA:"8", KOR:"54", CHI:"8", SIN:"8" }, 
 
\t {id: "1", segment: "Transfer", type:"QWPE", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"43" }, 
 
\t {id: "1", segment: "Transfer", type:"QWPE", weekName: "Week Two", week:"6/22/2013", PHI:"8", JAP:"4", USA:"3", KOR:"8", CHI:"43", SIN:"23" }, 
 
\t {id: "1", segment: "Transfer", type:"QWPE", weekName: "Week Three", week:"6/29/2013", PHI:"8", JAP:"8", USA:"8", KOR:"43", CHI:"8", SIN:"8" }, 
 
\t {id: "1", segment: "Transfer", type:"QWPE", weekName: "Week Four", week:"7/6/2013", PHI:"8", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" }, 
 
    
 
\t {id: "1", segment: "Transfer", type:"ASWE", weekName: "Week Total", week:"7/6/2013", PHI:"3", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" }, 
 
\t {id: "1", segment: "Transfer", type:"ASWE", weekName: "Week One", week:"6/15/2013", PHI:"32", JAP:"76", USA:"8", KOR:"8", CHI:"43", SIN:"8" }, 
 
\t {id: "1", segment: "Transfer", type:"ASWE", weekName: "Week Two", week:"6/22/2013", PHI:"12", JAP:"8", USA:"43", KOR:"32", CHI:"8", SIN:"8" }, 
 
\t {id: "1", segment: "Transfer", type:"ASWE", weekName: "Week Three", week:"6/29/2013", PHI:"12", JAP:"12", USA:"90", KOR:"8", CHI:"8", SIN:"8" }, 
 
\t {id: "1", segment: "Transfer", type:"ASWE", weekName: "Week Four", week:"7/6/2013", PHI:"67", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" }, 
 
    
 
\t {id: "1", segment: "Transfer", type:"YUPP", weekName: "Week Total", week:"7/6/2013", PHI:"8", JAP:"8", USA:"33", KOR:"8", CHI:"45", SIN:"76" }, 
 
\t {id: "1", segment: "Transfer", type:"YUPP", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"4", USA:"8", KOR:"43", CHI:"8", SIN:"8" }, 
 
\t {id: "1", segment: "Transfer", type:"YUPP", weekName: "Week Two", week:"6/22/2013", PHI:"43", JAP:"2", USA:"43", KOR:"8", CHI:"8", SIN:"8" }, 
 
\t {id: "1", segment: "Transfer", type:"YUPP", weekName: "Week Three", week:"6/29/2013", PHI:"43", JAP:"32", USA:"8", KOR:"43", CHI:"8", SIN:"8" }, 
 
\t {id: "1", segment: "Transfer", type:"YUPP", weekName: "Week Four", week:"7/6/2013", PHI:"8", JAP:"8", USA:"34", KOR:"8", CHI:"8", SIN:"69" }, 
 
\t 
 
\t 
 
\t {id: "2", segment: "Preview", type:"Revenue", weekName: "Week Total", week:"7/6/2013", PHI:"8", JAP:"12", USA:"54", KOR:"67", CHI:"65", SIN:"3" }, 
 
\t {id: "2", segment: "Preview", type:"Revenue", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"8", USA:"8", KOR:"67", CHI:"8", SIN:"54" }, 
 
\t {id: "2", segment: "Preview", type:"Revenue", weekName: "Week Two", week:"6/22/2013", PHI:"8", JAP:"8", USA:"43", KOR:"8", CHI:"8", SIN:"8" }, 
 
\t {id: "2", segment: "Preview", type:"Revenue", weekName: "Week Three", week:"6/29/2013", PHI:"8", JAP:"43", USA:"8", KOR:"43", CHI:"43", SIN:"8" }, 
 
\t {id: "2", segment: "Preview", type:"Revenue", weekName: "Week Four", week:"7/6/2013", PHI:"34", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" }, 
 
    
 
\t {id: "2", segment: "Preview", type:"QWPE", weekName: "Week Total", week:"7/6/2013", PHI:"8", JAP:"45", USA:"8", KOR:"54", CHI:"8", SIN:"8" }, 
 
\t {id: "2", segment: "Preview", type:"QWPE", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"43" }, 
 
\t {id: "2", segment: "Preview", type:"QWPE", weekName: "Week Two", week:"6/22/2013", PHI:"8", JAP:"4", USA:"3", KOR:"8", CHI:"43", SIN:"23" }, 
 
\t {id: "2", segment: "Preview", type:"QWPE", weekName: "Week Three", week:"6/29/2013", PHI:"8", JAP:"8", USA:"8", KOR:"43", CHI:"32", SIN:"8" }, 
 
\t {id: "2", segment: "Preview", type:"QWPE", weekName: "Week Four", week:"7/6/2013", PHI:"8", JAP:"8", USA:"232", KOR:"8", CHI:"8", SIN:"8" }, 
 
    
 
\t {id: "2", segment: "Preview", type:"ASWE", weekName: "Week Total", week:"7/6/2013", PHI:"3", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" }, 
 
\t {id: "2", segment: "Preview", type:"ASWE", weekName: "Week One", week:"6/15/2013", PHI:"32", JAP:"76", USA:"8", KOR:"4", CHI:"43", SIN:"8" }, 
 
\t {id: "2", segment: "Preview", type:"ASWE", weekName: "Week Two", week:"6/22/2013", PHI:"13", JAP:"8", USA:"43", KOR:"8", CHI:"32", SIN:"8" }, 
 
\t {id: "2", segment: "Preview", type:"ASWE", weekName: "Week Three", week:"6/29/2013", PHI:"2", JAP:"12", USA:"90", KOR:"23", CHI:"32", SIN:"8" }, 
 
\t {id: "2", segment: "Preview", type:"ASWE", weekName: "Week Four", week:"7/6/2013", PHI:"67", JAP:"8", USA:"23", KOR:"8", CHI:"8", SIN:"8" }, 
 
    
 
\t {id: "2", segment: "Preview", type:"YUPP", weekName: "Week Total", week:"7/6/2013", PHI:"8", JAP:"32", USA:"33", KOR:"8", CHI:"45", SIN:"76" }, 
 
\t {id: "2", segment: "Preview", type:"YUPP", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"4", USA:"8", KOR:"43", CHI:"8", SIN:"8" }, 
 
\t {id: "2", segment: "Preview", type:"YUPP", weekName: "Week Two", week:"6/22/2013", PHI:"43", JAP:"323", USA:"43", KOR:"32", CHI:"8", SIN:"8" }, 
 
\t {id: "2", segment: "Preview", type:"YUPP", weekName: "Week Three", week:"6/29/2013", PHI:"43", JAP:"8", USA:"8", KOR:"43", CHI:"8", SIN:"8" }, 
 
\t {id: "2", segment: "Preview", type:"YUPP", weekName: "Week Four", week:"7/6/2013", PHI:"8", JAP:"8", USA:"34", KOR:"8", CHI:"32", SIN:"69" }, 
 
    \t 
 
]; 
 

 

 
var grid = $("#grid"); 
 
    grid.jqGrid('jqPivot', 
 
    mydata, { 
 
     xDimension: [ 
 
\t \t { 
 
      dataName: 'segment', 
 
      label: ' ', 
 
      width: 90 
 
\t  }, { 
 
      dataName: 'type', 
 
      label: ' ', 
 
      width: 90 
 
\t  } 
 
\t \t ], 
 
     yDimension: [ 
 
\t \t { 
 
      dataName: 'week', 
 
      converter: function (val, xval) { 
 
\t \t \t return val.replace(/\s/g, '&nbsp;'); 
 
\t \t \t } 
 
      } 
 
\t \t ], 
 
\t \t 
 
     aggregates: [{ 
 
      member: 'PHI', 
 
      aggregator: 'sum', 
 
      width: 50, 
 
\t \t \t summaryType: 'sum', 
 
      label: 'PHI' 
 
\t  }, 
 
\t \t { 
 
      member: 'JAP', 
 
      aggregator: 'sum', 
 
      width: 50, 
 
\t \t \t summaryType: 'sum', 
 
      label: 'JAP' 
 
     }, 
 
     { 
 
      member: 'USA', 
 
      aggregator: 'sum', 
 
      width: 50, 
 
\t \t \t summaryType: 'sum', 
 
      label: 'USA' 
 
     }, 
 
\t \t { 
 
      member: 'KOR', 
 
      aggregator: 'sum', 
 
      width: 50, 
 
\t \t \t summaryType: 'sum', 
 
      label: 'KOR' 
 
     }, 
 
\t \t { 
 
      member: 'CHI', 
 
      aggregator: 'sum', 
 
      width: 50, 
 
\t \t \t summaryType: 'sum', 
 
      label: 'CHI' 
 
     }, 
 
\t \t { 
 
      member: 'SIN', 
 
      aggregator: 'sum', 
 
      width: 50, 
 
\t \t \t summaryType: 'sum', 
 
      label: 'SIN' 
 
     } 
 
\t \t ], 
 
     colTotals: true, 
 
\t \t rowTotals: true 
 

 
    }, { 
 
     width: "100%", 
 
     height: "100%", 
 
     pager: "#pager", 
 
     caption: "ADR", 
 
\t \t /* 
 
\t \t cellEdit:true, 
 
\t \t beforeEditCell: function(rowid,cellname,value,iRow,iCol) { 
 
\t \t 
 
\t \t },*/ 
 
\t \t onSelectRow: function(id){ 
 
\t \t //grid.editRow(id); 
 
\t \t } 
 
    });

<table id="grid"></table>

來源

2016-01-22 ramt

這裏的樣本：http://jsfiddle.net/ramt/x5c170ub/以上 – ramt

onSelectRow: function(rowid,status, e){ 
    if (rowid && rowid !== lastsel) { 
      grid.saveRow(lastsel, false, 'clientArray'); 
      grid.editRow(rowid, true); 
      lastsel = rowid; 
    } 
    }, 
    loadComplete : function() { 
     var colModel = []; 
       var model = {}; 
       var currentColModel = grid.jqGrid ('getGridParam', 'colModel'); 
     var editableColumns = ["PHI","JAP","USA","KOR","CHI","SIN"]; 

     for(var i =0; i < currentColModel.length; i++) { 
        model = currentColModel[i]; 
      if($.inArray(model.label, editableColumns) !== -1){ 
         model.editable = true; 
         model.sortable = false; 
        } 
        colModel.push(model); 
       } 

       grid.setGridParam({colModel:colModel}); 
}

來源

2016-01-27 13:11:41 ramt

的代碼將啓用即時編輯。我現在的問題是如何根據輸入的值調用** aggregation **（重新計算colTotal）。更新了示例http://jsfiddle.net/ramt/x5c170ub/3/ – ramt

jqGrid和jqPivot：它是否支持內聯或單元格編輯？

回答

相關問題