在jqgrid中使用锚点和图像的Showlink自定义格式化程序
我有一个showlink的自定义格式化程序，打开下面的新页面是代码和屏幕截图
{name:'cfgName',index:'cfgName', width:90, align:"left", formatter: 'showlink', formatoptions: { baseLinkUrl:'javascript:', showAction: "goToViewAllPage('", addParam: "');" }}, 
我想要的是如果Last Updated time和今天的日期之间的差异超过10天，它应该在Name前显示warning图像
我编写了下面的函数来计算2个日期的差异 ， 这里是演示 ，但我需要帮助在showlink名称前面放置图像，如果网格中no of days count不是> 10
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); }
这是我的jqGrid代码
var grid = jQuery("#list1"); grid.jqGrid({ datastr : xml, datatype: 'xmlstring', 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());
您可以通过多种方式实现您的要求。 最简单的方法是使用自定义格式化程序而不是showlink预定义格式化程序。
在演示中看起来像
我使用以下costom格式化程序
formatter: function (cellvalue, options, rowObject) { var cellPrefix = ''; if (rowObject.Category === 'Science') { cellPrefix = iconAlert; } return cellPrefix + '' + cellvalue + ''; }
其中iconAlert变量定义为
iconAlert = '' + '';
如果您不需要更多“动态”链接，并且必须将其实现为JavaScript函数，则可以使用不显眼的方式绑定click事件。 看到另一个修改的答案 。 对应于描述如何有效地枚举网格行的建议
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); } } }
其中“子类别”列定义为
{ 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 = '' + '';
你会在这里找到相应的演示。
更新 ：我建议阅读答案 ，讨论实现中提高性能的其他选项。