カスタムテンプレート列は <p></p>は、私が編集のようなカスタムテンプレート列でJQGridを持って、JQGrid

Question

専門家では動作しません。 最後の列に編集リンクがない次の画面表示データ。

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

すべて私がthisでご覧になることをお勧めしてthisなりの答えの最初のw jqGridにEditリンクを実装する方法を示します。あなたが三番目のパラメータcellObjectを定義し、未定義の値を使用するのを忘れunformatEditで

• ：

  あなたの現在のコードは、いくつかの問題を抱えています。

• HTML標準に対応していないoriginalValueのような属性を追加するのは良いことではありません。属性を拡張する必要がある場合は、属性名に接頭辞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のような多くのパラメータは年以来存在しません（here参照）。もっと最近のASP.NET MVCコードの例を見るなら、the answerの "UPDATED"部分を見て、対応するコード例（VS2008 projectとthe VS2010 project）をダウンロードすることをお勧めします。