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

我在您发布的自定义格式化程序的当前实现中看到至少一个问题

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将使用rowObjectwhich 表示 item of来调用，data并且您必须使用rowObject.ProductId而不是rowObject[13].

如果您要使用setCell或setRowData更改“数量”列的值，则格式rowObject将是第三个（!!!???）。包含参数的行将作为. 将在该行之前设置：setCellindrowObjectind

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

因此，您将拥有rowObject代表行 ( <tr>) 的 DOM 元素。所以你应该使用类似的东西$(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'。optionsrowid在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 回答