且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在Jqgrid中具有锚点和图像的Showlink自定义格式化程序

更新时间:2023-10-28 20:48:22

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

You can implement your requirements in many ways. The simplest one would be to use custom formatter instead of the showlink predefined formatter.

演示中,

我使用以下Costom格式化程序

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

其中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事件.请参阅答案,它是另一个的修改. 对应于建议,其中描述了如何要最有效地枚举网格行,代码可能是

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);
        }
    }
}

其中子类别"列定义为

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

您可以在此处找到相应的演示.

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.