在Jqgrid中具有锚点和图像的Showlink自定义格式化程序 [英] Showlink custom formatter with anchor and image in jqgrid
问题描述
我有一个showlink的自定义格式化程序，它将在下面打开代码和屏幕截图的新页面
I have a custom formatter of showlink which opens up new page below is the code and screen shot
{name:'cfgName',index:'cfgName', width:90, align:"left", formatter: 'showlink', formatoptions:
{
baseLinkUrl:'javascript:',
showAction: "goToViewAllPage('",
addParam: "');"
}},
我想要的是，如果Last Updated time与今天的日期之间的差超过10天，它应该在Name
What I want is if the difference of Last Updated time and today's date is more than 10 days it should display a warning image before the Name
我写了下面的函数来计算两个日期的差值，这是演示，但是如果no of days count在网格中> 10，我需要在 showlink 名称前面放置图像的帮助
I wrote the below function to calculate the difference of 2 dates, here is the demo for that, but I need help in placing images infront of showlink names, if the no of days count is > 10 in the 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);
}
这是我的jqGrid代码
Here is my jqGrid code
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 预定义格式程序.
You can implement your requirements in many ways. The simplest one would be to use custom formatter instead of the showlink predefined formatter.
在演示中，
我使用以下Costom格式化程序
I use the following costom formatter
formatter: function (cellvalue, options, rowObject) {
var cellPrefix = '';
if (rowObject.Category === 'Science') {
cellPrefix = iconAlert;
}
return cellPrefix + '<a href="http://en.wikipedia.org/wiki/' + cellvalue + '">' +
cellvalue + '</a>';
}
其中iconAlert变量定义为
iconAlert = '<span class="ui-state-error" style="border:0">' +
'<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;">' +
'</span></span>';
如果不需要更多的动态"链接，并且必须将其实现为JavaScript函数，则可以使用不引人注目的方式来绑定click事件.请参阅答案，它是另一个的修改. 对应于建议，其中描述了如何要最有效地枚举网格行，代码可能是
If you need no have more "dynamic" link and you have to implement it as JavaScript function you can use unobtrusive way to bind the click event. See the answer which is modification of another one. Corresponds to suggestions which describes how to enumerate grid rows mostly effectively the code could be
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 = '<span class="ui-state-error" style="border:0">' +
'<span class="ui-icon ui-icon-alert" ' +
'style="float: left; margin-right: .3em;"></span></span>';
您可以在此处找到相应的演示.
The corresponding demo you will find here.
更新:我建议阅读答案，其中讨论了实现中的另一种选择提高性能.
UPDATED: I recommend to read the answer which discuss another options in the implementation which improve the performance.
这篇关于在Jqgrid中具有锚点和图像的Showlink自定义格式化程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
