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

问题描述

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

var lastSelection;$(文档).ready(函数 () {$("#jqGrid").jqGrid({url: 'servlet/getData',数据类型:json"，editurl: "servlet/updateProduct",页数:1，col型号:[{ 标签:'ID'，名称:'ProductId'，宽度:75，键:true }，{ 标签:'Category'，名称:'CategoryName'，宽度:90 }，{ 标签:名称"，名称:产品名称"，宽度:100 }，{ 标签:'国家'，名称:'国家'，宽度:80 }，{ 标签:'价格'，名称:'价格'，宽度:80 }，{ 标签:'数量'，名称:'数量'，宽度:80 }，{ 标签:包含?"，名称:包含"，宽度:80，可真，编辑类型:复选框"，编辑选项:{值:是:否"} }],viewrecords: true,//在工具栏上显示当前页面、数据范围和总记录onSelectRow: 函数 (rowid) {var grid = $('#jqGrid');if (rowid && rowid !== lastSelection) {grid.jqGrid('restoreRow', lastSelection);最后选择 = 行号；}grid.jqGrid('editRow', lastSelection, {keys: true,外参数:{主页:livonia"，产品名称:函数(){var row = grid.getRowData(lastSelection);//这两个都有效:var temp = row.ProductName;var temp1 = row['ProductName'];返回行.产品名称；}}});},宽度:780，身高:200，行数:10，寻呼机:#jqGridPager"，子网格:真，subGridRowExpanded:函数(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,数据类型:json"，页数:1，col型号:[{标签:'产品ID'，名称:'ProductId'，宽度:75，键:假，隐藏:真}，{ 标签:'Whse ID'，名称:'WhseId'，宽度:90，键:true }，{ 标签:'WhseName'，名称:'WhseName'，宽度:90 }，{ 标签:'数量'，名称:'数量'，宽度:80 }，{ 标签:包含?"，名称:包含"，宽度:80，可真，编辑类型:复选框"，编辑选项:{值:是:否"} }],观看记录:真实，高度:'100%'，宽度:400，行号:5，寻呼机:#jqGridPager"+_"+ subgrid_id});}});});

解决方案

您的意思可能是 分页器(不是工具栏)不会显示在子网格中.

如果您了解

我用红色标记了子网格行.上例中空div的id为jqGrid_10，因为rowid为10，grid id为jqGrid.

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

下一个问题:子网格的每一行(<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',发布数据: {问:2，id:rowid，产品编号:rowid},数据类型:本地"，col型号:[{ 标签:'产品 ID'，名称:'ProductId'，宽度:75，隐藏:true }，{ 标签:'Whse ID'，名称:'WhseId'，宽度:90，键:true }，{ 标签:'WhseName'，名称:'WhseName'，宽度:90 }，{ 标签:'数量'，名称:'数量'，宽度:80 }，{ 标签:包含?"，名称:包含"，宽度:80，可真，编辑类型:复选框"，编辑选项:{值:是:否"} }],观看记录:真实，高度:'100%'，宽度:400，行号:5，//idPrefix: subgridDivId + "_",idPrefix: rowid + "_",寻呼机:#"+ subgridPagerId});}

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

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.

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

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.

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.

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.

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

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屋！