Flexigrid - 添加带有链接的列答案

【问题标题】：Flexigrid - adding a column with linksFlexigrid - 添加带有链接的列
【发布时间】：2014-05-06 17:28:21
【问题描述】：

我正在使用 Flexigrid 来显示分页数据，并且效果很好。现在我需要添加所有行的链接（“编辑”、“查看”、“删除”），老实说，我不知道如何继续它。有什么东西可以开箱即用吗？

基本想法是为这 3 个链接添加一个带有小图标的附加列，而不是将工具栏放在顶部。

有什么想法吗？

【问题讨论】：

标签： jquery flexigrid

【解决方案1】：

我知道了:)

诀窍是简单地将链接直接放在脚本返回的数据中。例如，这将创建一个第一列包含相关链接的行：

List<Object> rows = new List<Object>();
foreach (var item in results) {
rows.Add(new { 
    id = item.ID,
    cell = new string[] { 
        String.Format("<a href='/Account/View/{0}'>view</a>&nbsp;<a href='/Account/Edit/{0}'>edit</a>", item.ID), 
        item.Name, 
        item.Phone 
    }
}
var result = new { page = page, total = rowcount, rows = rows };
return Json(result);

【讨论】：

【解决方案2】：

我不喜欢构建网格数据的“演示者”注入标记这一事实。我添加了这个在“onSuccess”事件上运行的小扩展。它将默认列表示形式转换为链接。

(function ($) {
    $.fn.flexLinkColumn = function (colIndex, url) {
        if (colIndex === undefined || url === undefined)
            throw "flexLinkColumn requires colIndex and url";

        if ($(this).closest('div.flexigrid').length === 0)
            throw "flexiLinkColumn only operates on flexilink grids.";

        $(this).find('tr').each(function (index, tr) {
            var rowId = $(tr).attr('id');
            var itemId = rowId.substring(3);
            var itemUrl = url + (itemId ? "/" + itemId : "");

            var div = $(tr).find('td').eq(colIndex).find('div');
            var text = $(div).text();
            $(div).html('<a href="' + itemUrl + '">' + text + '</a>');
        });
    }
})(jQuery);

【讨论】：

【解决方案3】：

对于 Rails：

添加如下

return_data[:rows] = @countries.collect{|l| { :id => l.id, :cell=>[ 
'%a :href=>'javascript:void(0);'#{l.client_cont_person}', // normal html link

l.completed_on,l.created_by,l.project_id,l.status
]}}

【讨论】：