javascript - jqGrid remove column headers from subgrid - Stack Overflow

admin管理员组

文章数量:1357273

I am using jqGrid-4.4.1 subGrid functionality.

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

I tried

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.

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

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.

I am using jqGrid-4.4.1 subGrid functionality.

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

I tried

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.

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

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.

• javascript
• jquery
• jqgrid

Share Improve this question Follow edited May 23, 2017 at 12:08 CommunityBot 111 silver badge asked Jan 4, 2013 at 10:52 Hardik MishraHardik Mishra 14.9k99 gold badges6363 silver badges9797 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.

The demo demonstrate such implementation:

Below is the code which I used for the demo

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.

本文标签： javascriptjqGrid remove column headers from subgridStack Overflow