jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 在jqgrid中使用锚点和图像的Showlink自定义格式化程序大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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());

解决方法

您可以通过多种方式实现您的要求.最简单的方法是使用 custom formatter而不是 showlink预定义的格式化程序.

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>';

您将找到相应的演示here.

更新:我建议阅读the answer,其中讨论了实现中提高性能的另一个选项.

大佬总结

以上是大佬教程为你收集整理的jquery – 在jqgrid中使用锚点和图像的Showlink自定义格式化程序全部内容,希望文章能够帮你解决jquery – 在jqgrid中使用锚点和图像的Showlink自定义格式化程序所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。