在 jqgrid 中显示带有锚点和图像的自定义格式化程序 [英] Showlink custom formatter with anchor and image in jqgrid
本文介绍了在 jqgrid 中显示带有锚点和图像的自定义格式化程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
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: "');"
}},
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
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);
}
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());
解决方案
You can implement your requirements in many ways. The simplest one would be to use custom formatter instead of the showlink predefined formatter.
In the demo which looks like
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>';
}
where iconAlert variable is defined as
iconAlert = '<span class="ui-state-error" style="border:0">' +
'<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;">' +
'</span></span>';
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);
}
}
}
where 'Subcategory' column are defined as
{ name: 'Subcategory', index: 'Subcategory', width: 200,
formatter: 'showlink', formatoptions: {baseLinkUrl: '#'} }
and
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 中显示带有锚点和图像的自定义格式化程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
