JQGRID:根据弹出的ok按钮更改图标类

时间:2014-06-04 10:27:31

标签: jqgrid

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

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

我们有使用tableToGrid mtd。

的依赖项

针对Code ::

进行了更新
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);

Formatter看起来像这样

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

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

希望它能让你们所有人都明白。

1 个答案:

答案 0 :(得分:0)

打开弹出窗口时,我们应该保留图标的ID并相应地更新。

我想出来就像下面

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