jqGrid loại bỏ các tiêu đề cột khỏi lưới con

Question

Tôi đang sử dụng chức năng subGrid jqGrid-4.4.1.

Trong trường hợp của tôi, tôi muốn xóa các tiêu đề Cột khỏi subGrid cho mỗi hàng.

tôi đã cố gắng

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

từ link này. Tuy nhiên, nó loại bỏ tiêu đề của bảng chính, thay vì subgrid.

Tôi tìm thấy phương án thay thế nhưng dựa trên HTML của nó. How to remove the table column headers from Jqgrid subgrid

Ngoài ra, Làm cách nào để xóa dấu carot khỏi cột đầu tiên khi hàng được mở rộng.

Đây là ảnh chụp nhanh. Tôi muốn xóa đường viền được đánh dấu màu đỏ.

Answer 1

Nói chung bạn sử dụng đúng cách để che giấu các tiêu đề cột. Vấn đề duy nhất là bạn cần phải sử dụng ẩn với lưới chính xác. Thông thường, người ta tạo ra mạng con dưới dạng lưới bên trong của subGridRowExpanded gọi lại. jqGrid tạo <div> nơi bạn nên đặt lược đồ con mới. Số id của số div bạn nhận được làm thông số đầu tiên của số subGridRowExpanded gọi lại (xem the documentation để biết thêm chi tiết). Vì vậy, một tạo ra subgrid với một số id được xây dựng thường dựa trên id của div. Nếu bạn sử dụng id của mạng con thay vì #list, bạn sẽ có thể ẩn các tiêu đề cột của lược đồ con.

The demo chứng minh thực hiện như:

Dưới đây là đoạn code mà tôi sử dụng cho 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}); 

CẬP NHẬT: The answer cho thấy làm thế nào để thực hiện thay đổi kích thước của cột subgrid sau khi thay đổi kích thước các cột của lưới chính.