将标记插入隐藏的jqGrid列

时间:2010-08-10 13:27:00

标签: jquery asp.net-mvc jqgrid

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>并且它有效但是当我添加一个空单元格时它停止工作,因此标记出现了问题。

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

由于

2 个答案:

答案 0 :(得分:0)

通过在BuildRequestPlan方法中的标记周围包装HTML注释来解决此问题。在将标记传递到工具提示时,我只是删除了注释。这是非正统的但是有效。

答案 1 :(得分:0)

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

使用userData的主要优点是数据不会像现在这样放在HTML代码中。因此,数据不会以任何方式编码,并且可以包含任何限制。

如果要刷新jqGrid中的数据,可以使用jQuery("RequestGrid").trigger("reloadGrid")或使用jQuery("RequestGrid").getGridParam('data')获取网格数据,然后使用data作为参数创建新网格,{{ 1}}。然后,您可以在创建网格后将datatype: 'local'datatype更改为'local'(如果您确实想要'json'而不是'json'网格)。它可以是复制数据的简单方法。此外,我不确定,但可能'local'的用法对你很有意义(如果你决定使用它,请查看JqGrid Reload not working)。