javascript - 如何使用 jqGrid 将结果集合显示到网格单元格

Question

我有一个包含多对多关系的数据库，因此一个帖子可以有多个标签，并且一个标签可以分配给多个帖子

我使用 jqgrid 使用以下代码显示网格中的所有帖子:

Javascript:

//grid
jQuery(document).ready(function () {
    //post grid
    jQuery("#tablePosts").jqGrid({
        url: '/Admin/ListPosts/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['ID', 'Title', 'Short Description', 'Description', 'Category', 'Tags', 'Published', 'Posted Date', 'Modified Date', 'UrlSlug', 'Meta'],
        colModel: [
            { name: 'PostID', index: 'PostID', width: 50, stype: 'text' },
            { name: 'Title', index: 'Title', width: 150 },
            { name: 'ShortDescription', index: 'ShortDescription', width: 150, sortable: false },
            { name: 'Description', index: 'Description', width: 200, sortable: false },
            { name: 'Category', index: 'Category', width: 100 },
            { name: 'Tags', index: 'Tags', width: 100, sortable: false},
            { name: 'Published', index: 'Published', width: 80 },
            { name: 'PostedOn', index: 'PostedOn', width: 130 },
            { name: 'Modified', index: 'Modified', width: 130 },
            { name: 'UrlSlug', index: 'UrlSlug', width: 80, sortable: false },
            { name: 'Meta', index: 'Meta', width: 80, sortable: false }
        ],
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        viewrecords: true,
        pager: '#pagerPosts',
        height: '100%',
        sortname: 'PostedOn',
        sortorder: "desc",
        //width to null && shrink to false so the width of the grid inherit parent and resizes with the parent
        width: null,
        shrinkToFit: false
    });
});

这是我的 Controller 操作:

public ActionResult ListPosts(string sidx, string sord, int page, int rows)
{
    int pageNo = page - 1;
    int pageSize = rows;

    //for paging
    int totalRecords = repository.TotalPosts(true) + repository.TotalPosts(false);
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows); //round up to smallest integral number greater than returned valued

    //for records
    var posts = repository.AllPosts(pageNo, pageSize, sidx, sord == "asc");

    var jsonData = new
    {
        total = totalPages,
        page = page,
        records = totalRecords,
        rows = (
            from post in posts
            select new
            {
                id = post.PostID,
                cell = new string[] {
                    post.PostID.ToString(), 
                    post.Title, 
                    post.ShortDescription, 
                    post.Description, 
                    post.Category.Name,
                    post.Tags.ToString(),
                    post.Published.ToString(), 
                    post.PostedOn.ToString(), 
                    post.Modified.ToString(), 
                    post.UrlSlug,
                    post.Meta
                }
            }).ToArray()
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

在我的行中，我将帖子标签定义为字符串只是为了消除错误，但我不知道如何将标签显示为列表，这是我的网格:

如您所见，标签列没有显示标签名称，如何正确显示它们？

Answer 1

插入post.Tags.ToString()使用string.Join(",",post.Tags.Select(t => t.Name))

或者将标签数组传递到您的 View 并使用 custom formatter

格式化程序可能如下所示:

function tagFormatter(cellvalue, options, rowObject)
{
    var text = ""
    if (cellvalue.length > 0)
    {
        for (var i = 0; i < cellvalue.length; i++)
        {
            text += cellvalue[i].Name;
            if (i < cellvalue.length - 1)
            {
                text += ", ";
            }
        }
    }
    return text;
}

它将显示以逗号分隔的标签名称；和标记行:

{ name: 'Tags', index: 'Tags', width: 100, sortable: false, formatter: tagFormatter },

有帮助吗？