Javascript 无法更改Jqgrid中行的值

当我选择一行并单击按钮时，我希望一行中的图像/图标从红色变为绿色。然而，它什么也不做。您可以在以下JSFIDLE上找到它：

请参见下面我的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);
            }
        }
    }

---

我想要的是：当我通过单击编辑框并单击“设置展开”按钮选择一行时，所选行上的图标应该从红色变为绿色

这两个问题是您必须将数据[I].sel重命名为数据[I].sel

图像的值被改变了，但是视图没有改变，所以你必须在值和视图中进行，我认为下面的代码解决了这个问题

---

请发布您的代码，而不仅仅是一个JSFIDLE链接。我在这里没有使用saveRow或setRowData。相反，我修改了数据并重新加载了网格。此外，我添加了beforeSelectRow，它修改了Sel列中复选框的状态，就像我在其中创建的一样。我想这是你需要的。在这种情况下，Sel列的状态通过分页保持保存。@Oleg：我非常喜欢您的解决方案，它避免使用saveRow或setRowData，并将图像保留在colModel中。我决定移除Sel。列，并使用多选选项。我希望在图像从红色变为绿色后取消选中复选框。请参阅我的新fiddle fiddle.jshell.net/njiterry/p9n8qq0x/31/。你能把我的新提琴换成与你的代码相对应的吗？对不起，Sel搞错了。非常感谢它的工作。如何确保单击按钮后，编辑框数据[I].Sel未选中。欢迎您通过更改以下代码$+数据[I].Country+'[aria describedby=pays\u grid\u Developed]'来执行此操作。htmlimage；并将复选框attr设置为.removeAttr'checked'

 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);
        }
    }