大佬教程收集整理的这篇文章主要介绍了jquery – 在jqgrid中使用锚点和图像的Showlink自定义格式化程序,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
{name:'cfgName',index:'cfgName',width:90,align:"left",formatter: 'showlink',formatoptions: { baseLinkUrl:'javascript:',showAction: "goToViewAllPage('",addParam: "');" }},
我想要的是如果上次更新时间和今天的日期之间的差异超过10天,它应该在名称前显示警告图像
我编写了下面的函数来计算2个日期的差异,here is the demo就是这个,但我需要帮助放置showlink名称前面的图像,如果没有天数是> 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',hidden:truE},//{name:'updateDate',index:'updateDate',width:20,align:'center',formatter: oldConfigurationWarning },{name:'cfgName',{name:'hostname',index:'hostname',align:"left"},{name:'cfgDesc',index:'cfgDesc',{name:'productId',index:'productId',width:60,{name:'cfgType',index:'cfgType',{name:'updateDate',sorttype:'Date',width:120,{name:'emailAddress',index:'emailAddress',{name:'absolutePath',index:'absolutePath',{name:'filename',index:'filename',],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.getGrid@R_180_1403@; 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());
在the demo看起来像
我使用以下costom格式化程序
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事件.参见the answer,它是another one的修改.对应to suggestions描述了如何有效地枚举网格行代码可能是
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,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 answer,其中讨论了实现中提高性能的另一个选项.
以上是大佬教程为你收集整理的jquery – 在jqgrid中使用锚点和图像的Showlink自定义格式化程序全部内容,希望文章能够帮你解决jquery – 在jqgrid中使用锚点和图像的Showlink自定义格式化程序所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。