Question

使用自定义格式化程序向网格中的列添加文本框后，我无法在网格渲染后以任何方式选择或更改文本。我不希望内联编辑，也不想让网格将更改保留回服务器，我只是希望能够更改此列的文本然后让另一个独立于网格的操作询问行并更新服务器。

谢谢你，斯蒂芬

GRID：

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

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

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调用自定义格式化程序rowObject，该data代表rowObject.ProductId项，则必须使用rowObject[13]代替setCell。

如果您使用setRowData或rowObject更改“数量”列的值，setCell的格式将是第三个（!!! ???）。 ind的{{3}}包含rowObject参数，该参数将作为ind转发到自定义格式化程序。 var ind = $t.rows.namedItem(rowid);将在The line之前设置：

rowObject

因此，您将拥有代表行（<tr>）的$(rowObject).find(">td:nth-child(13)").text() DOM元素。因此，您应该使用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'中有'ProductId'，行的ID与options列的包含相同。 rowid在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

现在我们根本不使用{{1}}，它将适用于调用自定义格式化程序的所有树案例。

无法编辑自定义格式化程序单元格的值

1 个答案: