jqGrid从子网格中删除列标题

问题描述

我正在使用jqGrid-4.4.1 subGrid功能.

I am using jqGrid-4.4.1 subGrid functionality.

对于我来说，我想从 subGrid 中删除每一行的列标题.

In my case I want to remove Column headers from subGrid for each row.

我尝试过

var grid = $("#list");
var gview = grid.parents("div.ui-jqgrid-view");
gview.children("div.ui-jqgrid-hdiv").hide();

通过此链接 .但是，它将删除主表的标题，而不是子网格.

from this link. But, It removes header of main table, rather than subgrid.

我找到了一个替代方法，但它基于HTML.如何从Jqgrid子网格中删除表列标题

I found an alternative but its HTML based.How to remove the table column headers from Jqgrid subgrid

此外，展开行后，如何从第一列中删除"carot sign".

Also, How can I to remove carot sign the from the first column when row is expanded.

这是快照.我要删除标记为红色的边框.

Here is the snapshot. I want to remove the border marked red.

推荐答案

通常，您使用正确的方法来隐藏列标题.唯一的问题是您需要使用正确的网格进行隐藏.通常，在subGridRowExpanded回调内部将子网格创建为网格. jqGrid创建<div>，您应在其中放置新的子网格. div的id作为subGridRowExpanded回调的第一个参数(请参见文档以获取更多详细信息).因此，可以创建一个带有通常基于div的ID构造的子网格的子网格.如果您使用子网格的ID 而不是#list，则可以隐藏子网格的列标题.

In general you use the correct way to hide the column headers. The only problem is that you need to use hiding with the correct grid. Typically one creates subgrid as grid inside of subGridRowExpanded callback. jqGrid create <div> where you should place new subgrid. The id of the div you get as the first parameter of subGridRowExpanded callback (see the documentation for more details). So one creates subgrid with some id constructed typically based on the id of the div. If you would use the id of the subgrid instead of #list you will be able to hide the column headers of the subgrid.

演示演示了这种实现:

下面是我用于演示

var myData = [
        {
            id: "10",
            c1: "My Value 1",
            c2: "My Value 1.1",
            subgridData: [
                { id: "10", c1: "aa", c2: "ab" },
                { id: "20", c1: "ba", c2: "bb" },
                { id: "30", c1: "ca", c2: "cb" }
            ]
        },
        {
            id: "20",
            c1: "My Value 2",
            c2: "My Value 2.1",
            subgridData: [
                { id: "10", c1: "da", c2: "db" },
                { id: "20", c1: "ea", c2: "eb" },
                { id: "30", c1: "fa", c2: "fb" }
            ]
        },
        {
            id: "30",
            c1: "My Value 3",
            c2: "My Value 3.1",
            subgridData: [
                { id: "10", c1: "ga", c2: "gb" },
                { id: "20", c1: "ha", c2: "hb" },
                { id: "30", c1: "ia", c2: "ib" }
            ]
        }
    ],
    $grid = $("#list"),
    mainGridPrefix = "s_";

$grid.jqGrid({
    datatype: "local",
    data: myData,
    colNames: ["Column 1", "Column 2"],
    colModel: [
        { name: "c1", width: 180 },
        { name: "c2", width: 180 }
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
    pager: "#pager",
    gridview: true,
    ignoreCase: true,
    rownumbers: true,
    sortname: "c1",
    viewrecords: true,
    autoencode: true,
    height: "100%",
    idPrefix: mainGridPrefix,
    subGrid: true,
    subGridRowExpanded: function (subgridDivId, rowId) {
        var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
            pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId);

        $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
        $subgrid.jqGrid({
            datatype: "local",
            data: $(this).jqGrid("getLocalRow", pureRowId).subgridData,
            colModel: [
                { name: "c1", width: 178 },
                { name: "c2", width: 178 }
            ],
            height: "100%",
            rowNum: 10000,
            autoencode: true,
            gridview: true,
            idPrefix: rowId + "_"
        });
        $subgrid.closest("div.ui-jqgrid-view")
            .children("div.ui-jqgrid-hdiv")
            .hide();
    }
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

已更新:答案显示了在调整大小后如何实现子网格列的大小调整主网格的列.

UPDATED: The answer shows how to implement resizing of columns of subgrid after resizing of the columns of the main grid.

这篇关于jqGrid从子网格中删除列标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！