jqgrid:不显示子网格工具栏 [英] jqgrid: subgrid toolbar does not display

问题描述

我正在使用jqgrid 4.8.2.我正在尝试按照演示站点上的示例进行操作.我已经创建了一个父网格，并且需要显示一个子网格(作为网格).由于某种原因，将不会显示该子网格的工具栏页面.但是，rowNum，width和height选项仍然有效.我看了演示，看不到我做错了什么.有人可以看一下下面的代码吗?

I'm using jqgrid 4.8.2. I'm trying to follow along with the examples on the demo site. I've created a parent grid and need to show a subgrid (as a grid). For some reason, the toolbar pager for the subgrid won't display. The rowNum, width and height options are working, though. I've looked at the demo and I can't see what I'm doing wrong. Would someone take a look at the following code, please?

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

});


});

推荐答案

您的意思可能是寻呼机(不是工具栏)将不会显示在子网格中.

You mean probably that the pager (not the toolbar) will be not displayed in subgrids.

如果您了解如何将网格作为子网格，则原因非常简单功能可在jqGrid中使用.如果仅将subGrid: true添加到网格(添加到主网格)，则jqGrid在colModel中插入名称为"subgrid"的其他列.该列将具有+图标，可用于扩展"子网格.如果用户单击+图标，则新行将添加到带有+图标的行下.该行将包含带有图标的<td>和跨整个网格的<td>.最后一个<td>将包含子元素.在调用subGridRowExpanded之前，jqGrid在单元格中创建空的<div>，其单元格由网格ID，"_"和rowid(扩展行)构成. subGridRowExpanded回调的第一个参数(代码中的subgrid_id)包含空的<div>的ID.下图显示了上述内容

The reason is very easy if you understand how the grid as subgrid feature works in jqGrid. If you just add subGrid: true to the grid (to the main grid) then jqGrid insert additional column in colModel with the name "subgrid". The column will have + icons which can be used to "expand" subgrid. If the user clicks on the + icon then the new row will be added under the row with + icon. The row will contains <td> with the icon and <td> with span over the whole grid. The last <td> will contains the subdrid. Before call of subGridRowExpanded jqGrid creates empty <div> in the cell with id constructed from grid id, "_" and rowid (of expanding row). The first parameter of subGridRowExpanded callback (subgrid_id in your code) contains the id of the empty <div>. The picture below shows the described above

我在子网格行上用红色标记.在上例中，空div的ID为jqGrid_10，因为行ID为10，网格ID为jqGrid.

I marked in red color the subgrid row. The id of empty div is jqGrid_10 in the above example because the rowid is 10 and the grid id is jqGrid.

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

It's important to understand that you have to create <table> element for subgrid dynamically inside of subGridRowExpanded callback. If you want that the subgrid have the pager then you have to create <div> for the pager too. The problem in your code: you just use pager: "#jqGridPager" + "_" + subgrid_id option for subgrid, but you don't created <div> with the corresponding id.

下一个问题:子网格的每一行(<tr>)将具有id属性(行).因此，必须分配它.用户可以同时打开多个子网格. 问题在于，由于在两个不同的子网格中或子网格与主网格之间使用相同的id，可能会导致ID重复.要解决ID冲突的问题，强烈建议使用idPrefix子网格的参数，每个子网格的值都不同.

The next problem: every row (<tr>) of subgrid will have id attribute (rowid). So one have to assign it. The user can open multiple subgrids at the same time. The problem is that it's possible to have id duplicates because of usage the same id in two different subgrids or between subgrid and the main grid. To fix the problem with id conflicts it's strictly recommended to use idPrefix parameter for subgrid with the value which is different for every subgrid.

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

A possible fixed implementation of subGridRowExpanded could be the following:

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

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

By the way you use key: true property for the column ProductId of the main grid. So the rowid of the main grid will be the same as the ProductId. Because of that I used productId: rowid in the above code. One more remark. I used idPrefix: rowid + "_" for subgrid. One can use successfully other values in the same way, for example idPrefix: subgridDivId + "_".

这篇关于jqgrid:不显示子网格工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！