1

カスタムフォーマッタを使用してグリッドの列にテキストボックスを追加した後、グリッドのレンダリング後にテキストを選択または変更できません。インライン編集は必要ありません。また、グリッドに変更をサーバーに保持させたくありません。この列のテキストを変更して、グリッドに依存しない別のアクションでクエリを実行できるようにしたいだけです。行とサーバーを更新します。

ありがとう、スティーブン

グリッド：

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) {
        }
    });
4

1 に答える 1

1

投稿したカスタムフォーマッタの現在の実装に少なくとも1つの問題があります

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

問題は、カスタムフォーマッタを3つの異なる形式で呼び出すことができることですrowObject。

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

を使用しますloadonce: true。したがって、グリッドの最初のロード中に、内部dataパラメータが入力されます。dataアイテムの配列になりますが、アイテムは列名などのプロパティを持つオブジェクトnameになります（アイテムのプロパティを参照colModel）。たとえば、ユーザーが列ヘッダーをクリックした場合、グリッドを並べ替える必要があり、グリッド本体をローカルdataパラメータから再入力する必要があります。のアイテムを表すカスタムフォーマッタquantityFormatterが呼び出される場合は、の代わりにを使用する必要があります。rowObjectdatarowObject.ProductIdrowObject[13]

'Quantity'列の値を使用setCellまたはsetRowData変更する場合、の形式はrowObject3番目の形式になります（!!! ???）。の行には、カスタムフォーマッタに転送されるパラメータがsetCell含まれています。行の前に設定されます：indrowObjectind

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

したがってrowObject、行（）を表すDOM要素として使用できます<tr>。したがって、$(rowObject).find(">td:nth-child(13)").text()の代わりにのようなものを使用する必要がありrowObject[13]ます。

一般的なコードを作成するには、のタイプをテストする必要がありrowObjectます。例えば

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 + '"/>';
}

あなたの場合、あなたは上記のコードを単純化することができます。なぜなら、あなたはkey: trueに'ProductId'あり、行のIDは列の包含と同じになるから'ProductId'です。ROWIDはoptions、rowIdプロパティの入力パラメータで割り当てられます。したがって、フォーマッタの実装を次のように書き直すことができます

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

現在はまったく使用rowObjectしておらず、カスタムフォーマッターを呼び出すすべてのツリーケースで機能します。

于 2012-05-12T18:23:01.283 に答える