JQGrid動態行可編輯

Question

我已經用我的自定義數據和使用格式化程序創建了一個JqGrid。

如果我點擊一些文本（例如：「D」），我必須改變文本的其他文本（例如：「R」）。以及背景顏色。

的情況是這樣的：

• 用戶點擊A，小區改變到一個C
• 用戶點擊d，小區改變的R
• 用戶點擊R，小區改變到d
• 用戶點擊C，小區改變到A

JS代碼：

function SalesOptimizationGridData() { 
    var mydata =[ { size: "S1", op: "170", OPStatus: "X", s1: "-170", S1Status: "C", s2: "170", S2Status: "D", s3: "170", S3Status: "A", s4: "170", S4Status: "C", s5: "170", S5Status: "C" }, 
{ size: "S2", op: "-170", OPStatus: "D", s1: "-170", S1Status: "C", s2: "-170", S2Status: "X", s3: "-170", S3Status: "D", s4: "-170", S4Status: "C", s5: "-170", S5Status: "D" }, 
{ size: "S3", op: "370", OPStatus: "X", s1: "370", S1Status: "C", s2: "-370", S2Status: "A", s3: "-370", S3Status: "C", s4: "370", S4Status: "C", s5: "-370", S5Status: "A" }, 
{ size: "S4", op: "-270", OPStatus: "D", s1: "-170", S1Status: "D", s2: "-170", S2Status: "R", s3: "170", S3Status: "C", s4: "170", S4Status: "A", s5: "170", S5Status: "R" }, 
{ size: "S5", op: "-340", OPStatus: "X", s1: "170", S1Status: "R", s2: "270", S2Status: "A", s3: "-170", S3Status: "D", s4: "340", S4Status: "D", s5: "-170", S5Status: "A" }, 
{ size: "S6", op: "-140", OPStatus: "A", s1: "-270", S1Status: "R", s2: "170", S2Status: "A", s3: "170", S3Status: "C", s4: "170", S4Status: "R", s5: "170", S5Status: "C" }, 
{ size: "S7", op: "-140", OPStatus: "C", s1: "-170", S1Status: "D", s2: "170", S2Status: "D", s3: "-170", S3Status: "R", s4: "240", S4Status: "X", s5: "170", S5Status: "C" }, 
{ size: "S8", op: "0", OPStatus: "X", s1: "-0", S1Status: " ", s2: "0", S2Status: "D", s3: "0", s4: "0", S3Status: "C", S4Status: "A", s5: "0", S5Status: "X" }, 
{ size: "S9", op: "170", OPStatus: "R", s1: "170", S1Status: "X", s2: "170", S2Status: "D", s3: "170", S3Status: "A", S4Status: "C", s4: "170", s5: "-170", S5Status: "D" }, 


    ]; 
    return mydata; 
} 
function AssortmentDetailsGrid() { 
    $("#ao-salesoptimization-grid").jqGrid({ 
     data: SalesOptimizationGridData(), 
     datatype: "local", 
     autowidth: false, 
     //shrinkToFit: true, 
     rowNum: 15, 
     rowList: [15, 30, 45], 
     colNames: ['SIZE', 'OP', 'S1', 'S2', 'S3', 'S4', 'S5'], 
     colModel: [ 
      { 
       name: 'size', index: 'id', sortable: true, sorttype: 'int', resizable: true}, 
      { name: 'op', index: 'op', sortable: true, sorttype: 'int', resizable: true, formatter: opformatter }, 
      { name: 's1', index: 's1', sortable: true, sorttype: 'int', resizable: true, formatter: s1formatter }, 
      { name: 's2', index: 's2', sortable: true, sorttype: 'string', resizable: true, formatter: s2formatter }, 
      { name: 's3', index: 's3', sortable: true, sorttype: 'string', resizable: true, formatter: s3formatter }, 
      { name: 's4', index: 's4', sortable: true, sorttype: 'int', resizable: true, formatter: s4formatter }, 
      { name: 's5', index: 's5', formatter: s5formatter } 
     ], 
     sortname: 'id', 
     sortorder: 'desc', 
     loadOnce: true, 
     gridview: true, 
     loadComplete: function() { 
      if ($("#ao-salesoptimization-grid-container").width() !== 0) 
       $('#ao-assortmentdetails-grid').setGridWidth($("#ao-salesoptimization-grid-container").width()); 
      InitjQueryScroll(); 
      $("#gview_ao-salesoptimization-grid").find('.ui-jqgrid-bdiv').mCustomScrollbar({ theme: "rounded" }); 


      if ($(".ao-op-grid-formatter:first-child > p").text() === "D") { 
       $(".ao-op-grid-formatter").addClass("statusD"); 
      } 
     } 


    }); 
    function opformatter(cellvalue, options, rowObject) { 
     return '<div class="ao-op-grid-formatter"><p>' + rowObject.OPStatus + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>'; 
     //return cellvalue; 
    } 

    function s1formatter(cellvalue, options, rowObject) { 
     return '<div class="ao-op-grid-formatter"><p>' + rowObject.S1Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>'; 
     //return cellvalue; 
    } 

    function s2formatter(cellvalue, options, rowObject) { 
     return '<div class="ao-op-grid-formatter"><p>' + rowObject.S2Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>'; 
     //return cellvalue; 
    } 
    function s3formatter(cellvalue, options, rowObject) { 
     return '<div class="ao-op-grid-formatter"><p>' + rowObject.S3Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>'; 
     //return cellvalue; 
    } 
    function s4formatter(cellvalue, options, rowObject) { 
     return '<div class="ao-op-grid-formatter"><p>' + rowObject.S4Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>'; 
     //return cellvalue; 
    } 
    function s5formatter(cellvalue, options, rowObject) { 
     return '<div class="ao-op-grid-formatter"><p>' + rowObject.S5Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>'; 
     //return cellvalue; 
    } 


} 

工作的jsfiddle是here

Kindy幫助我，如果你有什麼想法！提前致謝！

Answer 1

首先，我建議您簡化colModel和使用一個格式化所有列：

colModel: [ 
    { name: 'size', key: true }, // ??? sorttype: 'int' - see non int values "S8", "S1", ... 
    { name: 'op', sorttype: 'int', formatter: statusFormatter }, 
    { name: 's1', sorttype: 'int', formatter: statusFormatter }, 
    { name: 's2', formatter: statusFormatter }, 
    { name: 's3', formatter: statusFormatter }, 
    { name: 's4', sorttype: 'int', formatter: statusFormatter }, 
    { name: 's5', formatter: statusFormatter } 
] 

其中statusFormatter可以像

function statusFormatter(cellvalue, options, rowObject) { 
    var status = rowObject[options.colModel.name.toUpperCase() + "Status"] || " "; 
    return '<div class="ao-op-grid-formatter' + (status === "D" ? ' statusD"' : '"') + 
     '><p>' + status + 
     '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>'; 
} 

語句來定義$(".ao-op-grid-formatter").addClass("statusD");可以從loadComplete中刪除。

要更改網格中的數據和相應內容的狀態，您可以使用beforeSelectRow回調。對應的代碼可能是有關以下

beforeSelectRow: function (rowid, e) { 
    var $self = $(this), cmName, status, 
     item = $self.jqGrid("getLocalRow", rowid), 
     $td = $(e.target).closest("tr.jqgrow>td"), 
     iCol = $td.length > 0 ? $td[0].cellIndex : -1, 
     p = $self.jqGrid("getGridParam"); 
    if ($(e.target).is(".ao-op-grid-formatter>p") && iCol>0 && p.colModel[iCol]!=null) { 
     cmName = p.colModel[iCol].name; 
     status = item[cmName.toUpperCase() + "Status"]; 
     switch (status) { 
      case "A": 
       status = "C"; 
       break; 
      case "D": 
       status = "R"; 
       break; 
      case "R": 
       status = "D"; 
       break; 
      case "C": 
       status = "A"; 
       break; 
      default: 
       //status = " "; 
       break; 
     } 
     item[cmName.toUpperCase() + "Status"] = status; 
     $(e.target).text(status); 
     if (status === "D") { 
      $(e.target).parent().addClass("statusD"); 
     } else { 
      $(e.target).parent().removeClass("statusD"); 
     } 
    } 
}, 

見http://jsfiddle.net/OlegKi/bngscfmv/4/