JQGRID：根据弹出确定按钮更改图标类

Question

我正在使用 JqGrid，第二列有很多图标可以打开一个弹出窗口。当用户在弹出窗口中单击确定按钮时，我需要更改 jqgrid 中该特定行的第二列中图标的类。

我正在使用 tableToGrid() 来构建 JqGrid。

我们有使用 tableToGrid mtd 的依赖项。

已更新代码 ::

var options = {
            datatype:'local',
            width:"1360",
            height: "100%",
            shrinkToFit: false,
            rownumbers: false,
            gridview: true,
            multiSort: true,
            sortname: "Id",
            sortorder: "asc",
            viewrecords: true,
            loadui: true,
            loadonce: true,
            multiselect:false,
            rowNum : 10000,
            deepempty : true,
            //loadComplete: function() { },
            //colName: [checkboxHeader,dragHandle,'Description', 'Media', 'Source Type', 'Source', 'Auto Firm', 'Auto Firm Period','', '', '', '', '', '', ''],
            colName: [checkboxHeader,'Title','Fin Prod ID', 'Product Type', 'Title Tags', 'Date Type', 'Territory','Language', 'Release Date', 'Rel Date Status', 'Feed Date', 'Feed Date Status', 'Manual Date', 
                      'Temp/Perm','Projected Date','Rel Date Tags','','','','','','','','','','','','','','','','',''],// count is 33
            colModel: [{name: 'rdr_checkboxHeader',editable: false, width:30, align:'center', sortable:false, formatter:that.rowSelectorFormatter},
                       {name: 'rdr_icon',editable: false, sortable:false, formatter:that.iconFormatter},
                       {name: 'rdr_titleName',editable: false, width:190,sortable:false},
                       {name: 'rdr_fnnclPrdctId', editable: true, width:95,  sortable:false},
                       {name: 'rdr_productType', editable: false, width:95, sortable:false},
                       {name: 'rdr_titleTags', editable: false, width:90, sortable:false},
                       {name: 'rdr_dateType', editable: false, width:70, /*align:'center',*/ sortable:false},
                       {name: 'rdr_territory', editable: false, width:170, sortable:false},
                       {name: 'rdr_language', width:90, editable:false},
                       {name: 'rdr_releaseDate', width:90, editable:false, /*formatter:that.releaseDateFormatter,formatoptions:{newformat:'dd-M-yy'},*/ sorttype: "date",sortable:true },
                       {name: 'rdr_relDateStatus', width:90, editable:false,formatter:that.relDateStatusFormatter},
                       {name: 'rdr_feedDate', width:90, editable:false,},
                       {name: 'rdr_feedDateStatus', width:90, editable:true},
                       {name: 'rdr_manualDate', width:90, editable:false,formatter:that.manualDateFormatter},
                       {name: 'rdr_tempPerm', width:90, editable:true, formatter:that.tempPermFormatter},
                       {name: 'rdr_projectedDate', width:90, editable:false/*,formatter:that.projectedDateFormatter*/},
                       {name: 'rdr_relDateTags', width:90, editable:true,formatter:that.redDateTagFormatter},

                       {name: 'rdr_createDate', hidden:true, editable:false, key:true},
                       {name: 'rdr_updateDate', hidden:true, editable:false},
                       {name: 'rdr_createName', hidden:true, editable:false},
                       {name: 'rdr_updateName', hidden:true, editable:false},
                       {name: 'rdr_releaseDateId', hidden:true, editable:false},
                       {name: 'rdr_comments', hidden:true, editable:false},
                       {name: 'rdr_productId', hidden:true, editable:false},
                       {name: 'rdr_releaseDateGuidelineId', hidden:true, editable:false},
                       {name: 'rdr_dateSourceId', hidden:true, editable:false},

                       {name: 'rdr_productVersionId', hidden:true, editable:false},
                       {name: 'rdr_admissions', hidden:true, editable:false},
                       {name: 'rdr_boxOfficeAmountLc', hidden:true, editable:false},
                       {name: 'rdr_boxOfficeAmountUsd', hidden:true, editable:false},
                       {name: 'rdr_compareString', hidden:true, editable:false},
                       {name: 'rdr_versionId', hidden:true, editable:false},
                       {name: 'rdr_intlPrdTypeId', hidden:true, editable:false},
                       {name: 'rdr_relaseDateTags', hidden:true, editable:false},]
    };
    tableToGrid("#gridId", options);

格式化程序看起来像这样

this.iconFormatter = function(cellvalue, options, rowObject){ var comments = ""; var commentClass = "icon-comment-alt"; var releaseDateId = ""; if(rowObject){ comments = rowObject.rdr_comments; releaseDateId = rowObject.rdr_releaseDateId; } var text = "";/*"<td nowrap>"*/; if(comments.trim() != '') commentClass = 'icon-comment'; text += '<a href="#" class="bootbox-regular btn btn-white-pad24"> <i class="'+commentClass+'" id= "'+releaseDateId+'"_comments" onclick="relaseDateResultProcessorObject.doOpenComments(this);"></i> </a><span class="hide commentStarClass"></span>'; // text += '<input type="hidden" value="" id="" name="comments"/>'; text += '<a href="#" role="button" data-toggle="modal" class="btn btn-white btn-white-pad24" title="Date Guide" id= "'+releaseDateId+'"_guideline" onclick="relaseDateResultProcessorObject.doCallDateGuidePopUp(this)"> <i class="icon-calendar blue"></i></a>'; text += '<a href="#" role="button" data-toggle="modal" class="btn btn-white btn-white-pad24" title="History"> <i class="icon icon-fast-backward orange" onclick="relaseDateResultProcessorObject.doAjaxHistory('+releaseDateId+');"></i></a>'; text += '<a href="#" role="button" data-toggle="modal" class="btn btn-white btn-white-pad24" title="Affected Windows"> <i class="icon icon-qrcode green" id= "'+releaseDateId+'"_affectedWindow" onclick="relaseDateResultProcessorObject.doCallAffectedWindowsPopUp(this)"></i></a> '; return text; };

如果我单击任何一个图标，它将打开一个弹出窗口，当用户单击“确定”时，我们需要更改与该图标关联的类。

希望能让大家明白。

Answer 1

在打开弹出窗口时，我们应该保存图标的 id 并相应地更新。

如下图所示

如果我打开一个具有“testId”ID 的图标，请将此 ID 保存在变量中，例如 var x = 'testId'，当用户单击“确定”按钮时，使用代码更新对象。$('#'+x).addClass('commentExist');