カスタムフォーマッタセルの値を編集できません

Question

カスタムフォーマッタを使用してグリッドの列にテキストボックスを追加した後、グリッドをレンダリングした後にテキストを選択または変更できません。私はインライン編集を望んでいないし、グリッドに変更をサーバーに保存し直したくない、単にこの列のテキストを変更して、グリッドから独立した別のアクションをサーバーを更新します。私は、あなたは問題があることである

function quantityFormatter(cellvalue, options, rowObject) { 
    return '<input type="text" class="qty-order" value="' + cellvalue + 
       '" class="text" title="' + rowObject[13] + 
       '" id="qty-' + rowObject[13] + '"/>'; 
} 

を掲載するカスタムフォーマッタのあなたの現在の実装では、少なくとも一つの問題を参照してください

var favoriteGrid; 
var colNames = ['Qty', 'Attributes', 'Item #', 'Brand', 'Product', 'Catalog', 'Price', 'UOM', 'Case', 'Remarks', 'Wt.', 'Par', 'Date', 'ProductId', '', 'CatalogId']; 
var colModel = [ 
{ name: 'Quantity', index: 'Quantity', width: 22, formatter: quantityFormatter/*, editable:true, edittype:'text'*/ }, 
{ name: 'ProductAttributes', index: 'ProductAttributes', sortable: false, width: 50, title: false, formatter: productFormatter }, 
{ name: 'ItemNum', index: 'ItemNum', width: 50, align: "right" }, 
{ name: 'BrandName', index: 'BrandName', width: 100 }, 
{ name: 'ProducName', index: 'ProducName', width: 150 }, 
{ name: 'Catalog', index: 'Catalog', width: 100 }, 
{ name: 'Price', index: 'Price', width: 40, sorttype: "number", align: "right" }, 
{ name: 'UOM', index: 'UOM', width: 30 }, 
{ name: 'CasePack', index: 'CasePack', width: 30 }, 
{ name: 'PackageRemarks', index: 'PackageRemarks', width: 80 }, 
{ name: 'AveWeight', index: 'AveWeight', width: 30, title: false, align: "right" }, 
{ name: 'Par', index: 'Par', width: 25, title: false, align: "right"}, 
{ name: 'LastPurchaseDate', index: 'LastPurchaseDate', width: 44, align: "right", formatter: 'date', formatoptions: { newformat: 'm/d/Y'} }, 
{ name: 'ProductId', index: 'ProductId', hidden: true, key: true }, 
{ name: 'SortPriority', index: 'SortPriority', width: 20, sorttype: "number", align: "right" }, 
{ name: 'CatalogId', index: 'CatalogId', hidden: true } 
]; 

function quantityFormatter(cellvalue, options, rowObject) { 
    return '<input type="text" class="qty-order" value="' + cellvalue + '" class="text" title="' + rowObject[13] + '" id="qty-' + rowObject[13] + '"/>'; 
}; 

function productFormatter(cellvalue, options, rowObject) <Omitted...> 

favoriteGrid = $('#favoriteGrid'); 

$.jgrid.no_legacy_api = true; 

favoriteGrid.jqGrid({ 
    url: '/Buyer/Favorite/ItemsService/' + urlIndex, 
    datatype: 'json', 
    mtype: 'GET', 
    ajaxGridOptions: { contentType: "application/json" }, 
    jsonReader: { 
     id: "ProductId", 
     cell: "", 
     root: function (obj) { return obj.rows; }, 
     page: function() { return 1; }, 
     total: function() { return 1; }, 
     records: function (obj) { return obj.rows.length; }, 
     repeatitems: true 
    }, 
    /*   
    cellEdit: true, 
    cellSubmit: null, 
    cellurl: null, 
    */ 
    colNames: colNames, 
    colModel: colModel, 
    pager: $('#favoritePager'), 
    pginput: true, 
    rowNum: 1000, 
    autowidth: true, 
    height: getProposedHeight(), 
    sortable: true, 
    multiselect: true, 
    viewrecords: true, 
    ignoreCase: true, 
    loadonce: true, 
    loadui: 'block', 
    emptyrecords: 'Nothing to display', 
    ondblClickRow: function (rowid, e) { 
     myClickHandle.call(this, rowid); 
    }, 
    loadComplete: function() { 
     var gd = $('#favoriteGrid'); 
     fixGridSize(gd); 

     /*var ids = favoriteGrid.jqGrid('getDataIDs');*/ 
    } 
}).jqGrid('navGrid', '#favoritePager', 
    { add: false, edit: false, del: false, search: true, refresh: false }, 
    {}, 
    {}, 
    {}, 
    { multipleSearch: true, showQuery: false }, 
    {}).jqGrid('sortableRows', { 
     update: function (ev, ui) { 
     } 
    }); 

Answer 1

：

はスティーブン

は

、GRIDをありがとうカスタムフォーマッタは、の3種類のフォーマットで呼び出すことができますのrowObject。

jsonReader: {cell: "", repeatitems: true, ...}を使用してください。したがって、最初のロードでは、rowObjectは実際に行を表すデータ（通常は文字列の配列）で配列されます。

loadonce: trueを使用してください。したがって、グリッドの最初の読み込み中に、dataパラメータが埋め込まれます。 dataは項目の配列になりますが、項目はオブジェクトで、列名のようなプロパティを持ちます（nameプロパティのcolModel項目を参照）。ユーザが例えば列見出しをクリックするとグリッドがソートされる必要があり、グリッド本体はローカルdataパラメータから補充されなければならない。カスタムフォーマッタquantityFormatterがで呼び出され、dataのアイテムを表し、rowObject[13]の代わりに​​3210を使用する必要があります。

setCellまたはsetRowDataを使用して 'Quantity'列の値を変更する場合、rowObjectの形式は3番目のもの（!!! ???）になります。 The lineのsetCellはindのパラメータを含み、これはカスタムフォーマッタにrowObjectとして転送されます。 indはthe lineに前に設定されます。

var ind = $t.rows.namedItem(rowid); 

ですから、行を表すrowObject DOM要素（<tr>）として持っています。だからrowObject[13]の代わりに$(rowObject).find(">td:nth-child(13)").text()のようなものを使うべきです。

一般的なコードを書くには、rowObjectのタイプをテストする必要があります。あなたは'ProductId'でkey: trueを持っていると'ProductId'列を含めると、行のIDは同じになりますので、あなたの場合の例

function quantityFormatter(cellvalue, options, rowObject) { 
    var productId = typeof rowObject.ProductId !== "undefined" ? 
      rowObject.ProductId : 
      (rowObject instanceof HTMLTableRowElement ? 
       $(rowObject).find(">td:nth-child(13)").text() : 
       rowObject[13]); 
    return '<input type="text" class="qty-order text" value="' + cellvalue + 
       ' title="' + productId + '" id="qty-' + productId + '"/>'; 
} 

のためには、上記のコードを簡素化することができます。 rowidは、rowIdプロパティの入力パラメータoptionsに割り当てられます。だから、今、私たちはすべてのrowObjectを使用していないと、それは、カスタムフォーマッタの呼び出しのすべてのツリーの場合で動作します

function quantityFormatter(cellvalue, options) { 
    var productId = options.rowId; 
    return '<input type="text" class="qty-order text" value="' + cellvalue + 
       ' title="' + productId + '" id="qty-' + productId + '"/>'; 
} 

を次のようにあなたのフォーマッタの実装を書き換えることができます。