Пользовательский столбец шаблона не работает в JQGrid

Question

Эксперты

У меня есть JQGrid с настраиваемым столбцом шаблона, например, Edit. на следующем экране отображаются данные без ссылки «Изменить» в последнем столбце.

Javascript код:

<script language="javascript" type="text/javascript">
    function editFmatter(cellvalue, options, rowObject) {
        var cellHtml = "<a href='#' originalValue='" + cellvalue + "'>" + cellvalue + "</a>";
        return cellHtml;
    }
    function unformatEdit(cellvalue, options) {
        return $(cellObject.html()).attr("originalValue");
    }

    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            url: '@Url.Action("JQGridGetGridData", "TabMaster")',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['col ID', 'First Name', 'Last Name', 'Edit'],
            colModel: [
                      { name: 'colID', index: 'colID', width: 100, align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
                      { name: 'FirstName', index: 'FirstName', width: 150, align: 'left', editable: true },
                      { name: 'LastName', index: 'LastName', width: 150, align: 'left', editable: true },
                      { name: 'Edit', index: 'Edit', width: 80, align: "center", editable: true, formatter: editFmatter, unformat: unformatEdit }
                    ],
            pager: jQuery('#pager'),
            rowNum: 100,
            rowList: [10, 50, 100, 150],
            sortname: 'colID',
            sortorder: "asc",
            viewrecords: true,
            multiselect: true,
            imgpath: '@Url.Content("~/Scripts/themes/steel/images")',
            caption: 'Tab Master Information'
        }).navGrid('#pager', { edit: true, add: true, del: true },
        // Edit options
                {
                savekey: [true, 13],
                reloadAfterSubmit: true,
                jqModal: false,
                closeOnEscape: true,
                closeAfterEdit: true,
                url: '@Url.Action("JQGridEdit", "TabMaster")',
                afterSubmit: function (response, postdata) {
                    if (response.responseText == "Success") {
                        jQuery("#success").show();
                        jQuery("#success").html("Record updated successfully! [" + postdata.FirstName + " " + postdata.LastName + "]");
                        jQuery("#success").fadeOut(6000);
                        return [true, response.responseText]
                    }
                    else {
                        return [false, response.responseText]
                    }
                }
            },
        // Add options
                {
                url: '@Url.Action("JQGridCreate", "TabMaster")',
                closeAfterAdd: true,
                afterSubmit: function (response, postdata) {
                    if (response.responseText == "Success") {
                        jQuery("#success").show();
                        jQuery("#success").html("Record added successfully! [" + postdata.FirstName + " " + postdata.LastName + "]");
                        jQuery("#success").fadeOut(6000);
                        return [true, response.responseText]
                    }
                    else {
                        return [false, response.responseText]
                    }
                }
            },
        // Delete options
               {
               url: '@Url.Action("JQGridRemove", "TabMaster")',
               afterSubmit: function (response, rowid) {
                   if (rowid.length > 0) {
                       jQuery("#success").show();
                       jQuery("#success").html("Record deleted successfully! [" + rowid + "]");
                       jQuery("#success").fadeOut(6000);
                       return [true, response.responseText]
                   }
                   else {
                       return [false, response.responseText]
                   }
               }
           },
                {
                    closeOnEscape: true,
                    multipleSearch: false,
                    closeAfterSearch: true
                }
                   );
    });
</script>
@using (Html.BeginForm())
{
    <p>
        @Html.ActionLink("Create New", "Create") | @Html.ActionLink("Bulk Insert", "AddList")
        @* | @Html.ActionLink((string)ViewBag.RemoveSelectedTitle, "RemoveSelected")*@
    </p>

    <table id="list" class="scroll" cellpadding="0" cellspacing="0" width="100%">
    </table>
    <div id="pager" class="scroll" style="text-align: center;">
    </div>
    <div id="success" style="color: Green">
    </div>

Controller.cs

public JsonResult JQGridGetGridData(string sidx, string sord, int rows, int page)
        {
            int totalRecords = Convert.ToInt32(_tabmasterService.Count());
            int totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
            IQueryable<TabMasterViewModel> tabmasters = _tabmasterService.GetQueryTabMasterList(sidx, sord, rows, page);
            var jsonData = new
            {
                total = totalPages,
                page = page,
                records = totalRecords,
                rows = (from tm in tabmasters
                        select new
                        {
                            id = tm.colID,
                            cell = new string[] { tm.colID.ToString(), tm.FirstName, tm.LastName, "Edit" }
                        }).ToArray()
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }

Answer 1

Я решил вопрос от себя.

Я сделал следующее:

 { name: 'Edit', index: 'Edit', width: 80, align: 'center', editable: false, formatter: editFmatter, unformat: unformatEdit }

и

function editFmatter(el, cellval, opts) {
        var editHTML = "<img src='Images/row_edit.gif' alt='Edit' title='Edit' onclick='openEditDialog(" + opts.rowId + ");'>";
        var deleteHTML = "<img src='Images/row_delete.gif' alt='Delete' title='Delete' onclick='openDeleteDialog(" + opts.rowId + ");'>"; ;
        var finalHTML = editHTML + " " + deleteHTML;
        $(el).html(finalHTML);
    }
    function unformatEdit(cellvalue, options) {
        //return $(el).html().attr("originalValue");
    }

Спасибо,
Imdadhusen

Answer 2

Прежде всего, я бы порекомендовал вам взглянуть на этот и этот ответы, которые показывают, как вы можете реализовать редактирование ссылок в jqGrid.

* 1006В текущем коде есть некоторые проблемы:

• В unformatEdit вы забыли определить третий параметр cellObject и использовать неопределенное значение.
• Не рекомендуется добавлять такие атрибуты, как originalValue которые не соответствуют стандартам HTML.Если вам нужно расширить атрибуты, вы должны использовать префикс data- в имени атрибута, чтобы быть совместимым с HTML5.В этом случае вы можете изменить код, например, на $(cellObject).children('a:first').attr("data-originalValue");.
• Не рекомендуется определять глобальные функции из-за возможных конфликтов имен.Вы можете переместить объявление функции в обработчик событий jQuery(document).ready(function () {/*here*/});.Вы можете определить функцию как переменные: var editFmatter = function(cellvalue, options, rowObject) {/* the body of the function*/}; и использовать позже так же, как и раньше.
• Вам следует использовать последнюю версию jqGrid (в настоящее время 4.1.1 ).Многие параметры, такие как imgpath, которые вы используете, не существуют с годами (см. здесь ).Если вы ищите более свежий пример кода ASP.NET MVC, я бы порекомендовал вам посмотреть в части «ОБНОВЛЕНО» ответа и загрузить соответствующие примеры кода (проект VS2008 и проект VS2010 ).