在 jqgrid 中显示带有锚点和图像的自定义格式化程序

Question

我有一个自定义的 showlink 格式化程序，可以打开下面的新页面是代码和屏幕截图

{name:'cfgName',index:'cfgName', width:90, align:"left", formatter: 'showlink', formatoptions:
                                                                            {
                                                                                baseLinkUrl:'javascript:',
                                                                                showAction: "goToViewAllPage('",
                                                                                addParam: "');"

                                                                            }},

我想要的是如果Last Updated time 和今天的日期相差超过 10 天，它应该在Name 之前显示warning 图像

我编写了以下函数来计算 2 个日期的差异，here is the demo，但我需要帮助将图像放在 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());

Answer 1

您可以通过多种方式实现您的要求。最简单的一种是使用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,
    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>';

你会找到相应的演示here。

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