Formateur personnalisé Showlink avec ancre et image dans jqgrid

J’ai un formateur personnalisé de showlink qui ouvre une nouvelle page ci-dessous est le code et la capture d’écran

{name:'cfgName',index:'cfgName', width:90, align:"left", formatter: 'showlink', formatoptions: { baseLinkUrl:'javascript:', showAction: "goToViewAllPage('", addParam: "');" }},

entrez la description de l'image ici

Ce que je veux, c’est que si la différence entre l’ Last Updated time de la Last Updated time et la date du jour est supérieure à 10 jours, une image d’ warning doit s’afficher avant le Name

J’ai écrit la fonction ci-dessous pour calculer la différence de 2 dates , voici la démo , mais j’ai besoin d’aide pour placer les images devant les noms de showlink , si le nombre no of days count est> 10 dans la grid

 function diffOf2Dates(todaysDate,configDate) { /*var udate="2011-08-18 11:49:01.0"; var configDate=new Date(udate);*/ var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds var firstDate = todaysDate; // Todays date var secondDate = new Date(configDate); var diffDays = Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)); console.info(firstDate+", "+secondDate); //console.info(Math.ceil(diffDays)); return Math.ceil(diffDays); }

Voici mon code jqGrid

 var grid = jQuery("#list1"); grid.jqGrid({ datastr : xml, datatype: 'xmlssortingng', colNames:['cfgId','Name', 'Host', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By','',''], colModel:[ {name:'cfgId',index:'cfgId', width:90, align:"left", hidden:true}, //{name:'updateDate',index:'updateDate', width:20, align:'center', formatter: oldConfigurationWarning }, {name:'cfgName',index:'cfgName', width:90, align:"left", formatter: 'showlink', formatoptions: { baseLinkUrl:'javascript:', showAction: "goToViewAllPage('", addParam: "');" }}, {name:'hostname',index:'hostname', width:90, align:"left"}, {name:'cfgDesc',index:'cfgDesc', width:90, align:"left"}, {name:'productId',index:'productId', width:60, align:"left"}, {name:'cfgType',index:'cfgType', width:60, align:"left"}, {name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"left"}, {name:'emailAddress',index:'emailAddress', width:120, align:"left"}, {name:'absolutePath',index:'absolutePath', width:90, align:"left", hidden:true}, {name:'fileName',index:'fileName', width:90, align:"left", hidden:true}, ], pager : '#gridpager', rowNum:10, rowList:[10,50,100], scrollOffset:0, height: 'auto', emptyrecords: 'No configurations loaded', autowidth:true, viewrecords: true, gridview: true, multiselect: true, xmlReader: { root : "list", row: "Response", userdata: "userdata", repeatitems: false }, loadComplete: function () { var count = grid.getGridParam(); var ts = grid[0]; if (ts.p.reccount === 0) { grid.hide(); emptyMsgDiv.show(); } else { grid.show(); emptyMsgDiv.hide(); } }, onSelectRow: function(id,status){ var rowData = jQuery(this).getRowData(id); configid = rowData['cfgId']; configname=rowData['cfgName']; configdesc=rowData['cfgDesc']; configenv=rowData['cfgType']; absolutepath=rowData['absolutePath']; /*filename=rowData['fileName']; updatedate=rowData['updateDate']; absolutepath=rowData['absolutePath'];*/ updateproductid=rowData['productId']; $('#cfgid').removeAttr('disabled'); document.getElementById("cfgid").value=configid; document.getElementById("cfgname").value=configname; document.getElementById("cfgdesc").value=configdesc; var element = document.getElementById('cfgenv'); if(configenv=="Production") element.value = "Production"; else if(configenv=="Development") element.value="Development"; else element.value="Test/QA"; rowChecked=1; currentrow=id; } }); grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false}); jQuery("#m1").click( function() { var s; s = grid.jqGrid('getGridParam','selarrrow'); alert(s); }); var myGrid = $("#list1"); $("#cb_"+myGrid[0].id).hide(); // place div with empty message insde of bdiv emptyMsgDiv.insertAfter(grid.parent());

Vous pouvez implémenter vos exigences de nombreuses manières. Le plus simple serait d’utiliser un formateur personnalisé à la place du formateur prédéfini de showlink .

Dans la démo qui ressemble à

entrez la description de l'image ici

J’utilise le formateur suivant

 formatter: function (cellvalue, options, rowObject) { var cellPrefix = ''; if (rowObject.Category === 'Science') { cellPrefix = iconAlert; } return cellPrefix + '' + cellvalue + ''; }

où la variable iconAlert est définie comme

 iconAlert = '' + '' + '';

Si vous n’avez pas besoin de plus de lien “dynamic” et que vous devez l’implémenter comme fonction JavaScript, vous pouvez utiliser un moyen non intrusif pour lier l’événement click Voir la réponse qui est la modification d’ un autre . Correspond à des suggestions décrivant comment énumérer les lignes de la grid de manière plus efficace, le code pourrait être

 loadComplete: function () { var iRow, row, trClasses, $cell, iSubcategory = getColumnIndexByName(myGrid, 'Subcategory'), iCategory = getColumnIndexByName(myGrid, 'Category'), grid = myGrid[0], rows = grid.rows, cRows = rows.length, myLink = function (e) { var $td = $(e.target).closest('td'), text = $td.text(), $tr = $td.closest('tr'), rowid = $tr[0].id; alert("clicked the row with id='" + rowid + "'. Link contain '" + text + "'"); location.href = "http://en.wikipedia.org/wiki/" + text; }; for (iRow = 0; iRow < cRows; iRow += 1) { row = rows[iRow]; // row.id is the rowid trClasses = row.className.split(' '); if ($.inArray('jqgrow', trClasses) > 0) { // the row is a standard row (only if subGrid:true are used) $cell = $(row.cells[iSubcategory]); if ($(row.cells[iCategory]).text() === 'Science') { $cell.prepend(iconAlert); } $cell.click(myLink); } } }

où les colonnes ‘Sous-catégorie’ sont définies comme

 { name: 'Subcategory', index: 'Subcategory', width: 200, formatter: 'showlink', formatoptions: {baseLinkUrl: '#'} }

 var getColumnIndexByName = function (grid, columnName) { var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length; for (; i < l; i += 1) { if (cm[i].name === columnName) { return i; // return the index } } return -1; }, myGrid = jQuery("#list"), iconAlert = '' + '';

La démo correspondante que vous trouverez ici .

MISE À JOUR : je vous recommande de lire la réponse qui traite d’autres options de la mise en œuvre qui améliorent les performances.