Hiểu các hành vi chiều rộng cột JQGrid

Question

Tôi có một lưới cây với nhiều cột, tất cả đều có chiều rộng được chỉ định. Và cậu bé, có vẻ khủng khiếp vì các tiêu đề không đồng bộ với các cột bên dưới, ngay cả khi tôi có dữ liệu ngắn trong đó.

Cụ thể, nếu tiêu đề cột tiêu đề là ngắn hơn so với chiều rộng cột này, tiêu đề thu nhỏ lại thành kích thước của văn bản trong tiêu đề.

Làm cách nào để làm cho tiêu đề có cùng kích thước với cột?

Câu hỏi 2: Tôi đã nhận thấy rằng mặc dù tài liệu nói rằng cột "chiều rộng" tùy chọn bằng pixel, tôi có thể thấy rằng nó thực sự không có pixel, nhưng chỉ là một số tương ứng với độ rộng khác trong lưới. Ví dụ. nếu tất cả các trường là kích thước 10, tất cả các trường sẽ có kích thước bằng nhau, nhưng không phải là 10 pixel chiều rộng.

Cảm ơn trước vì đã giải thích rõ ràng, vì vấn đề đơn giản này dường như có nguồn gốc sâu hơn tôi tưởng.

Answer 1

Cố gắng chơi với thông số jqGrid 'autowidth' và 'shrinkToFit'. Ví dụ: nếu 'shrinkToFit' là đúng, chiều rộng của cột sẽ được thay đổi như thể độ rộng ban đầu xác định phần trăm. Đọc thêm here.

Answer 2

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); } }, ] } 
      }, 



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")); 
        } 
       } 
      } 

Answer 3

Tôi gặp sự cố tương tự. Tôi đã giải quyết vấn đề này bằng cách thêm 4 dòng mã trong GridComplete. 4 dòng này sẽ thay đổi kiểu của vùng nội dung của td [sửa đổi kiểu hàng đầu tiên của td là đủ]. Đây là một vấn đề trong jqgid. Mà là thực sự thiết lập của td bên trong '' nhưng phong cách này không được phản ánh trong td của khu vực nội dung. 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 tds nhưng chúng chỉ thay đổi cho '' đó 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 4

<div id="pager"></div> 
<span id='ruler' class='ui-th-column' style='visibility:hidden;font-weight:bold'></span> 
<script type="text/javascript"> 
    var colNamesData = ['Inv No','Date Of the Transaction', 'Amount That Is Owed']; 
    var colModelData = [ 
     {name:'invid', index:'invid', width:55}, 
     {name:'invdate', index:'invdate', resizeToTitleWidth:true}, 
     {name:'amount', index:'amount', align:'right', resizeToTitleWidth:true}]; 
    jQuery(document).ready(function() { 
     var ruler = document.getElementById('ruler'); 
     for (var i in colNamesData) { 
      if (colModelData[i].resizeToTitleWidth != true) { 
       continue; 
      } 
      // Measure the title using the ruler span 
      ruler.innerHTML = colNamesData[i]; 
      // The +26 allows for padding and to fit the sorting UI 
      var newWidth = ruler.offsetWidth + 26; 
      if (newWidth < 100) { 
       // Nothing smaller than 100 pixels 
       newWidth = 100; 
      } 
      colModelData[i].width = newWidth; 
     } 
     jQuery("#list").jqGrid({ 
      ... 
      colNames: colNamesData, 
      colModel: colModelData, 
      shrinkToFit:false, 
      ... 
    }); 
</script> 

Answer 5

Tôi gặp vấn đề tương tự. Hóa ra là các định nghĩa css mặc định, hiện tại của trang web để đệm trên các ô bảng. Đảm bảo rằng phần đệm của bạn nhất quán giữa thẻ thứ và thẻ td của bạn. Tôi đặt một div xung quanh lưới với một lớp div, và thêm dòng sau vào CSS của tôi:

.grid td, .grid th { 
    padding: 1pt 1ex !important; 
} 

Answer 6

Đặt chiều rộng mỗi cột theo tỷ lệ do CSS

Thêm các lớp css như sau

table.ui-jqgrid-htable thead{display:table-header-group} 
#JQGridClientMaster td, #ui-jqgrid-htable th{display:table-cell} 

Bây giờ Thiết lập độ rộng cho mỗi cột và

#JQGridClientMaster td:nth-child(1),th#JQGridClientMaster_rn{width:2% !important;}