Question

我正在使用jqgrid 4.8.2。我正在尝试跟随演示网站上的示例。我创建了一个父网格，需要显示一个子网格（作为网格）。由于某种原因，子网格的工具栏寻呼机将不会显示。但是，rowNum，width和height选项正在运行。我看过演示，我看不出我做错了什么。有人会看一下下面的代码吗？

var lastSelection;

$(document).ready(function () {

    $("#jqGrid").jqGrid({
    url: 'servlet/getData',
    datatype: "json",
    editurl: "servlet/updateProduct",
    page: 1, 
     colModel: [
        { label: 'ID', name: 'ProductId', width: 75, key: true },
        { label: 'Category', name: 'CategoryName', width: 90 },
        { label: 'Name', name: 'ProductName', width: 100 },
        { label: 'Country', name: 'Country', width: 80 },
        { label: 'Price', name: 'Price', width: 80 },
        { label: 'Qty', name: 'Quantity', width: 80 },
        { label: 'Included?', name: 'Included', width: 80,
                editable: true, 
                edittype: "checkbox", 
                editOptions: {value:"Yes:No"} }
    ],
    viewrecords: true, // show the current page, data range and total records on the toolbar
    onSelectRow: function (rowid) {
        var grid = $('#jqGrid');
        if (rowid && rowid !== lastSelection) {
            grid.jqGrid('restoreRow', lastSelection);
            lastSelection = rowid;
        }
        grid.jqGrid('editRow', lastSelection, {keys: true, 
            extraparam : {
                home: "livonia", 
                productName: function(){
                    var row = grid.getRowData(lastSelection);

                    // Both of these work:
                    var temp = row.ProductName;
                    var temp1 = row['ProductName'];

                    return row.ProductName;
                }
            }
        } 
        );

    },
    width: 780,
    height: 200,
    rowNum: 10,
    pager: "#jqGridPager",

    subGrid: true,
    subGridRowExpanded: function(subgrid_id, row_id) {
        var lastSubgridSelection;

        var grid = $('#jqGrid');
        var row = grid.getRowData(row_id);  
        var productId = row.ProductId;

           var subgrid_table_id;
           subgrid_table_id = subgrid_id + "_t";
           jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
           jQuery("#"+subgrid_table_id).jqGrid({
              url: 'servlet/getProductWarehouses?q=2&id=' + row_id + '&productId=' + productId,
              datatype: "json",
                page: 1, 
                colModel: [
                    { label: 'Product ID', name: 'ProductId', width: 75, key: false, hidden: true },
                    { label: 'Whse ID', name: 'WhseId', width: 90, key: true },
                    { label: 'Whse Name', name: 'WhseName', width: 90 },
                    { label: 'Qty', name: 'Quantity', width: 80 },
                    { label: 'Included?', name: 'Included', width: 80,
                    editable: true, 
                    edittype: "checkbox", 
                    editOptions: {value:"Yes:No"} }
                ],
            viewrecords: true,
            height: '100%',
            width: 400,
            rowNum: 5,
            pager: "#jqGridPager" + "_" + subgrid_id
           });
       }

});


});

Answer 1

你的意思是，寻呼机（不是工具栏）可能不会显示在子网格中。

如果您了解grid as subgrid功能在jqGrid中的工作原理，那么原因很简单。如果您只是将subGrid: true添加到网格（到主网格），则jqGrid会在colModel中插入名为"subgrid"的其他列。该列将具有+个图标，可用于“展开”子网格。如果用户点击+图标，则新行将添加到+图标的行下方。该行将包含带有图标的<td>和带有跨越整个网格的<td>。最后一个<td>将包含子网格。在调用subGridRowExpanded之前，jqGrid在单元格中创建空<div>，其中id由网格ID，“_”和rowid（扩展行）构成。 subGridRowExpanded回调的第一个参数（代码中为subgrid_id）包含空<div>的ID。下图显示了上述

我用红色标记了子网格行。在上面的示例中，空div的id为jqGrid_10，因为rowid为10，网格ID为jqGrid。

了解您必须在<table>回调中动态创建子网格的subGridRowExpanded元素非常重要。如果您希望子网格具有寻呼机，那么您还必须为寻呼机创建<div>。 您的代码中的问题：您只需对子网格使用pager: "#jqGridPager" + "_" + subgrid_id选项，但您没有使用相应的ID创建<div>。

下一个问题：子网格的每一行（<tr>）都有id属性（rowid）。所以必须分配它。用户可以同时打开多个子网格。 问题是，由于在两个不同的子网格中或在子网格与主网格之间使用相同的id，因此可能会出现重复ID。要解决id冲突问题，严格建议使用对子网格使用idPrefix参数，并为每个子网格使用不同的值。

subGridRowExpanded的可能固定实现可能如下：

subGridRowExpanded: function (subgridDivId, rowid) {
    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
        subgridPagerId = subgridDivId + "_p";
    $("#" + subgridDivId)
        .append($subgrid)
        .append("<div id='" +subgridPagerId + "'></div>");

    $subgrid.jqGrid({
        url: 'servlet/getProductWarehouses',
        postData: {
            q: 2,
            id: rowid,
            productId: rowid
        },
        datatype: "local",
        colModel: [
            { label: 'Product ID', name: 'ProductId', width: 75, hidden: true },
            { label: 'Whse ID', name: 'WhseId', width: 90, key: true },
            { label: 'Whse Name', name: 'WhseName', width: 90 },
            { label: 'Qty', name: 'Quantity', width: 80 },
            { label: 'Included?', name: 'Included', width: 80,
                editable: true,
                edittype: "checkbox",
                editOptions: {value:"Yes:No"} }
        ],
        viewrecords: true,
        height: '100%',
        width: 400,
        rowNum: 5,
        //idPrefix: subgridDivId + "_",
        idPrefix: rowid + "_",
        pager: "#" + subgridPagerId
    });
}

顺便提一句，您将key: true属性用于主网格的列ProductId。因此主网格的rowid将与ProductId相同。因此，我在上面的代码中使用了productId: rowid。再说一遍。我使用idPrefix: rowid + "_"作为子网格。可以以相同的方式成功使用其他值，例如idPrefix: subgridDivId + "_"。

jqgrid：子网格工具栏不显示

1 个答案: