将标记插入隐藏的 jqGrid 列答案

【问题标题】：Inserting markup into hidden jqGrid column将标记插入隐藏的 jqGrid 列
【发布时间】：2010-08-10 13:26:59
【问题描述】：

jqGrid 启动并运行良好，其中我有一个包含一些标记的隐藏字段，只是一个数据表，当我将鼠标悬停在网格行上时，该行中隐藏列的标记出现在工具提示中。我希望能够复制网格项目，这样做我想清除网格并仅使用重复的记录和原始记录重新填充。

不幸的是，我在重新加载网格时遇到了这个问题：

Message: 's.grid.headers[...].width' is null or not an object
Line: 91
Char: 390
Code: 0
URI: http://localhost:51325/Scripts/jquery.jqGrid.min.js

这是我的网格定义：

$('#RequestGrid').jqGrid({
    url: GetUrl(),
    datatype: 'json',
    mtype: 'POST',
    colNames: ['ID', 'AOM', 'Start Date', 'End Date', 'Coordinator 1', 'Coordinator 2', 'Driver?', 'Status', 'Assigned To', 'RequestHours'],
    colModel: [
        { name: 'ResourceRequestID', index: 'ResourceRequestID', width: 20, key: true },
        { name: 'AOM', index: 'AOM.Surname', width: 70 },
        { name: 'StartDate', index: 'StartDate', width: 50 },
        { name: 'EndDate', index: 'EndDate', width: 50 },
        { name: 'Coordinator1', index: 'Coordinator.Surname', width: 60 },
        { name: 'Coordinator2', index: 'Coordinator1.Surname', width: 60 },
        { name: 'DriverPreference', index: 'DriverPreference.Description', width: 40 },
        { name: 'Status', index: 'Status', sortable: false, width: 40 },
        { name: 'AssignedResourceID', index: 'AssignedResourceID', width: 50 },
        { name: 'RequestHours', index: 'RequestHours', hidden: true }
    ],
    ...
    loadui: 'block',
    width: 750,
    ondblClickRow: function (rowid, iRow, iCol) {
        window.location = '/Request/Edit/' + rowid;
    },                
    gridComplete: function() {
        $("tr.jqgrow").mouseover(function(e) {
            var requestHours = $(this).find('td').eq(9).html();
            $(this).tipTip({ activation: "hover", edgeOffset: 5, content: requestHours, keepAlive: false, fadeIn: 0, maxWidth: "250px" });
        });
    }
});

隐藏字段的标记内置在我的控制器中，如下所示：

public string BuildRequestPlan(ResourceRequest req)
{
    string requestPlan = "<p>Request #" + req.ResourceRequestID.ToString() + "</p>";
    requestPlan += "<p>Location: " + req.Location.LocationName + "</p>";
    requestPlan += "<table id=toolTipAvailability><tr><td>Day</td><td>8-9</td><td>9-10</td><td>10-11</td><td>11-12</td><td>12-1</td><td>1-2</td><td>2-3</td><td>3-4</td><td>4-5</td><td>5-6</td><td>6-7</td><td>7-8</td><td>8-9</td><td>9-10</td><td>O/S</td></tr>";

    string[] days = { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" };
    int[] hrs = { 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 };

    for (int day = 1; day <= days.Length; day++)
    {
        requestPlan += "<tr><td oncontextmenu=return false;>" + days[day - 1] + "</td>";

        for (int hour = 8; hour < 23; hour++)
        {
            requestPlan += "<td class=toolTipAvailabilityCell day=" + day + " hour=" + hour + ">";

            var requestHour = req.RequestHours.SingleOrDefault(h => h.Hour == hour && h.WeekDay == day);

            if (requestHour != null)
            {
                requestPlan += requestHour.Minutes.ToString();
            }

            requestPlan += "</td>";
        }

        requestPlan += "</tr>";
    }

    requestPlan += "</table>";

    return requestPlan;
}

为重复列表中的每个项目调用此方法：

[HttpPost]
public JsonResult Duplicate(int cloneRequestID, int cloneCount)
{
    ResourceRequest resourceRequest = this._resourceRequestService.GetByID(cloneRequestID);

    // get the assignedResourceID of resourceRequest to clone
    int? assignedResourceID = resourceRequest.AssignedResourceID;

    // nullify the assignedResourceID
    resourceRequest.AssignedResourceID = null;

    List<ResourceRequest> clones = new List<ResourceRequest>();

    for (int i = 0; i < cloneCount; i++)
    {
        ResourceRequest temp = (ResourceRequest)resourceRequest.Clone();
        this._resourceRequestService.Add(temp);
        clones.Add(temp);
    }

    // reinstate the assignedResourceID
    resourceRequest.AssignedResourceID = assignedResourceID;

    // add original erquest to clones collection
    clones.Add(resourceRequest);

    try
    {
        this._unitOfWork.Commit();
        int totalRecords = clones.Count();
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)10);

        var jsonData = from req in clones
            select new
            {
                ResourceRequestID = req.ResourceRequestID.ToString(),
                AOM = string.Format("{0}, {1}", req.AOM.Surname, req.AOM.Forename),
                StartDate = req.StartDate.ToString("dd/MM/yyyy"),
                EndDate = req.EndDate.ToString("dd/MM/yyyy"),
                Coordinator1 = string.Format("{0}, {1}", req.Coordinator.Surname, req.Coordinator.Forename),
                Coordinator2 = req.SecondCoordinatorID == null ? "N/A" : string.Format("{0}, {1}", req.Coordinator1.Surname, req.Coordinator1.Forename),
                DriverPreference = req.DriverPreference.Description,
                Status = req.RequestCancelledDate.HasValue ? "Cancelled" : req.AssignedResourceID.HasValue ? "Assigned" : "Unassigned",
                AssignedResourceID = req.Resource == null ? "N/A" : req.Resource.Employee.FullName,
                RequestHours = BuildRequestPlan(req)
            };

        return Json(JsonConvert.SerializeObject(jsonData));             
    }
    catch (Exception e)
    {
        var data = new { error = e.Message };

        return Json(data);
    }
}

这就是我重新绑定网格的方式：

$.post('/Request/Duplicate', { cloneRequestID: $('#cloneRequestID').val(), cloneCount: $('#cloneCount').val() }, function (data) {

    $('#RequestGrid').clearGridData(true);

    var jsonData = $.parseJSON(data);

    $('#RequestGrid').addRowData('ResourceRequestID', jsonData);
});

我尝试只返回一个空表，例如<table><tr></tr></table> 并且它有效，但是当我添加一个空单元格时它停止工作，因此标记出现问题。

有没有人遇到过类似的问题？有什么想法吗？

谢谢

【问题讨论】：

您能否解释一下为什么您需要复制网格而不是刷新网格或再次提交新网格？
嗨 Oleg，我只是通过清除网格并手动插入原始记录和重复项来刷新网格。在此之后，可以刷新网格以显示所有记录。我们的想法是快速总结复制的记录。

标签： jquery asp.net-mvc jqgrid

【解决方案1】：

通过在 BuildRequestPlan 方法中的标记周围添加 HTML 注释来解决此问题。在将标记传递给工具提示时，我只是去掉了 cmets。这是非正统的，但它有效。

【讨论】：

【解决方案2】：

首先，我建议您使用userdata 将其他信息保存到jqGrid。 userdata中保存的数据可以完全免费。例如，它可以是一个包含 HTML 代码片段的数组，也可以是一个以 ResourceRequestID 值作为属性并以相应的 HTML 代码片段作为值的对象。因此使用jQuery("RequestGrid").getGridParam('userData') 可以随时获取对数据的引用，使用userData 参数可以直接为新的jqGrid 设置数据。

使用userData 的主要优点是数据不会像现在这样作为HTML 代码的一部分放置在某处。所以数据不会以任何方式编码，它可以有任何包含没有限制。

如果要刷新 jqGrid 中的数据，可以只使用jQuery("RequestGrid").trigger("reloadGrid") 或使用jQuery("RequestGrid").getGridParam('data') 获取网格数据，然后使用data 作为参数和datatype: 'local' 创建新网格。然后你可以在创建网格后将datatype从'local'更改为'json'（如果你真的想要'json'而不是'local'网格）。它可以是一种复制数据的简单方法。此外，我不确定，但loadone: true 的用法可能会让您感兴趣（如果您决定使用它，请查看JqGrid Reload not working）。

【讨论】：