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

时间:2014-11-04 16:29:32

标签: jquery asp.net-mvc asp.net-mvc-4 hyperlink jqgrid

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

  1. 在控制器中创建要在jqGrid
  2. 中格式化为超链接的项目数组
  3. 将此数组作为JQGrid单元格值获取,并针对每个r =数组项进行迭代,以将其格式化为超链接
  4. 为每个超链接调用控制器方法
  5. 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>';
                                  }
                              }
    
        ], 
    

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

1 个答案:

答案 0 :(得分:1)

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

enter image description here

来自输入数据

[
    {"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 "&nbsp;"; // 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;
    }
}