JQgrid đặt chiều cao hàng

Question

Tôi đang sử dụng JqGrid với javascript. Tôi sẽ đặt chiều cao của mỗi hàng trong bảng nhưng tôi không hiểu cách thực hiện.

Đây là mã của tôi:

function jobList(){ 
var json=doShowAll(); 
alert("jobList() ==> php/get_job_status.php?value="+json); 
jQuery("#jobList").jqGrid({ 
    url:'php/get_job_status.php?value='+json, 
datatype: "xml", 
    colNames:['id','title', 'start', 'stop','completed'], 
    colModel:[ 
    {name:'id',index:'id', width:15,hidden:true, align:"center"}, 
    {name:'title',index:'title', width:150, align:"center"}, 
    {name:'start',index:'start', width:350, align:"center", sorttype:"date"}, 
    {name:'fine',index:'fine', width:350, align:"center", sorttype:"date"}, 
    {name:'completed',index:'completed', width:120, align:"center",formatter:highlight},//il solitoformatter:infractionInFormatter}, 
    ], 
    //rowNum:8, 
    //rowList:[8,10,20,30], 
    pager: '#pagerJobList', 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
multiselect: false, 
subGrid: false, 
autowidth: true, 
height: 250, 
rowheight: 300, 

caption: "Job Progress", 
    afterInsertRow: function(rowid, aData){ 
    jQuery("#jobList").jqGrid('setCell', rowid, 'completed', '', { 
     background: 'red', 
    color: 'white' 
    }); 
    }, 
    onSelectRow: function(id){ 
     //alert(id); 
     var title=""; 
     if (id) { 
     var ret = jQuery("#jobList").jqGrid('getRowData',id); 
     title=ret.id; 
     //alert(title); 
     } 
     else { 
     alert("Please select row"); 
     } 
     var json2=doShowAll(); 
     subGrid(json2,title); 
    } 

} 
); 

}

Sửa RowHeight hàng giá trị chiều cao không thay đổi. Đây là kết quả bảng của tôi

Thanks a lot.

Answer 1

Bạn có thể đặt chiều cao của các hàng riêng lẻ của jqGrid hoặc bất kỳ thuộc tính CSS nào khác với sự trợ giúp của phương pháp setRowData (xem this wiki article). Bạn có thể thực hiện việc này ví dụ: loadComplete:

$("#list").jqGrid({ 
    // ... 
    loadComplete: function() { 
     var grid = $("#list"), 
      ids = grid.getDataIDs(); 

     for (var i = 0; i < ids.length; i++) { 
      grid.setRowData(ids[i], false, { height : 20 + (i * 2) }); 
     } 

     // grid.setGridHeight('auto'); 
    } 
}); 

Bạn có thể xem working example here. Ở đây bạn có thể thấy rằng sau khi thay đổi chiều cao của các hàng, bạn nên thay đổi chiều cao của lưới. Sau khi hủy nhận xét dòng với số setGridHeight, kết quả sẽ trông giống như this.

CẬP NHẬT Dựa trên những câu hỏi từ bình luận: Để thay đổi chiều cao của tiêu đề của bảng với id = "danh sách" bạn có thể làm như sau:

$("table.ui-jqgrid-htable", $("#gview_list")).css ("height", 30); 

Các $("#gview_list") là một div trên thân lưới và tiêu đề lưới.

Bạn có thể xem kết quả here.

Answer 2

tôi giải quyết thiết lập quy tắc này trong một stylesheet css vấn đề này:

.grid .ui-jqgrid-htable th, 
.grid .ui-jqgrid-btable .jqgrow td { 
    height: 3em !important; 
} 

Answer 3

này cũng hoạt động:

.ui-jqgrid .ui-jqgrid-htable th { 
    height: 2em !important; 
} 
.ui-jqgrid tr.jqgrow td{ 
    height: 1em !important; 
} 

Answer 4

Trong tập tin ui.jqgrid.css có sự thay đổi trong thư mục/* cơ */phần để này:

.ui-jqgrid tr.jqgrow td { 
    font-weight: normal; 
    overflow: hidden; 
    white-space: nowrap; 
    height: 22px; 
    padding: 0 2px 0 2px; 
    border-bottom-width: 1px; 
    border-bottom-color: inherit; 
    border-bottom-style: solid; 
} 

white-space: được thay đổi từ pre t o nowrap.