Thêm hơn hai phần đầu nhóm columng trong jqGrid

Question

multi level group headers in jqgrid

Đây là một phản ứng trực tiếp cho câu trả lời được liệt kê trong câu hỏi trên, nhưng tôi không thể thêm vào cuộc nói chuyện đó.

Tôi hiểu rằng có một giới hạn trong jqgrid chỉ cho phép một cấp tiêu đề nhóm trong lưới, nhưng tôi tò mò liệu có ai tìm được giải pháp cho phép nhiều hơn không? Chúng tôi đang cố gắng di chuyển ứng dụng của chúng tôi từ một bảng HTML được máy chủ phân phối tới jqgrid, nhưng cho phép nhiều (nhiều hơn 2) tiêu đề cột được coi là một mục quan trọng

Answer 1

Một và cách dễ dàng để tăng bất kỳ số lượng các cấp (kích thước) trong jqGrid là bằng cách thêm setGroupHeaders rằng số lần

Nếu cột của tôi là như thế, ColNames = [ 'Id', 'Ngày', ' Khách hàng ',' Số tiền ',' Thuế ',' Tổng ',' Ghi chú '];

Bây giờ thêm setGroupHeaders Giống như

jQuery("#list").jqGrid('setGroupHeaders', { 
      useColSpanStyle: true, 
      groupHeaders:[ 
      {startColumnName: 'id', numberOfColumns: 1, titleText: '.'}, 
      {startColumnName: 'date', numberOfColumns: 8, titleText: 'Nice'}, 
      ] 
     }); 
     jQuery("#list").jqGrid('setGroupHeaders', { 
      useColSpanStyle: true, 
      groupHeaders:[ 
      {startColumnName: 'id', numberOfColumns: 1, titleText: '.'}, 
      {startColumnName: 'date', numberOfColumns: 4, titleText: 'rice'}, 
      {startColumnName: 'total', numberOfColumns: 2, titleText: 'dice'} 
      ] 
     }); 

     jQuery("#list").jqGrid('setGroupHeaders', { 
      useColSpanStyle: true, 
      groupHeaders:[ 
      {startColumnName: 'id', numberOfColumns: 1, titleText: '.'}, 
      {startColumnName: 'date', numberOfColumns: 2, titleText: 'Price'}, 
      {startColumnName: 'amount', numberOfColumns: 2, titleText: 'Shiping'}, 
      {startColumnName: 'total', numberOfColumns: 2, titleText: 'bipping'} 
      ] 
     }); 

Tiếp theo là sản phẩm

| . |      Nice        | 
---------------------------------------------------------------- 
| . |     rice    |  dice  | 
----------------------------------------------------------------  
| . |  Price  |  Shipping  |  bipping  | 
----------------------------------------------------------------  
| id | Date | Client | Amount | Tax | Total | Notes | 

Answer 2

Lý do hạn chế một mức độ của nhóm tiêu đề trong jqGrid tồn tại vì jqGrid cung cấp nhiều hơn như chỉ hiển thị tiêu đề. Bạn có thể thấy trên ví dụ về được tạo cho the answer rằng các tiêu đề cột sau khi nhóm có thể nhấp (để sắp xếp theo cột) và có thể thay đổi kích thước (bằng cách kéo & thả trên dấu phân tách giữa các tiêu đề cột). Nếu bạn sử dụng tùy chọn titleText của setGroupHeaders, bạn có thể bao gồm các đoạn HTML, phần tử bao gồm <table>, trong tiêu đề cột. Nó cho bạn khả năng hiển thị các tiêu đề mức milti. Người ta có thể bao gồm resizable: false để từ chối thay đổi kích thước hoặc người ta có thể viết bộ xử lý tùy chỉnh resizeStop nào thay đổi kích thước các cột trong bảng được thêm bởi titleText tùy chọn setGroupHeaders.

Tất cả những gì tôi đã mô tả ở trên lý thuyết âm thanh. Vì vậy, tôi đã viết the small demo thể hiện cách tiếp cận này. Nó hiển thị lưới sau

Bản demo được viết không phải cho các trường hợp thông thường, nhưng rõ ràng là người ta có thể sử dụng nó làm cơ sở để giải pháp phổ biến hơn. Trong bất kỳ cách nào tôi hy vọng rằng bạn có thể thay đổi nó vào bất kỳ lưới đa cấp của bạn.

Các bộ phận quan trọng nhất của bản demo, bạn sẽ tìm thấy bên dưới:

var grid = $("#list"), 
    setHeaderWidth = function() { 
     var $self = $(this), 
      colModel = $self.jqGrid("getGridParam", "colModel"), 
      cmByName = {}, 
      ths = this.grid.headers, // array with column headers 
      cm, 
      i, 
      l = colModel.length; 

     // save width of every column header in cmByName map 
     // to make easy access there by name 
     for (i = 0; i < l; i++) { 
      cm = colModel[i]; 
      cmByName[cm.name] = $(ths[i].el).outerWidth(); 
     } 
     // resize headers of additional columns based on the size of 
     // the columns below the header 
     $("#h1").width(cmByName.amount + cmByName.tax + cmByName.total - 1); 
     $("#h2").width(cmByName.closed + cmByName.ship_via - 1); 
    }; 

grid.jqGrid({ 
    ... 
    colModel: [ 
     {name: "id", width: 65, align: "center", sorttype: "int", hidden: true}, 
     {name: "invdate", width: 80, align: "center", sorttype: "date", 
      formatter: "date", formatoptions: {newformat: "d-M-Y"}, datefmt: "d-M-Y"}, 
     {name: "name", width: 70}, 
     {name: "amount", width: 75, formatter: "number", sorttype: "number", align: "right"}, 
     {name: "tax", width: 55, formatter: "number", sorttype: "number", align: "right"}, 
     {name: "total", width: 65, formatter: "number", sorttype: "number", align: "right"}, 
     {name: "closed", width: 75, align: "center", formatter: "checkbox", 
      edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}}, 
     {name: "ship_via", width: 100, align: "center", formatter: "select", 
      edittype: "select", editoptions: {value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN"}}, 
     {name: "note", width: 70, sortable: false} 
    ], 
    resizeStop: function() { 
     // see https://stackoverflow.com/a/9599685/315935 
     var $self = $(this), 
      shrinkToFit = $self.jqGrid("getGridParam", "shrinkToFit"); 

     $self.jqGrid("setGridWidth", this.grid.newWidth, shrinkToFit); 
     setHeaderWidth.call(this); 
    } 
}); 
grid.jqGrid ("navGrid", "#pager", 
      {edit: false, add: false, del: false, refresh: true, view: false}, 
      {}, {}, {}, {multipleSearch: true, overlay: false}); 
grid.jqGrid("setGroupHeaders", { 
    useColSpanStyle: true, 
    groupHeaders: [{ 
     startColumnName: "amount", 
     numberOfColumns: 5, 
     titleText: 
      '<table style="width:100%;border-spacing:0px;">' + 
      '<tr><td id="h0" colspan="2"><em>Details</em></td></tr>' + 
      '<tr>' + 
       '<td id="h1">Price</td>' + 
       '<td id="h2">Shiping</td>' + 
      '</tr>' + 
      '</table>' 
    }] 
}); 
$("th[title=DetailsPriceShiping]").removeAttr("title"); 
$("#h0").css({ 
    borderBottomWidth: "1px", 
    borderBottomColor: "#c5dbec", // the color from jQuery UI which you use 
    borderBottomStyle: "solid", 
    padding: "4px 0 6px 0" 
}); 
$("#h1").css({ 
    borderRightWidth: "1px", 
    borderRightColor: "#c5dbec", // the color from jQuery UI which you use 
    borderRightStyle: "solid", 
    padding: "4px 0 4px 0" 
}); 
$("#h2").css({ 
    padding: "4px 0 4px 0" 
}); 
setHeaderWidth.call(grid[0]); 

CẬP NHẬT: Nhiều mã sau đó của setGroupHeaders cho phép nhiều cuộc gọi của setGroupHeaders trên lưới tương tự. Trong cách người ta có thể tạo ra các tiêu đề đa cấp. jqPivot sử dụng tính năng này (xem the wiki).