在 JQGrid 的单个单元格中创建多个超链接

Question

我正在开发一个 MVC4 应用程序，它也有很好的客户端交互。但是今天，我有一个特定的要求，即在 jqGrid 的一个单元格中可以有动态数量的链接。我采取的方法是：

1. 在控制器中创建项目数组以在 jqGrid 中格式化为超链接
2. 将此数组作为 JQGrid 单元格值获取并迭代每个 r=array 项以将其格式化为超链接
3. 为每个超链接调用控制器方法

jqGrid 的控制器部分：

  var jsonData =new {rows = (from row in dlist
                                           select new {
                                                         Id = row.ContactOrderNo,
                                                         cell = new string[] {
                                                         Convert.ToString(row.ContactOrderNo)
                                                        ,Convert.ToString(row.ContactOrderNo)
                                                        ,Convert.ToString(row.SerialNumber)
                                                        ,Convert.ToString(row.ModelNo)
                                                        ,Convert.ToString(row.Capacity)
                                                        ,Convert.ToString(new Obj[]{ new {LinkText="22.pdf", LinkSrc="mydrive\\22.pdf"}, new {LinkText="33.pdf", LinkSrc="mydrive\\33.pdf"})        
                                                        }                                               

                                           }).ToArray()
                               };

            return Json(jsonData, JsonRequestBehavior.AllowGet);

JQGrid 脚本：

colNames: ['Contract-OrderNum', 'Contract Order Number', 'Serial Number', 'Model Number', 'Capacity', 'ContractDetails'],
    colModel: [
                    { name: 'ModelNo', width: 150, editable: false, hidden: true, editrules: { required: true } },
                    {
                        name: 'Contract-OrderNo', width: 300, editable: false, hidden: false, formatter: function (cellvalue, options, rowObject) {

                            return '<a href="/OrderList/AddOrder/?ModelNo=' + cellvalue + '" >' + cellvalue + '</a>';
                        }
                    },

                       { name: 'SerialNumber', width: 150, editable: false, editrules: { required: true } },
                       { name: 'ModelNo', width: 150, editable: false, editrules: { required: true } },
                        { name: 'Capacity', width: 150, editable: false, editrules: { required: true } },
                          {
                              name: 'ContractDetails', width: 150, editable: false, formatter: function (cellvalue, options, rowObject) {
                                  return '<a href="/OrderList/GetPDFFileStream/?rowObject=' + rowObject + '" target="_blank" >' + cellvalue + '</a>';
                              }
                          }

    ], 

请告诉我实现它所需的解决方法。

Answer 1

我为您创建了the demo，它演示了相应的自定义格式化程序。在显示网格中

来自输入数据

[
    {"ContactOrderNo":123, "SerialNumber":"abc", "ModelNo":"ModelNo1", "Capacity":123456,
     "ContractDetails":[{"LinkText":"12.pdf", "LinkSrc":"http://www.glsh.net/media/files/Druckertest.pdf"}, {"LinkText":"13.pdf", "LinkSrc":"http://www.tinten-toner-24.com/shared/pdf/testseite.pdf"}]},
    {"ContactOrderNo":456, "SerialNumber":"xyz", "ModelNo":"ModelNo2", "Capacity":789012,
     "ContractDetails":[{"LinkText":"22.pdf", "LinkSrc":"http://www.glsh.net/media/files/Druckertest.pdf"}, {"LinkText":"23.pdf", "LinkSrc":"http://www.tinten-toner-24.com/shared/pdf/testseite.pdf"}]}
]

应该生成服务器。

演示中ContractDetails列的定义如下所示

{ name: "ContractDetails",
    formatter: function (cellvalue) {
        var i, res = "", linkInfo;

        if (cellvalue == null || !$.isArray(cellvalue)) {
            return " "; // empty cell in case or error
        }

        for (i = 0; i < cellvalue.length; i++) {
            linkInfo = cellvalue[i];
            res += (res.length > 0 ? ", " : "") +
                '<a href="' + linkInfo.LinkSrc + '" target="_blank" >' +
                linkInfo.LinkText + '</a>';
        }

        return res;
    }
}