Настраиваемый форматер Showlink с привязкой и изображением в jqgrid

Question

У меня есть пользовательский форматировщик showlink, который открывает новую страницу ниже, это код и снимок экрана

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

                                                                            }},

Что мне нужно, если разница Last Updated time и сегодняшняя дата превышает 10 дней, она должна отображать warning изображение до того, как Name

Я написал следующую функцию в для вычисления разности 2 дат , вот демка для этого, но мне нужна помощь в размещении изображений перед 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

Вы можете реализовать свои требования разными способами. Самый простой вариант - использовать пользовательский форматер вместо предопределенного showlink .

В демо , которое выглядит как

Я использую следующий форматер 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. См. ответ , который является модификацией другого . Соответствует предложениям , которые описывают, как наиболее эффективно перечислить строки сетки, код может быть

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

Соответствующую демонстрацию вы найдете здесь .

ОБНОВЛЕНО : я рекомендую прочитать ответ , в котором обсуждаются другие варианты реализации, улучшающие производительность.