我正在使用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;
};
如果我点击任何一个图标,它会打开一个弹出窗口,当用户点击“确定”时然后我们需要更改与该图标相关联的类。
希望它能让你们所有人都明白。
答案 0 :(得分:0)
打开弹出窗口时,我们应该保留图标的ID并相应地更新。
我想出来就像下面
如果我打开一个包含'testId'id的图标,请将此ID保存在var x = 'testId'
之类的变量中,当用户点击“确定”按钮时,使用代码更新对象。$('#'+x).addClass('commentExist');