jqGrid cột không được căn chỉnh với tiêu đề cột

Question

Câu hỏi này được hỏi tại đây. jqGrid column not aligned with column headers

Nhưng kiểu màu đường viền phải không có tác dụng đối với tôi.

Tôi đang sử dụng jqGrid 3.8 và IE 8

Đây là thiết lập của tôi cho jqGrid

shrinkToFit:true, 
colModel :[ 
    {name:'leid', index:'leid', width:70, label:'LEID'}, 
    {name:'cdr', index:'cdr', width:40, label:'CDR'}, 
    {name:'name', index:'name', width:160, label:'Name'}, 
    {name:'country', index:'country', width:98, label:'Country'}, 
    {name:'fc', index:'fc', width:50, label:'FC'}, 
    {name:'bslaMe', index:'bslaMe', width:65, label:'BSLA/ME'}, 
    {name:'business', index:'business', width:130, label:'Business'}, 
    {name:'amtFc', index:'amtFc', width:98, label:'Amt(FC)', align:'right', 
    formatter:'currency', formatoptions:{decimalSeparator:".", 
    thousandsSeparator: ",", decimalPlaces: 2, prefix: "", suffix:"", 
    defaultValue: '0'} }, 
    {name:'amtUsd', index:'amtUsd', width:98, label:'Amt(Cur)', align:'right', 
    formatter:'currency', formatoptions:{decimalSeparator:".", 
    thousandsSeparator: ",", decimalPlaces: 2, prefix: "", suffix:"", 
    defaultValue: '0'} }, 
    {name:'cashPoolHeader', index:'cashPoolHeader', width:120, 
    label:'Cash Pool Header'}, 
    {name:'cashPoolCDR', index:'cashPoolCDR', width:60, label:'CP CDR'}, 
    {name:'cashPoolName', index:'cashPoolName', width:160, label:'Cash Pool Name'} 
], 

Bất kỳ suy nghĩ?

Answer 1

Tôi đã có cùng một vấn đề, tôi giải quyết vấn đề này bằng cách thêm 4 dòng mã trong gridComplete, những 4 dòng sẽ thay đổi phong cách của td 's của khu vực nội dung [hàng td đầu tiên' thay đổi phong cách s là đủ].

Đây là vấn đề trong jqgid, thực tế là đặt td bên trong <thead> nhưng phong cách này không phản ánh trong khu vực nội dung của td. Trong khi phát triển jqgrid họ giả định rằng toàn bộ chiều rộng cột sẽ được thực hiện bằng cách thay đổi độ rộng của một hàng td s nhưng chúng chỉ thay đổi cho <thead> là vấn đề tồn tại ở đây.

độ rộng Set cột trong colModel:

colModel: [ 
    { 
     name: 'Email', 
     index: 'Email', 
     editable: true, 
     edittype: 'custom', 
     width: 220, 
     editoptions: { 
      custom_element: function(value, options) { 
       return EmailAddressCustomElement(value, options); 
      }, 
      custom_value: function(elem) { 
       var inputs = $("input", $(elem)[0]); 
       return inputs[0].value; 
      } 
     } 
    }, 
    { 
     name: 'LocationAndRole', 
     index: 'LocationAndRole', 
     editable: true, 
     align: "left", 
     edittype: "button", 
     width: 170, 
     editoptions: { 
      value: 'Edit Location And Role', 
      dataEvents: [{ 
       type: 'click', 
       fn: function(e) { 
        ShowUsersLocationAndRoles(e); 
       } 
      }] 
     } 
    } 
] 

thêm mã dưới đây trong trường hợp gridComplete:

gridComplete: function() { 
    var objRows = $("#list_accounts tr"); 
    var objHeader = $("#list_accounts .jqgfirstrow td"); 

    if (objRows.length > 1) { 
     var objFirstRowColumns = $(objRows[1]).children("td"); 
     for (i = 0; i < objFirstRowColumns.length; i++) { 
      $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); 
     } 
    } 
} 

Tôi hy vọng các mã trên sẽ giúp bạn giải quyết vấn đề này.

Answer 2

Nhìn vào số old answer của tôi mô tả cách thay đổi căn chỉnh tiêu đề cột.

Nó không phải là những gì bạn muốn, sau đó bạn nên đăng một hình ảnh cho thấy lưới trông như thế nào và thêm vào câu hỏi của bạn mã đầy đủ của bạn lưới bao gồm mã HTML, thông tin về phiên bản của jqGrid mà bạn sử dụng và thử nghiệm dữ liệu. Vì vậy, tất cả những gì người ta cần để tái tạo vấn đề của bạn.

Answer 3

Đoạn mã trên đã không được làm việc cho tôi

tôi đã thay đổi nó một chút: Làm việc tốt với 4.6.0

var objHeader = $("table[aria-labelledby=gbox_" + gridName+ "] tr[role=rowheader] th"); 

for (var i = 0; i < objHeader.length; i++) { 
    var col = $("table[id=" + gridName+ "] td[aria-describedby=" + objHeader[i].id + "]"); 
    var width= col.outerWidth(); 
    $(objHeader[i]).css("width", width); 
}