無法更改Jqgrid中某一行的值

Question

當我選擇一行並單擊某個按鈕時，我會將一行中的圖像/圖標從紅色更改爲綠色。然而它什麼也沒做。你可以找到它下面的jsfiddle：http://fiddle.jshell.net/njiterry/p9n8qq0x/9/

看我下面的JavaScript代碼：

var mydata = [{ 
    Sel: false, 
    Country: "Germany", 
    Capital: "Berlin", 
    Date: "05-09-2014" 
}, { 
    Sel: false, 
    Country: "France", 
    Capital: "Paris", 
    Date: "05-09-2014" 
}, { 
    Sel: false, 
    Country: "Cameroon", 
    Capital: "Yaounde", 
    Date: "06-09-2014" 
}, { 
    Sel: false, 
    Country: "Gabon", 
    Capital: "Libreville", 
    Date: "06-09-2014" 
}, { 
    Sel: false, 
    Country: "Holland", 
    Capital: "Amsterdam", 
    Date: "07-09-2014" 
}, { 
    Sel: false, 
    Country: "Japan", 
    Capital: "Tokyo", 
    Date: "08-09-2014" 
}, { 
    Sel: false, 
    Country: "Italy", 
    Capital: "Rome", 
    Date: "09-09-2014" 
}, { 
    Sel: false, 
    Country: "Spain", 
    Capital: "Madrid", 
    Date: "09-09-2014" 
}, { 
    Sel: false, 
    Country: "England", 
    Capital: "London", 
    Date: "10-09-2014" 
}, { 
    Sel: false, 
    Country: "US", 
    Capital: "Washington D.C.", 
    Date: "12-09-2014" 
}], 
    grid = jQuery("#pays_grid"), 
    initDateWithButton = function (elem) { 
     if (/^\d+%$/.test(elem.style.width)) { 
      // remove % from the searching toolbar 
      //elem.style.width = ''; 
      $(elem).css({ 
       width: "230px" 
      }); 
     } 
     // to be able to use 'showOn' option of datepicker in advance searching dialog 
     // or in the editing we have to use setTimeout 
     setTimeout(function() { 
      $(elem).datepicker({ 
       dateFormat: 'dd-mm-yy', 
       showOn: 'button', 
       changeYear: true, 
       changeMonth: true, 
       buttonImageOnly: true, 
       buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
       buttonText: "Select date", 
       onSelect: function (dateText, inst) { 
        if (inst.id.substr(0, 3) === "gs_") { 
         grid[0].triggerToolbar(); 
        } else { 
         // to refresh the filter 
         $(inst).trigger("change"); 
        } 
       } 
      }); 
     }, 100); 
    }; 

grid.jqGrid({ //set your grid id 
    data: mydata, //insert data from the data object we created above 
    datatype: 'local', 
    height: '250', 
    gridview: true, 
    width: 600, 
    autoheight: true, 
    rowNum: 10, 
    rowList: [1, 5, 10], 
    colNames: ['Sel.', 'Country', 'Developed', 'Capital', 'Date'], 
    onCellSelect: function(rowid, index, contents, event) 
    { 
     var cm = grid.jqGrid('getGridParam','colModel');       
     if(cm[index].name == "Developed") 
     { 
      var img= $('tr#'+rowid).find('td:nth-child(3) > img') 
      if(img.attr('alt')=='red light') 
      {    img.attr({'src':'http://www.iconsdb.com/icons/preview/green/circle-xxl.png','alt':'green light' }); 
      } 
      else 
      { 
img.attr({'src':'http://www.iconsdb.com/icons/preview/red/circle-xxl.png','alt':'red light' });    
      } 
     } 
    }, 

    //define column names 
    colModel: [{ 
     name: 'Sel', 
     align: 'center', 
     sortable: false, 
     width: 10, 
     search: false, 
     editable: true, 
     edittype: 'checkbox', 
     editoptions: { 
      value: "True:False" 
     }, 
     formatter: "checkbox", 
     formatoptions: { 
      disabled: false 
     } 
    }, { 
     name: 'Country', 
     index: 'Country', 
     key: true, 
     width: 20, 
     align: 'center' 
    }, { 
     name: 'Developed', 
     align: 'center', 
     width: 65, 
     fixed: true, 
     formatter: function() { 
      return "<img src='http://www.iconsdb.com/icons/preview/red/circle-xxl.png' alt='red light' style='width:15px;height:15px'/>"; 
     } 
    }, { 
     name: 'Capital', 
     index: 'Capital', 
     width: 20, 
     align: 'center' 
    }, { 
     name: 'Date', 
     index: 'Date', 
     align: 'center', 
     width: 55, 
     sorttype: 'date', 
     editable: true, 
     editoptions: { 
      dataInit: initDateWithButton, 
      size: 11 
     }, 
     searchoptions: { 
      sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], 
      dataInit: initDateWithButton 
     } 
    }], //define column models 
    pager: '#pays_grid_pager', //set your pager div id 
    viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z」 optional 
    sortorder: "asc", //sort order; optional 
    sortname: 'Country', 
    shrinkToFit: true, 
    forceFit: true, 
    caption: "Country Overview" 
}).navGrid('#pays_grid_pager', { 
    edit: false, 
    add: false, 
    del: false, 
    search: false, 
    refresh: true 
}).navButtonAdd('#pays_grid_pager', { 
    caption: "Set Developed", 
    buttonicon: "ui-icon-circle-check", 
    position: "first", 
    title: "Set Developed", 
    onClickRow: function (rowId, iRow, iCol, e) { 
     alert("yes"); 
    }, 
    onClickButton: function() { 
     alert(1); 
     var data = grid.getRowData(); 
     for (var i = 0; i < data.length; i++) { 
      if (data[i].sel === 'True') { 
       data[i].Developed = "<img src='http://www.clker.com/cliparts/q/j/I/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>"; 
       data[i].sel = 'False' 
       grid.jqGrid('setRowData', i, data[i]); 
       grid.jqGrid('saveRow', i, false); 
      } 
     } 
    } 

我會想有如下：當我選擇一個行（通過點擊一個編輯框）並單擊「設置開發」按鈕，所選行上的圖標應從紅色變爲綠色

Answer 1

這兩個問題是您必須將數據[i] .sel重命名爲data [i] .Sel

並且圖像的值被改變，但視圖不是你要做到這一點的價值，我認爲鑑於下面的代碼解決了這個問題http://jsfiddle.net/p9n8qq0x/14/

for (var i = 0; i < data.length; i++) { 
     console.log(data[i]); 
     if (data[i].Sel === 'True') { 
      var image="<img src='http://www.clker.com/cliparts/q/j/I/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>"; 
      data[i].Developed = image; 
      $('#'+data[i].Country+' [aria-describedby="pays_grid_Developed"]').html(image);    
      data[i].Sel = 'False'; 
      grid.jqGrid('setRowData', i, data[i]); 
      grid.jqGrid('saveRow', i, false); 
     } 
    }