Вставка разметки в скрытый столбец jqGrid

Question

Хорошо запустил 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>, и это сработало, но когдаЯ добавил пустую ячейку, она перестала работать, поэтому с разметкой что-то не так.

Кто-нибудь сталкивался с подобной проблемой?Есть мысли?

Спасибо

Answer 1

Прежде всего, я бы порекомендовал вам использовать 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 не работает , если вы решите использовать это).

Answer 2

Исправлена ​​эта проблема, оборачивая HTML-комментарий вокруг разметки в методе BuildRequestPlan. Когда дело доходит до передачи разметки во всплывающую подсказку, я просто удаляю комментарии. Это неортодоксально, но работает.